CSS / 3 columns / header / footer
no javascript, no table, no image
Conditional comments to replace hacks for MSIE and Mozilla.
Compatibility is sometimes difficult to achieve.
Once a DOCTYPE has been chosen, margins and paddings have been set, Mozilla and Opera usually have quite the same rendering of CSS rules.
Thus we have to hide or set some rules for IE users.
Using conditional comments (syntax), supported by MSIE only, is a another way to address the different versions of MSIE.
Moreover, as the W3C validator does not analyse what is between the comments, the page will be valid CSS.
Setting the instructions
The rules for browsers following the W3C specifications will be placed first and will be followed by those intended to the differents versions of MSIE.
<style type="text/css">
<!--
/*<![CDATA[*/
@import "css/hacks.css";
#menu li a{
width:135px;
}
/*]]>*/
-->
</style>
<!--[if lt IE 6]>
<style type="text/css">
@import "css/hacks_ie5.x.css";
#menu li a{
width:155px;
}
</style>
<![endif]-->
<!--[if lt IE 5.5]>
<style type="text/css">
#menu li{
border-bottom:0;
}
</style>
<![endif]-->
Hiding
Any rule between conditional comments will be interpreted by MSIE only.
We can redefine a rule there, but it is not always possible (div:first-letter for example).
Here, conditional comments can allow us to say that you are not using MSIE.
If you want to hide a rule such as :first-letter to MSIE, you can use:
<!--[if !IE]>-->
<style type="text/css">
p:first-letter,div:first-letter{
font-weight:bold;
}
</style>
<!--<![endif]-->
instead of having in your stylesheet
html>body p:first-letter,html>body div:first-letter{
font-weight:bold;
}
If you want to hide a rule such as height:1%; from Mozilla and Opera, you can use:
<!--[if IE]>
<style type="text/css">
#menubas{
height:1%;
}
</style>
<![endif]-->
rather than having in your stylesheet
* html #menubas{
height:1%; /*won't be applied by MSIE 7*/
}
If you want to hide a rule intended to MSIE such as display:inline-block; or top:expression(body.scrollTop + 0 + "px"); and still pass the W3C validation:
<!--[if IE]>
<style type="text/css">
.box{
display:inline-block;
}
#menu_fixed ul{
top:expression(body.scrollTop + 0 + "px");
}
</style>
<![endif]-->
Setting
If you want to set different values to margin to IE/Win 5, 5.5 and 6 (in "Standard Compliance Mode" thanks to the DOCTYPE), you can use:
<!--[if lt IE 5.5]>
<style type="text/css">
#zone_haut dl{
margin:-.5em 0 -.4em 0;/*value for MSIE 5*/
}
</style>
<![endif]-->
<!--[if IE 5.5]>
<style type="text/css">
#zone_haut dl{
margin:-.4em 0 0;/*value for MSIE 5.5*/
}
</style>
<![endif]-->
<!--[if gt IE 5.5]>
<style type="text/css">
#zone_haut dl{
margin:-.2em 0 0; /*value for MSIE 6 and above*/
}
</style>
<![endif]-->
instead of
#zone_top dl{
margin:-.1em 0 0; /*all but MSIE/Win*/
}
/* start IE_Mac hide\*/
* html #zone_top dl{
margin:-.5em 0 -.4em 0;/*value for MSIE 5*/
}
* html #zone_top dl/**/{
margin/**/:-.4em 0 0; /*value for MSIE 5.5*/
margin:/**/-.2em 0 0; /*value for MSIE 6*/
}
/* end IE_Mac hide*/
These comments will fix most of the display problems if you use "Standard Compliance Mode".
Possible values
- ! = not (eg <!--[if !IE 5.0]>)
- lte = less-than or equal
- lt = less-than
- IE = version
- gte = greater-than or equal
- gt = greater-than
- IE (any version)
- lte IE 5 IE 5 gte IE 5 gt IE 5
- lte IE 5.0 IE 5.0 gte IE 5.0 gt IE 5.0
- lt IE 5.5000 lte IE 5.5000 IE 5.5000 gte IE 5.5000 gt IE 5.5000
- lt IE 6 lte IE 6 IE 6 gte IE 6 gt IE 6
- lt IE 7.0 lte IE 7.0 IE 7.0 gte IE 7.0
- lt IE 7 lte IE 7 IE 7 gte IE 7