Rant: Cross Browser Coding

[Freakish_05]

I hate internet explorer! Every last CSS variable works perfectly in Firefox! Do they work in Internet Explorer? Do they hell! Of course we all know that. Microsoft just HAS to be different doesn't it!
Why is it that all of the less well known browsers (yet far superior browsers), like FF and Opera lap up CSS and produce wonderful stuff but the most common browser (I.E. Hoo-*******-Ra) is a complete pile of cack and will just spit out whatever it feels like. Then when you go to fix the CSS so that it appears correctly in I.E. it messes it up for every other browser.

Can someone please enlighten me as to how I can set a different stylesheet depending on which browser is being used because this is becoming a real ball-ache!

 

[psyr33n]

Every last CSS variable

Wrong terminology, first and foremost, just 'cos I'm a bit of a pedant.

Secondly, as for the main question, the lesser known browsers are updated often (unlike the IE6 to IE7 transition...) hence keeping up to date with new standards.

I don't recommend separate stylesheets because they can be a nightmare to manage (though, if you insist, you could either use an IFIE statement or PHP/JS browser sniffing, though usually somewhat messy) - instead, use IE's (presumably v6) lack of standards support to apply certain rules.

For instance:

/*
* Apply to all browsers
*/

elem#myid
{
	property: value1;
}

/*
* Hide from IE6 (whose lack of child selectors renders the below code useless)
* Show to (at least *more*) standards compliant browsers: IE7, Firefox, Opera, Safari etc.
*/

html > * elem#myid
{
	property: value2; /* Override IE6's value */
}

Hope this helped.

 

[paulsheffII]

All
#IE7
_IE6

Seems to fit the bill.

 

[unwashed potato!]

All
#IE7
_IE6

Seems to fit the bill.

this is exactly what I use as i find it very clear which bits are for IE6 and 7. if you don't understand it you put _ before any code that you want for IE6 and # before anycode for IE7. Im sure you would understand but if i didn't have a clue to me that looks like i would put _IE6 in the div name etc.