Great Little CSS Fix
Anyone who designs websites using CSS inevitably runs into problems with cross-browser compatibility. Firefox and IE are notorious for rendering CSS markup differently.
Take, for example, padding. If you have a <div> tag with a width and padding set, Firefox adds the padding to the width making the entire box larger while IE adds padding while keeping the box the width set in the CSS. While browsing the web today, I happened to come across a great fix that forces Firefox to work the same way as IE with padding:
-moz-box-sizing:border-box;
box-sizing:border-box;
13 Comments
Submit a Comment
Any examples of this code in action? I’ve not seen that before, thanks.
It might work but I think you’ll find hardcore coders baying for your blood suggesting a fix for Firefox when it’s actually IE that doesn’t behave properly. Also, what about other standards compliant browsers such as Opera?
It’s a mantra you’re probably familiar with – design for Firefox, then hack for IE as required.
In this situation it might be better to avoid having padding on the div and instead add a margin to the content inside it, that way no hacks are required.
This seems pretty backwards. Why use the old box model?
This will inevitably break in future releases of browsers and i would be surprised if it works in many browsers at all.
My advise for dealing with ie5.5s box model is to either avoid using width and padding together, or ignore ie5.5!
The difference between browser boxmodels can typically be avoided by simply marking up your website with a strict doctype.
If I’m understanding that correctly, you’re saying you want to add code to make Firefox INCORRECTLY interpret the W3C box model?
Can I just say that’s the single dumbest thing you could possibly do? IE’s (6.0) box model rendering is INCORRECT, why would you make Firefox (and you’d have to add this to every other browser as well that renders the box model correctly: opera, camino, safari, etc.) render the box model incorrectly?
Box Model:
http://www.w3.org/TR/REC-CSS2/box.html
But in that case you’re forcing a standards-compliant browser, which is one of many, to act like a non-standards browser, which stands alone.
Firefox, Opera, Netscape and Safari all implement the box model the right way, according to the CSS spec. If you have to hack something, hack the bad browser: IE.
These are all good points but the fact of the matter is the majority of visitors use IE, and many of them simply don’t upgrade their browsers, so not only can we not ignore older versions of IE but we have to recognize that IE users are the majority for many websites. As much as I agree that making Firefox behave like IE seems backwards, I’m of the opinion that satisfying user needs is more important than satisfying a programmer’s prejudice for one browser over another. Until all browsers act the same or Firefox, Opera, etc. become the majority browsers, ‘hacks’ like this will remain (I think) necessary.
as far as hacks go, this is not a well thought out one (sorry Christin)… you can avoid a hack all together for box model issues quite easily.
re: IE being the dominant browser. IE 6 is actually not on the rise… IE 7 is quickly replacing it. This version renders the box model correctly so why bother with a short term hack such as this one?
Google ‘box model css’ and you will find many thoroughly tested solutions, no need for this IE biased version.
I found another good solution. To make the IE works like firefox:
At first, use the correct document type:
And the CSS Hack is:
-moz-box-sizing:content-box;
box-sizing:content-box;
display: inline;
Sample code: http://tinyurl.com/27x7sw
It worked fine in IE 5.5, 6, 7, FF, Safari and Opera.
It didn’t work in IE 5.
enjoy.
The address was inserted wrogly. The correct is:
http://nicholasalmeida.com/ie_box_fix/
http://www.comesolvego.com/2008/05/02/the-quickest-css-hack-fix-for-ie/
hmmm well the content-box hack didnt work for me but the border-box worked perfectly.
it work fine in all the brower