For example they use an asterisk before the html tag like this:
* html .left {margin-right: -3px;}
And they use forward slashes in the middle of a classes property like this:
* html .outer {width: 480px; wid\ h: 478px;}
Also shown above are two of the same properties of “width”.
Can anyone explain why there are these strange characters within the CSS styles? I have not seen these before. Also, any good links to explanations would be greatly appreciated. Thanks in advance.
The asterisk sybolises the universal selector, which can be handy when resetting margin/padding; in terms of it’s influence, it’s the highest selector, so applies it styles to all elements.
I think in the instance you have it in, IE6 can give that rule priority over a duplicate rule without the global selector included
The property that includes the slash is a hack, I think designed for IE6 to parse - correct me if I’m wrong, as I’ve never had to use one before, so don’t know too much about them.
Also, any good links to explanations would be greatly appreciated. Thanks in advance.
The faq at the top of the forum explains these in the box model section.
The “asterisk” (*) is the universal selector and applies styles to all elements.
If you said * {color:red} then all elements that accept the property color will be red.
If you said: div * {color:red} then only elements that are children of a div will be red.
So the universal selector will stand to mean any selector that would be in the position it is placed.
When combined with html (i.e. * html {}) you are effectively saying that the rule will be applied to a parent of html. As html is the root and has no parent then the rule should be ignored. All browsers except IE6 understand this and ignore the rule completely.
IE sees the rule as though it was simply html {etc…}.
This means that * html is useful for use as a hack and targeting only ie6 and under.
The backslash is another filter/hack that IE5.x doesn’t understand and is combined with the star selector hack to produce a way of targeting ie5 and ie6 in the same rule and fix issues like the broken box model.
.outer{
width:478px;
border:1px solid #000;
}
* html .outer {
width: 480px;/* only ie5.x gets this because it doesn't understand the next rule */
wid\ h: 478px;/* only ie6 get this */
}
In the above styles ie5.x is given a larger size to make up for its broken box model where it will add borders and padding to the inside of the stated width.
The backslash is valid code but ie5 trips up on it and jumps to the next rule instead. The backslash cannot appear before the characters a-f 0-9 or it treats then as hex.
However in the rule that you have it there it will cause problems because IE7 will get height:100% and will also get min-height:100% which means all you get is height:100% and the element won’t expand.
