CSS hacks more – !important & /**/ and *html, *+html

Why would there be more hacks after those two posts before?

Because the more you know the better.

Mostly because after IE7, more problem IE causes…

Straight to example.

#wrapper
{
width: 100px!important; /* for IE7+FF */
width: 80px; /*for IE6 */
}

This one is most important, different style for FF, IE6 and IE7!!

2, IE6/IE77FireFox
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed
*/
}
</style>

REMARKS!!

1. these hack maybe out of date after sometime.

2. mind the ordering of those style!

3. make sure the .html have the following header if you are using *+html hack.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” http://www.w3.org/TR/html4/loose.dtd”&gt;

CSS hacks more – html>body & /**/

html>body

html>body is child selector command which IE can’t understand

So, html>body refers to the child, body, contained within the parent, html.

CSS:

for All browsers

#header {margin-bottom: 3em;}

for non-IE
html>body #header {margin-bottom: 1em;}

because the later CSS will take precedence to the previous one.

This together result in CSS in the first line is for IE, second line is for others.

/**/

IE5’s misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren’t included in this value. IE5 however, incoporates these values into the width value causing element widths and heights to become smaller in this browser.

#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}

The 15em value will then be overridden by the second width value of 10em by all browsers except IE5,

which for some reason can’t understand CSS commands with empty comment tags either side of the colons.