Jazajay's Cross Browser CSS
O.K Cross browser CSS is not hard, even with hacks.
Here's how to do it ~
Write the code for Opera, due to that technically being the most standards advanced browser of the lot and secondly the lack of good long term hacks to deal with any problems in that browser.
Then use vender CSS specific hacks to hit the most modern version of each.
Now for IE, well IE8 on a small site tends to render much like Opera, however if it doesn't stick it in a conditional comment hitting 8 or stick in Microsoft's meta and get it to render like IE7. IE7 can also be hit with a exact conditional comment.
Then stick any fixes for IE6 which still has a huge amount of usage in a ie6 specific conditional comment and job done cross browser CSS.
O.K so here goes cross browser 101.
HTML:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Your Page title</title>
<link type="text/css" rel="stylesheet" media="screen" href="style/main.css" />
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="screen" href="style/ieFix.css" />
<![endif]-->
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" media="screen" href="style/ie6Fix.css" />
<![endif]-->
O.K
Now for the most recent versions of each browser ~
In the main css file referenced above you will have something like this ~
#header li{margin-top:20px}
Looks fine in Opera but messes up in Safari and Firefox.
So write this
#header li{margin-top:20px}
#header li,x:-moz-any-link{margin-top:10px}
#header li,x:-webkit-any-link{margin-top:5px}
Now Opera moves the list element 20 pixels from the top.
Firefox moves the same element 10 pixels from the top.
Safari and any other Webkit browser moves it down 5 pixels
Jobs a good un.
Now if you want to hit older versions you just have to use CSS selectors that those older versions don't recognize. That browser does then not understand it, so the rule is then ignored. So we want to hit Firefox2 for example then write this:
#header li{margin-top:20px} //Opera, IE, other browsers
#header li,x:-moz-any-link{margin-top:10px} //Firefox2
#header li,x:-moz-any-link:before{margin-top:5px} //Firefox3, Firefox2 does not understand before but because FF3 does precedance takes over.
#header li,x:-webkit-any-link{margin-top:5px} //Safari/Webkit enabled browsers
Yes they are hacks before any ones goes on the almighty, and TBH when the browser developers want to get around to fixing their broken products, so they all display the same, then I will stop using hacks, but until then I wont.
The other upside is these hacks will never go obsolete, the next version of the browser released just gets the hack, but I've explained how to get older versions so you should never have any more of those problems which last more than an hour just to get a div to align properly in 1 browser.
Please don't start using frameworks it stifles creative IMO. Learn the code your self, then you can be one of those guys, or gals, who everyone else, who uses CSS frameworks, goes WOW how is that done.
Jaz
Key ~
Green ~ CSS
Purple ~ HTML
Orange ~ Editor comments