While using :first-child :last-child , in css its works fine in IE7, FF.
Is there any possible fix for this.
Use of Javascript is fine. If it works without javascript it would be great.
+5
A:
You can use a semantic class name to ease your suffering in IE6. Something like:
<ul>
<li class="first">First Item</li>
<li>Second Item</li>
<li class="last">Last Item</li>
</ul>
And then in your CSS use:
ul .first { color: #F00; }
ul .last { color: #00F; }
noluckmurphy
2009-06-11 18:20:03
This is definitely a quick-fix solution where your child elements aren't changing much (or at all).
noluckmurphy
2009-06-11 18:21:15
Nice solution without JS. quite smart. +1
Wazdesign
2009-06-11 18:42:34
A:
Thanks all,
Here is the javascript version which I finally used for this Solutions.
<script>
$(document).ready(function(){
$("ul li:last-child").addClass("last");
$("ul li:first-child").addClass("first");
});
</script>
Wazdesign
2009-06-15 18:09:05
A:
A more generic library that fixes a bunch of IE inconsistencies is Dean Edwards' IE7: http://dean.edwards.name/IE7/
Flavius Stef
2009-06-15 18:20:46
A:
There's an exact solution that doesn't require changes to your HTML. Use Microsoft "Dynamic Styles". Here's an example:
<html>
<head>
<style type="text/css">
tr td:first-child {font-weight:bold; background-color:green;}
tr td:last-child {background-color:orange;}
tr td {_font-weight:expression(this.previousSibling==null?'bold':'normal'); _background-color:expression(this.previousSibling==null?'lightgreen':(this.nextSibling==null?'orange':''));}
</style>
</head>
<body>
<table>
<tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>
<tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>
<tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>
</body>
</html>
Also see http://mauzon.com/pseudoclasses-first-child-and-last-child-for-ie6/ .
Richard W
2010-03-10 00:41:52