It was a good time that I saw in the middle of the css the keyword !important, not really interest me, to finally realize it's a wonderful way to hack IE6, while respecting the standards w3c.
On large web projects, you probably already have encountered problems with css styles that did not apply as you wish before you realize that you applied this style in the wind as it was refined a little further, the overwhelming style 1.
To remedy this, I put up a lot of legacy styles to limit the risk of overload css. The keyword !important is just to prioritize the application of a style to another. Thus if an attribute is defined with the keyword !important at the end of definition and this attribute is redefined below or in an external stylesheet, it will not be overwritten.
Where it becomes very good with our beloved IE6, eternal daemon in xHTML/CSS implementation, is that this poor browser doesn't support this keyword. What it do ? It ignores at all ! We can therefore, from the time keyword respects standards, take this unknowing to hack IE6 :)
Go ! a little css is more effective than a long speech.
html, body, p, form, fieldset, table, {
margin:0;
padding:0;
}
body{
background-color:#FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
ol, ul{
list-style: none;
}
div#fakeDiv{
display:block;
width:300px;
height:300px;
background-image:url(../Img/test.png) !important; /* non-sucky browser */
background-image:url(../Img/test.gif); /* IE6 */
background-repeat:no-repeat;
}
Thus providing a transparent image on high PNG quality on browsers know the keyword !important and less GIF quality on IE6 and below, all without going through <!--[ IF lt IE 7]> or PNG fix.
This example is extensible to any css recurring problem on IE6, including double margin, negative padding, transparency, etc..
Suppose the following XML feed listing a set of users:
<?xml version="1.0" encoding="UTF-8"?> <users> <user> <id>1</id> <login>lo</login> <email>laurent@sillysmart.org</email> </user> <user> <id>2</id> <login>flo</login> <email>florian@sillysmart.org</email> </user> <user> <id>3</id> <login>charly</login> <email>charly@sillysmart.org</email> </user> </users>
The following css :
table.bo_table_visible {
border:1px solid #000;
border-spacing: 0px;
margin-top:10px;
margin-bottom:10px;
}
table.bo_table_visible tr.summary th {
background:#2E2D2D;
color:#E45A49;
}
table.bo_table_visible tr td {
padding:0 10px;
}
table.bo_table_visible tr.even td, table.bo_table_visible tr th {
background-color:#FFF;
color:#000;
}
table.bo_table_visible tr.even:hover td {
background-color:#FF8ABC;
color:#FFF;
}
table.bo_table_visible tr.odd td {
background-color:#DFDFDF;
color:#000;
}
table.bo_table_visible tr.odd:hover td {
background-color:#64B8FE;
color:#FFF;
}
Simply apply the XSL script below to apply styles to your list of users:
<!--
- Apply css with XSL
-->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl" version="1.0">
<xsl:output method="xml" encoding="UTF-8" indent="yes" />
<xsl:template match="root">
<html>
<head></head>
<body>
<table class="bo_table_visible">
<tr>
<th>Id</th>
<th>Login</th>
<th>Email</th>
</tr>
<xsl:for-each select="//users/user">
<xsl:variable name="cssClass">
<xsl:choose>
<xsl:when test="(position() mod 2) = 0">
even
</xsl:when>
<xsl:otherwise>
odd
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<tr class="{$cssClass}">
<td><xsl:value-of select="id" /></td>
<td><xsl:value-of select="login" /></td>
<td><xsl:value-of select="email" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Will produce :
| Id | Login | |
|---|---|---|
| 1 | lo | laurent@sillysmart.org |
| 2 | flo | florian@sillysmart.org |
| 3 | charly | charly@sillysmart.org |
