Implement :first-child for IE6
Posted by beThinker | Posted in CSS Hack | Posted on 10-10-2009
Lots of CSS hack for :first-child but I used this one because it work. I’m using list tag for my menu and it look like this in the HTML.
1 2 3 4 5 6 | <ul> <li id="imageBorder">Menu1</li> <li id="imageBorder">Menu2</li> <li id="imageBorder">Menu3</li> <li id="imageBorder">Menu4</li> </ul> |
Regular CSS for FF, IE7, Opera, Safari:
Image border:
1 2 3 4 5 6 7 8 9 | #menu ul li#imageBorder{ background-image:url(../images/border.jpg); background-repeat:no-repeat(); width:1px; height:10px; } #menu ul li#imageBorder:first-child{ background-image:none; } |
Regular border:
1 2 3 4 5 6 | #menu ul li{ border:1px solid #000; } #menu ul li:first-child{ border:none; } |
The above code :first-child won’t work in IE6, so for IE6 CSS hack the code are:
CSS for IE 6 (using conditional comments)
1 2 3 4 5 6 7 8 | <!--[if IE6]> #menu ul li#imageBorder{background-image: expression(this.previousSibling==null?'none':(this.parentNode.id=='id')?'image path':'-'); } #menu ul li{border: expression(this.previousSibling==null?'0':(this.parentNode.id=='id')?'1':'-'); } <![endif]--> |
There are various CSS hack in web, look for the best that work in your website.
Sponsored Links
