Art Of Programming

musings by Dmytrii Nagirniak

CSS Cross Browser Compatibility Tips

I have been reading the very interesting topic and just decided to keep a note on that. Just for myself. Blog is sometimes useful  as a notebook for myself. And it might help other people.

So what I want to note here: I often fight with different issues across Firefox and Internet Explorer (only these 2 browsers, but it’s already enough for me).

I prefer to style pages in Firefox (just because it’s more convenient using Firebug). Then I hope everything will work in IE (6,7) as well. But it has have did.
So I have to tweak CSS for IE and watch not to break what’s done for FF. It’s just a real PITA.

There are tons of guides how to write cross browser CSS.

But the one I particularly like has some short and useful tips. Let’s quickly move through them:

  • Reset styles to make consistent look in all browsers. Sample. Note: Most JS libraries (YUI, ExtJS etc) provide reset CSS rules.
  • Do not resize images via CSS/HTML because not all browsers do it well.
  • Do not use light font on dark background because of issues in Safari that causes other issues fixing this one.
  • Use only common fonts (Arial, Georgia, Verdana etc) because of different browsers and OS’s render it differently.
  • Size font in em through the page, but initialise in % for body. I’m not exactly sure about this, but the reason is that "The ability to resize text differs amongst browsers and OS’s".
  • All layout divs that are floated should include display:inline and overflow:hidden. This is due to IE doubles margins on the float side and IE 6 layout problems.
  • Carefully clear floats using overflow:auto or overflow:hidden. Be aware of issues. See Samle.
  • Use CSS selectors subset that all of your browser support. See browser CSS selectors support.
  • Do not use PNG transparency if you need to support IE 6.

The general idea I prefer to stick is just using minimum subset of a features available in all supported browsers intersected with W3C standard.

So if one browser doesn’t support particular descendant selector - never use it. If there’s no such W3C description - never use it (not always possible).

But still the biggest problem is when browsers behave different ways with the same supported feature.
I hope couple of these tips and links will help to solve you (and me) some of the cross-browser compatibility issues.

Comments

Dmytrii Nagirniak
Thanks Alexander. I’ll remember the fix.
Alexander
btw, ie6 png transparency is easily fixed with applying specific htc behaviour for the img element, see http://www.twinhelix.com/css/iepngfix/

seems to work at our’s

Comments