Proper way to use CSS padding?

[igowerf]

Firebird and IE seem to handle this differently.

#bla {
width: 800px;
padding: 15px;
}

In IE, I'll have an 800px wide container with 15px of padding on the inside on all 4 sides of the container. In Firebird, I get an 830px (800 + 15 + 15) wide container. Apparently, IE is, once again, dumb because the W3C states that the padding is supposed to be added to the width. :\

 

[notfred]

I had a bitch of a time getting something like this to work earlier today. The IE way is much more convenient when you have 5 columns that are each supposed to be 20% width. Using the correct method, they're each 20% plus 30 pixels, and they don't fit. I ended up having to nest two <div>s inside each other to get it to work.

 

[notfred]

better explanation of what I did:

<style>
.out{
width: 800px;
}
.in{
width: 100%;
padding: 15px;
}
</style>

<div class="out>
<div class="in">
text
</div>
</div>

That should give consistent results in both browsers.

(I'm doing this from memory... didn't actually look at the code I wrote earlier, so it could be slightly wrong, but that's general idea)

 

[igowerf]

Ah. That makes sense. I'll try that then. Thanks. I don't really like that we have to add extra tags to the structure to get this to work nicely.

 

[Barnaby W. Füi]

IE is retarded in older versions (ok, still is, just less so). I think this problem was fixed in 6. The ol' voice-family:inherit hack comes to the rescue 😛 http://www.thenoodleincident.com/tutorials/box_lesson/basic2_fixed.html

Interesting solution notfred has.

BTW, if you've never seen it, check out http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

 

[dukdukgoos]

This is a very well know bug with IE's box model. IE 6 fixes in when running in standards-compliant mode. IE 5.x can be given alternate values to compensate for the bug using various CSS hacks.