Over ride style on unordered list in IE6?

programming web dev
1

**
The HTML:**

<div class="nav">
  <h4>Images</h4><br />
  <ul>
    <li><a href="javascript:;">Previous</a> | </li>
    <li><a href="javascript:;" class="inactive">Next</a></li>
  </ul>
</div>

**
The CSS:**

.nav ul { list-style:none; padding:0px; margin:0px; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#999999; }
.nav ul li { display:inline; }

.nav li a:link { font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#7b7b7b; }
.nav li a:visited { font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#7b7b7b; }
.nav li a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:underline; font-size:11px; color:#f15a22; }
.nav li a.inactive { font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-size:11px; color:#cccccc; cursor:text; }

**
The Problem:**

The unordered list is styled by the class “nav” which is applied to the containing div.

The list items are being used to cycle through images.

When there are no more images in the sequence the class “inactive” will be applied to the link to over ride the main a: styles.

This is working correctly in every browser I have tried except IE6, it is ignoring the style class=“inactive” on the anchor tag.

Does anyone know how I can get this to work in IE6?

Hope this makes sense and that someone can provide a solution.

Any help is much appreciated!

Thanks