CSS tricks/hacks/filters that just work.
I dare say these tips make this thread sticky worthy. :)
I've been kicking and screaming trying to figure out a solid way to debug CSS across the top browsers and have narrowed it down to a few key methods.
First and foremost, build for Firefox! It works as intended and provides a solid base to start localizing from.
Next, debug for IE7. There is a host of debatable ways to do this depending if you care about being standards compliant or not. Frankly, Imho, if the top competitor (microsoft) isn't going to build their browsers (ie6, ie7) standards compliant, I don't see why we should kill ourselves trying to.
This one trick will solve 99% of your issues targeting IE7.
Simply add a '#' before the styles you'd like only IE to see.
Code:
#container{
width:800px; //all browsers will see this line
#width:780px; //only IE 6 and 7 will see this line
}
Yes, it really is that easy. I'm alarmed it's not promoted more.
So while IE7 has made great strides to be more compliant, it still sucks, but not as bad as IE6, the great bane of my existence. If the IE filter (#) does not solve your issue in IE6 as well there is yet a another filter just for it.
It involves a separate selector rather than additional lines inside the same one. You start this new selector with * html and then simply enter a single backslash (\) in the name of the style.
EDIT: I want to add sticks464's correction for clarity
Quote:
Originally Posted by
sticks464
One thing to add to the backslash hack, to work properly, the backslash must be positioned in the middle of the property and shouldn't appear before the letters a to f, or A to F, or numerials 0 to 9 - if it does, those characters will be treated as hexadecimal numbers.
Code:
#container{
width:800px; //normal styling
}
//target only IE6 (note: Don't use comments in IE6!)
* html #con\tainer{
width:780px;
}
It's disgustingly atrocious but hey, so is the rest of the browser.
Btw, I estimate IE6 usage to be small enough to stop supporting it by August 2009.