Welcome to WebmasterWorld Guest from 54.146.171.44

Forum Moderators: not2easy

Message Too Old, No Replies

div padding problem

padding increases the width in Mozilla?

   
10:59 pm on Apr 27, 2003 (gmt 0)

10+ Year Member



If I make something like this:


<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.

11:16 pm on Apr 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Mozilla is doing it right.

The

width
property controls the width of the content.
padding
controls the distance from the content to the border. And
margin
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">

(all on one line, as the very first line in the code)

See AListApart using the DOCTYPE [alistapart.com] for more details.

11:31 pm on Apr 27, 2003 (gmt 0)

10+ Year Member



Thanks for the help Graham :)

not using a full doctype

Ooops, you got me there - it was just an idea I was working so I hadn't put in a doctype.

Mozilla is doing it right.

So Opera and IE are doing it wrong? I'm still struggling because is doesn't display the same in different browsers.

11:43 pm on Apr 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yup Opera and IE will do it wrong till you put the doctype in.
11:58 pm on Apr 27, 2003 (gmt 0)

10+ Year Member



Ah OK, I was using the HTML 4.01 Transitional doctype which still shows browser differences.
12:04 am on Apr 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ah, that would explian it.
I always try to stick with the Strict doctypes because it keeps my code cleaner and stops me slipping into old (bad)habits. :)
12:09 am on Apr 28, 2003 (gmt 0)

10+ Year Member



I'm actually having another problem related to the above not displaying the same in Mozilla, which I really can't figure out.

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 ;)

12:13 am on Apr 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Odd.. sounds like mismatched tags. Try validating your html [validator.w3.org].
12:23 am on Apr 28, 2003 (gmt 0)

10+ Year Member



Thanks, can't believe I didn't think of that myself. Next time I being slow just tell me to go figure it out myself or something ;)

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.

Huh?

Anyway, I fixed all the validation errors and the problem just melted away. Thanks again :)

12:44 am on Apr 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have to admit that <div align="center"> was one of the harder habits to break. :) But it makes sense - the alignment is a style issue and should be specified in the CSS.

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.

1:27 am on Apr 28, 2003 (gmt 0)

10+ Year Member



Hmm, now I switched to strict it appears that I cannot put a <form> tag just straight into a div. Where should I be putting it then lol?
1:43 am on Apr 28, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<form> should be okay within a div.
What you might have problems with is the <input> tags whcih can't just be children of a form, they should be within a <p>,<div> or other block level element.

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..

[pre]
<div class="colouredbox">
<form method="post" action="/login.php">
<div>
<label for="luser">Username:</label>
<input name="user" id="luser" type="text" maxlength="20">
</div>
<div>
<label for="lpass">Password:</label>
<input name="pass" id="lpass" type="password" maxlength="20">
</div>
<div>
<input type="submit" value="Login">
</div>
</form>
</div>
[/pre]
2:21 am on Apr 28, 2003 (gmt 0)

10+ Year Member



Got it in one again Graham. You've been a great help :)