I have my margin: 0 auto looking good in Chrome but it's not working in IE9. In IE9 the entire site is static against left of the screen. I added a simple reset css statement based on some suggestions but they are not helping.
In main.css:
html, body {
padding:0;
margin: 0;
}
body {
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrapper {
width: 1009px;
background-color:white;
border-style:solid;
border-color:#002663;
padding:5px;
margin: 0 auto;
margin-top:25px;
}
Updated: What the css looks like in IE's dev tools panel:
Can anyone see where I can make an improvement for IE? Thanks.
Update: actual html as requested:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Search Page</title>
<!-- Hostname: VDDP03A-FAEF32A -->
<link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" />
<script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script>
</head>
<body >
<div class="wrapper">
<table width="100%" border="0" cellpadding="0" style="margin:0;">
<tr>
<td>
<img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo">
</td>
<td width="50%">
<br />
<h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2>
</td>
<td>
</td>
</tr>
</table>
<hr color="#002663" style="margin:0;">
<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;">
<input type="hidden" name="searchType" value="myValue">
<table width="1000px" border="0" cellpadding="0" style="margin:0;">
<col width="285px" />
<col width="300px" />
<col width="278px" />
<col width="137px" />
<tr style="margin:0;">
<td colspan="4">
<h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4>
</tr>
<tr style="margin:0;">
<td style=" padding-left:100px; padding-bottom:0px; width:185px;" >
options :
<input type="radio" name="options" value="OP1" style="border:none;">
OP1
<input type="radio" name="options" value="OP2" style="border:none;">
OP2
</td>
<td>
Search Criteria : <input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1">
</td>
<td style="min-width: 268px;">
Date :
<input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker">
</td>
<td style="min-width: 138px;">
<input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">
<input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;">
</td>
</tr>
</table>
</form>
<!-- Three more forms similar to the above -->
<hr color="#b0b1b2" style="margin:3;">
<table table width="1000px" border="0" cellpadding="0">
<tr style="margin:0;">
<td style="margin:0;">
<h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4>
</td>
</tr>
<div styleId="errors" style="margin:0;">
</div>
</table>
</div>
</body>
</html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Doctype has to be the first thing in the document. It goes before the <html> start tag.
Putting it where you have it is both invalid and triggering of quirks mode (and in quirks mode, all sorts of things break).
Try adding margin:0 auto on your body tag
body {
/* background-position: 5px 5px;
background-repeat: no-repeat; */
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1010px;
margin: 0 auto; /* <--*/
}
Try
body, html {
padding: 0;
margin: 0;
}
Look up reset css when you get a chance http://www.cssreset.com/
Update:
I would suggest you take the width off of the body tag and put it in a div.
http://jsfiddle.net/KMDuw/2/
My fiddle shows a fixed width div using auto margin. If you take off the body css, you will see some space.
Can you also post your html please
Related
I have been reading everything but I'm not sure why i can not get the buttons to center under the top image. The .page_wrap margins are both auto?
I am trying to get the buttons to center on a desktop browser and samsung note 3 browser
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
}
.page_wrap {
border:0px solid black;
width:350px;
height:10px;
margin-left:auto;
margin-right:auto;
}
.space {
border:0px solid black;
width:250px;
height:150px;
margin-left:auto;
margin-right:auto;
}
input[type="button"], input[type="submit"], button {
background: none;
background-image: url(http://i.imgur.com/9qwHx0c.png);
background-position: center center;
background-repeat: no-repeat;
border: 0px;
height: 71px;
width: 227px;
font-weight:200;
font-size: 40px;
color: #FFFFFF;
/* add the rest of your attributes here */
}
img.shedremote {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/shedmine.css" />
<script>
var device = "http://192.168.1.178/";
function reqListener() {
console.log(this.responseText);
}
function setLed(i, state) {
if (state === undefined || state !== 'on') state = 'off';
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
if (i === 'all') {
oReq.open("GET", device + "?all=" + state);
} else {
oReq.open("GET", device + "?led" + i + "=" + state);
}
oReq.send();
}
</script>
</head>
<body>
<div class="space"></div>
<img class="shedremote" src="http://i.imgur.com/wTL0PlY.png" alt="shedremote">
<div class="space"></div>
<div class="page_wrap">
<table style="width:200%">
<tr>
<td> <input type="button" value="Lights on!" onClick="setLed(1,'on')"/> </td>
<td> <input type="button" value="Lights Off!" onClick="setLed(1,'off')"/> </td>
</tr>
<tr>
<td> <input type="button" value="door open" onClick="setLed(2,'on')" /> </td>
<td> <input type="button" value="door locked" onClick="setLed(2,'off')"/> </td>
</tr>
<tr>
<td> <input type="button" value="3 on" onClick="setLed(3,'on')" /> </td>
<td> <input type="button" value="3 off" onClick="setLed(3,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="Disco on" onClick="setLed(4,'on')" /> </td>
<td> <input type="button" value="Disco off" onClick="setLed(4,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="5 on" onClick="setLed(5,'on')" /> </td>
<td> <input type="button" value="5 off" onClick="setLed(5,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="6 on" onClick="setLed(6,'on')" /> </td>
<td> <input type="button" value="6 off" onClick="setLed(6,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7 on" onClick="setLed(7,'on')" /> </td>
<td> <input type="button" value="7 off" onClick="setLed(7,'off')" /> </td>
</tr>
<tr>
<td> <input type="button" value="8 on" onClick="setLed(8,'on')" /> </td>
<td> <input type="button" value="8 off" onClick="setLed(8,'off')" /> </td>
</tr>
</table>
</div>
</body>
</html>
To horizontally center the div itself:
/* If the div has the class "button-wrapper" */
.button-wrapper {
margin: 0 auto;
}
Or, to horizontally center the buttons within the div:
/* If each button has the class "button-centered" */
.button-centered {
text-align: center;
}
EDIT: I suppose you could keep using tables if you like. However, tables for layout is often not considered "best practice." For example, responsive design becomes more difficult because tables cannot automatically adapt to different screen sizes.
for your desktop problem i would try:
.page_wrap
{
border:0px solid black;
width:500px;
margin: 0 auto;
}
body {
background-image: url("http://i.imgur.com/KH2LTHz.jpg");
width:100%;
}
and remove style from the html document.
another thing you your page is not compatible for Samsung note 3 browser
you can try and work with Media Queries to help fit your page for desktop and smartphone.
.
I have made code for auto generated text boxes in an HTML growing table. I want to save values from these text boxes to a mysql database using netbeans but I don't know how I get the ids of each text box while they are auto generating..
My code is here..please help me if there is any solution for this problem..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 24 Mar 2015 06:41:28 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="name" type="text" size="17%" maxlength="120" /></td><td><input name="email" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="mobile" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <img src="./image/close.png" /></p>';
jQuery('#addedRows').append(recRow);
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
</head>
<body>
<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;" >Name</td>
<td style="font-size:14px;">Email</td>
<td style="font-size:14px;">Mobile</td>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
<img style=" padding-left: 12px;" src="./image/add.png" />
</span>
</td>
</tr>
<form action="" method="POST">
<tr id="rowId">
<td><input type="text" name="name" size="17%"/></td>
<td><input type="text" name="email" /></td>
<td><input type="text" name="mobile" /></td>
</form>
</table>
<div id="addedRows"></div>
</td>
</tr>
<td><input type="submit"></td>
</table>
</body>
</html>
I am using JQM table in my html and included all neccesary jQuery file. Please find below my code.
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="jqueryMobile/jquery.mobile-1.4.2.min.css">
<link type="text/css" href="jqueryMobile/jquery.mobile.inline-svg-1.4.2.min.css" rel="stylesheet">
<script src="jqueryMobile/jquery-1.10.2.min.js"></script>
<script src="jqueryMobile/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageten">
<div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
<h2>My Services</h2>
</div>
<div>
<input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
<input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
</div>
<br>
<div data-role="content">
<div>
<table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;">
<thead>
<tr style="font-size: 15px; text-align: center">
<th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
<th data-priority="1" style="text-align: center">Available Activation</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 15px; text-align: center">
<th style="text-align: center">0</th>
<th style="text-align: center">25</th>
</tr>
<tr style="font-size: 15px; text-align: center">
<th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
</tr>
</tbody>
</table>
</div>
</div>
<div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">
<div class="ui-block-a">
<input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
<span>Current Services</span>
</div>
<div class="ui-block-b">
<input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
<span>Add Services</span>
</div>
<div class="ui-block-c">
<input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
<span>Remove Services</span>
</div>
</div>
</div>
Please Find Image attachment, it displayed deformed table on UI Screen of simulator with red Rectangular bracket whereas it should be like in green rectangle. I am not getting reason of Why its getting distorted. Please help me with it
you need to use data-mode="none" on your table,
this will keep the high priority columns intact. and also doesnt show the option to hide the columns manually.
here is the working code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js">
<link type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="pageten">
<div data-role="header" style="color: white; width: 100%; background-color: red; text-align: center">
<h2>My Services</h2>
</div>
<div>
<input type="image" id="back" name="back" src="images/back.png" alt="Back" onclick="currentPage.back();">
<input type="image" style align="right" id="home" name="home" src="images/home.png" alt="Home" onclick="currentPage.loadmainmenu();">
</div>
<br>
<div data-role="content">
<div>
<table border="1" data-role="table" id="table-reflow" class="ui-responsive table-stroke" style="margin-left: 5%; height: auto; margin-right: 5%; width: auto;" data-mode="none">
<thead>
<tr style="font-size: 15px; text-align: center">
<th colspan="1" data-priority="1" style="text-align: center">Currently Active</th>
<th data-priority="1" style="text-align: center">Available Activation</th>
</tr>
</thead>
<tbody>
<tr style="font-size: 15px; text-align: center">
<th style="text-align: center">0</th>
<th style="text-align: center">25</th>
</tr>
<tr style="font-size: 15px; text-align: center">
<th colspan="2" style="text-align: center">Details are as of 22-May-2014 11:44 AM</th>
</tr>
</tbody>
</table>
</div>
</div>
<div data-role="footer" style="margin-left: 5%; height: auto; margin-right: 5%; width: 90%;">
<div class="ui-block-a">
<input type="image" id="currentservices" name="currentservices" src="images/my_services.png" alt="currentservices" onclick=""><br>
<span>Current Services</span>
</div>
<div class="ui-block-b">
<input type="image" id="addservices" name="addservices" src="images/add_my_services.png" alt="addservices" onclick="currentPage.loadaddservices();"><br>
<span>Add Services</span>
</div>
<div class="ui-block-c">
<input type="image" id="removeervices" name="removeervices" src="images/remove_my_services.png" alt="removeervices" onclick=""><br>
<span>Remove Services</span>
</div>
</div>
</div>
</body>
</html>
hope it helps.
I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SMALL NORTH RUN</h1>
</header>
<nav>
<ul id="navlist">
<li>HOME</li>
<li>TRAINING REGIME</li>
<li>FORUM</li>
<li>SPONSOR</li>
<li>CONTACT</li>
</ul>
</nav>
<hr id="hrnav" />
<div id="content">
<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>
<tr><td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
<tr>
<td>
<label>Message:</label>
</td>
<td>
<textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
</td>
</tr>
</tr>
<tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30" name="donator"/></td></tr>
<tr>
<td>
<tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
</table>
</form>
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
CSS
#content { text-align: left; margin: 2px; padding: 10px; }
#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }
try to add a doctype :
for example, here is the HTML5 doctype
<!DOCTYPE html>
It seems to work fine for me.
Maybe you have a problem in your css?
EDIT:
The float style on your P tag is causing the trouble.
A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:
<div style="float:none;">
<br />
</div>
This causes the rest of your code to resume the normal layout
1) You have some errors in table structure
2) If you need to center table, you can setup it margin-left and margin-right auto.
There is possible table code with align:
<table style='margin: 0 auto;'>
<tr>
<td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr>
<td><label>Donation (£):</label></td>
<td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
<td><label>Message:</label></td>
<td><textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
<td><label>Your Name:</label></td>
<td><input type="text" maxlength="30" name="donator"/></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Confirm Donation"/></td>
<td> </td>
</tr></table>
If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.
I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice.
But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout.
This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.
Any ideas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td><input type="text" value="Field 1" id="field1" size="25"></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
<td class="delimiter"> </td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
</tr>
</table>
</body>
</html>
I was not surprised when you said it worked in some browsers and not others. Welcome to the real world of developing a web app. I haven't gone down into the nitty gritty of checking why browsers are refreshing their layouts differently, as i've learned that it can be a black hole of time. Instead i put forth the following solution:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td class="delimiter">
<table><tr>
<td><input type="text" value="Field 1" id="field1" size="25" /></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td>
<table><tr>
<td><input type="text" id="field2" value="Field 2" size="25" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
I know it's not the prettiest solution, but as raw html it does work. Tested in Chrome and IE10.
Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.