Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: not2easy
<div style="width: 80%; padding: 0px; border: 1px solid #000;">top</div>
<div style="width: 80%; padding: 5px; border: 1px solid #000;">middle</div>
<div style="width: 80%; padding: 0px; border: 1px solid #000;">bottom</div>
This is fine in IE/Opera but in Mozilla (Netscape?) the middle div gets wider because of the padding. Anything I can do to get around this, or am I approaching it the wrong way? I thought padding would only affect the distance between the content and the edges of the div, so I don't understand why the width changes.
Thanks for any pointers.
property controls the width of the content.
controls the distance from the content to the border. And
controls the distance of the border from other borders.
Older versions of IE got this wrong (its known as the IE box model bug). But it is fixed in the new versions.
I'm guessing your not using a full doctype because it sounds like your browsers are in 'quirks' mode. To make them render in 'standard compliant' mode use a full doctype. Like this..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
See AListApart using the DOCTYPE [alistapart.com] for more details.
There is another div above 'middle' in my initial example with a table in it. In IE this appears above the middle section as I expected. In Moz it's within the middle div. Why might this be? I'm hopeless at tracking down CSS problems because I tend to use a little more than I understand ;)
W3.org don't appear to be too impressed with my code - bad habits perhaps? ;) What, no div align in 4.01 strict? That'll be why I've been using transitional so much then...
Plus my Mozilla headers appear to be screwed up as I get an error trying to upload a file:
Sorry, I am unable to validate this document because its content type is application/octet-stream, which is not currently supported by this service.
Anyway, I fixed all the validation errors and the problem just melted away. Thanks again :)
If you set the left and right margins to auto then the element will be centered. If you want to be nice to older browsers then also set the parent element to text-align:center to make them center it too.
So you could just put a <div> or <p> after the <form> and then close it just before the </form>
However I usually use divs to 'group' elements of the form together.
Here's my valid strict markup of a typical login form..
<form method="post" action="/login.php">
<input name="user" id="luser" type="text" maxlength="20">
<input name="pass" id="lpass" type="password" maxlength="20">
<input type="submit" value="Login">