homepage Welcome to WebmasterWorld Guest from 54.166.113.249
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
div padding problem
padding increases the width in Mozilla?
pixel_juice

10+ Year Member



 
Msg#: 945 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 945 posted 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

10+ Year Member



 
Msg#: 945 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 945 posted 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

10+ Year Member



 
Msg#: 945 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 945 posted 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

10+ Year Member



 
Msg#: 945 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 945 posted 12:13 am on Apr 28, 2003 (gmt 0)

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

pixel_juice

10+ Year Member



 
Msg#: 945 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 945 posted 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

10+ Year Member



 
Msg#: 945 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 945 posted 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

10+ Year Member



 
Msg#: 945 posted 2:21 am on Apr 28, 2003 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved