Yeah but what does each of the following lines actually do?
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
Hi,
height: 100%;:
This line sets the height for all browsers with CSS support.
voice-family: "\"}\""; voice-family:inherit;
Due to a CSS parsing bug in IE 5.x Windows and IE 6.0 Windows in quirks mode (QM) doesn't understand these lines and stops processing this rule here. Anything that following these lines will not be applied by the affected browsers. These lines do not serve any other purpose other than causing IE/Win to choke and to stop processing the rule.
height: auto;
Because IE win stops processing at the 'voice-family' lines, it does not apply this line, but UAs which support CSS 2 (and the box model) will read this line normally.
Most often, this hack is used to work around IE 5.x's broken box model where the first width property provides a value for IE and the second width value is for browsers that correctly implement the box model.
If I have to use a box model hack (BMH), rather than a conditional comment, I prefer the following [01]:
foo { /* Selector recognized by all browsers with CSS support. */
height: auto
}* html foo { /* Selector recognized by IE only */
height: 100%; /* Value for IE5.x/Win and IE6.x/Win QM */
hei\ght: auto; /* Value for IE6/Win */
}If I don't care about support for Netscape 4, which chokes on escapes (\) and ignores any style sheet that contains them, or Opera 5, which completely ignores the rule, I use the following [02]:
foo {
height: auto;
\height: 100%;
hei\ght: auto;
}Also, I am not clear on which browsers will end up using 100% height and which will not break but not use 100%.
Visit Dithered [03] for a list of hacks and an overview of which browsers are affected.
That MSDN article is quite interesting. Basically you can use those Conditional Comments to add specific code anywhere in your page for IE5, IE6, IE7 when it comes, and other browsers such as Firefox, Opera etc will just ignore it all because the code appears commented out to them.
Correct, but one point that some folks miss is that types of conditional comments can only be used inside of your markup; you cannot use a CC inside linked style sheets. These are very useful for calling external style sheets and although I use IE hacks in my CSS while in development, I tend to move those hacks to individual style sheets and link to them via CCs when I go into production--it's easier to maintain and it's cleaner.
This in turn makes it easier to develop code specifically to fix IE problems. Why has that been such a well kept secret?
Conditional comments are a pretty well know and documented technique, so I wouldn't exactly say it's a "well kept secret". The CSS-Discuss Wiki [04] is also a good place to find additional information on this and other techniques you may not be familiar with.
[01] <http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html> [02] <http://www.doxdesk.com/personal/posts/css/20020212-bmh.html> [03] <http://www.dithered.com/css_filters/index.html> [04] <http://css-discuss.incutio.com/?page=FrontPage> -- Best regards, Michael Wilson
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
