div padding problem

Forum Moderators: not2easy

Message Too Old, No Replies

div padding problem

padding increases the width in Mozilla?

pixel_juice

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

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.

grahamstewart

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

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.

pixel_juice

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

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.

grahamstewart

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

Yup Opera and IE will do it wrong till you put the doctype in.

pixel_juice

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

Ah OK, I was using the HTML 4.01 Transitional doctype which still shows browser differences.

grahamstewart

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

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

pixel_juice

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

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

grahamstewart

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

Odd.. sounds like mismatched tags. Try validating your html [validator.w3.org].

pixel_juice

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

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

grahamstewart

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

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.

pixel_juice

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

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?

grahamstewart

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

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

pixel_juice

2:21 am on Apr 28, 2003 (gmt 0)

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