CSS Backward compatibility

Publish Date:

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

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-children) 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 similar) 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