CSS "padding" property: IE vs Firefox?

[screw3d]

I just noticed that IE6 and Firefox render it differently. Found that out the hard way after messing with it trying to make a page look right in both browsers. :frown:

Say, if you declare padding: 20px; in a box with a fixed-width of 500px, Firefox will bump the width of the box to 20 + 500 + 20 = 540px, while IE will render the box with a width of 500px, but the usable area within the box is reduced (20 + 460 + 20 = 500px).

Anyone else noticed this? I had to resort to using "margin" for the elements inside the box and set the padding to 0 to fix this.


Which is supposed to be the "correct" way of rendering it BTW? My money is on Firefox but I wanna hear some the web devs out there.

 

[CTho9305]

In general, the Mozilla project follows standards. If you want to find out details... irc.mozilla.org, #mozilla, someone there will know for sure. You could also search bugzilla - I'm sure a bug would be filed if Moz wasn't doing the right thing.

 

[igowerf]

Firefox is doing is correctly. Padding is supposed to be added on top of the width. It's REALLY annoying that IE does it incorrectly because I always want to use padding but I have to come up with workarounds to make things look right.

 

[Barnaby W. Füi]

Google for box model hack.

 

[screw3d]

Originally posted by: BingBongWongFooey
Google for box model hack.

Ah so THAT's what it's for! I have seen and skimmed through the box model hack page but didn't realize this is a fix for this problem :beer:

 

[Barnaby W. Füi]

:beer::beer:

 

[jgbishop]

Here is a direct link to the article.