Browser Css Bugs and Workarounds

There are a range of browser differences and actual css bugs, particularly in IE.
Lots of ingenious users have created workarounds to these problems.
Their solution has been to use a variety of hacks to fool IE.

The problem is with the impending release of IE7 and 8 most of the original css bugs have been fixed.
This means the css bug crushing hacks may break the page in the new IE browsers.

Here is a list of common CSS hacks to look out for:

    * html > body - http://css-discuss.incutio.com/?page=ChildHack
    * * html - http://css-discuss.incutio.com/?page=StarHtmlHack
    * head:first-child + body - http://centricle.com/ref/css/filters/tests/owen/
    * head + body - http://www.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html
    * body > element - http://css-discuss.incutio.com/?page=ChildHack 

Now Microsoft have come up with their own hack and recommended that the other hacks not be used.

"We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments ."

Below is their recommendation, a separate style sheet that is only called by IE.
It involves using conditional comments, an IE feature available since IE version 5.

<!--[if IE6]><link rel="stylesheet" href="ie6only.css" type="text/css" /><![endif]-->

CSS Reset

All browsers have a built in style sheet. That is why your h1 tags appear in bold even if you haven't set that attribute.

The bad news is that the built in style sheets vary from browser to browser so by default pages are rendered differently.

A new technique that is gaining popularity is to reset all the CSS to a similar base.

That allows the web developer to apply their own styles that are rendered consistently across most browsers.

There are a few of these libaries that are freely available, one is Yahoo!'s YUI Reset CSS library.

YUI Reset CSS read about Yahoo! reset library and other yui tools.