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;

No tags for this post.

13 Comments

  1. tacimala
    Apr 18, 2007

    Any examples of this code in action? I’ve not seen that before, thanks.

  2. Adam
    Apr 18, 2007

    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.

  3. Adam ZZ
    Apr 18, 2007

    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!

  4. adam
    Apr 18, 2007

    The difference between browser boxmodels can typically be avoided by simply marking up your website with a strict doctype.

  5. Jesse Bilsten
    Apr 18, 2007

    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

  6. Chris
    Apr 18, 2007

    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.

  7. Christin Phelps
    Apr 19, 2007

    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.

  8. Scott G
    Apr 19, 2007

    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.

  9. Nicholas
    Apr 20, 2007

    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.

  10. Nicholas
    Apr 20, 2007

    The address was inserted wrogly. The correct is:
    http://nicholasalmeida.com/ie_box_fix/

  11. brandon
    Feb 1, 2009

    hmmm well the content-box hack didnt work for me but the border-box worked perfectly.

  12. php community
    Dec 22, 2010

    it work fine in all the brower

Submit a Comment

Your email address will not be published. Required fields are marked *