Skip on down to the menu.
CSS Browser Hacks.
Here are some ways to trick certain browsers (i.e. IE) into behaving, without messing up the browsers that know how to get it right per the standards.
* html Hack
I can't remember where I found this, but it really helps me out a lot in my intranet designs.
It turns out that you can use the selector * html and, since there really is no element above the <html> element, it is happily ignored by every browser ...except Internet Explorer. How convienient!
Now, if I want a property to apply only to IE I can do something like
div {
width: 100px; /* Correct property - all browsers except IE */
}
* html div {
width: 140px; /* Property for IE only */
}
Pretty cool isn't it?
I really don't know what happens with IE for the Mac, but since the introduction of Safari and Firefox it has pretty much fallen from favor with the Mac crowd anyway. If it turns out to be a probem I could put in another hack for IE-Mac.
Simplified Box Model Hack
A way to feed Internet Explorer a bogus value that compensate for bugs, while standards compliant browsers get the correct value. This hack exploits the fact that Internet Explorer does not read escaped characters correctly.
First you feed IE the bogus value. Standards compliant browsers will also see this value, but that's ok.
Next you give the standards compliant browsers the correct value in a way that IE can't read.
Like magic, you have isolated the buggy browser so that you can compensate for it's idiosyncrasies.
The following example and the following example and explanation are taken from the css-discuss Wiki
div {
width: 100px; /* Correct unescaped property - correct width */
}
div {
\width: 140px; /* IE can read this - compensate for IE bug */
w\idth: 100px; /* IE can't see this - correct width value*/
}
The top rule (line 1) is used by browsers like Op5 that get the box model correct, but choke on the escapes in the following rule. Op5 ignores those rules entirely.
The first 'escaped' property (line 5) will be used by IE5.x, and feeds that browser its 'fudged' value. The second escaped property (line 6) cannot be read by IE5.x, but is read and used by modern 'escape friendly' browsers like N6, Moz, Op6, and IE6.
Proper use of the escapes: The escape '\' that starts line 5 must always be directly against the first letter of the property name. IE5.x/win does not like escapes, but seems to ignore them when they are in this position.
Important! An escape must not preceed any of the first six alphabetical characters: a, b, c, d, e, f, per the [CSS spec on forward-compatible parsing]. If this is done it will be seen as a 'hex code' and Bad Things Will Happen. This means that a property that begins with one of these letters cannot be hacked in this manner. For example, "height" can be hacked, but "font-family" can't be, since it starts with a character that is interpreted as the beginning of a hex code. Fortunately, neither "width" nor "height", the most important properties for this hack, are affected.
IE5/Mac - Commented Backslash Hack
This hack will hide a rule from IE5/Mac. Other browsers will be able to read the "hidden" rule just fine.
The trick is to set the IE5/Mac rule first, then hide the correct rule to all other browsers inside this hack.
Credit belongs here I think.
/* Put your IE5-Mac rule(s) below this line */
#header a {
float: left;
}
/* Commented Backslash Hack
hides rule(s) from IE5-Mac \*/
#header a {
float: none;
}
/* End IE5-Mac hack */
If you're reading this, and you're not using a PDA or a phone to browse, it's probably because your browser doesn't support currently used web standards. Try one of the newer up-to-date web browsers listed at the previous link and check out what you've been missing.
