CSS Backward compatibility

Publish Date:

Well, IE6 sucks and all, but sometimes you will just have to also support really old and wrong-interpreting browsers.

For CSS, here’s some things you’ll have to do:

  • First of all: Use a reset-css file for standardizing element styles.

    For example the YUI one.

  • No “>” on selectors (for direct-childs) allowed

  • So “body div.content” instead of “body > div.content”

    (many IE versions)

  • url (like for background images) without ‘

    So if you’re using a CSS folder for CSS files, and an images folder for images:

    url(/images/bg.png) instead of url(‘../images/bg.png’) or url(‘/images/bg.png’)

    (very old Firefox version)

  • Don’t use padding.

    Use a div in a div instead (and similiar) and add margin to the inner one, or padding to the inner one without a fixed size. That way, the outer may still have fixed sizes or floating.

CSS hacks for IE:

  • IE6:

    * html .class { }

  • IE7:

    *+ html .class { }

  • IE6 + IE7:

    html* .class { }

Where .class is your selector