| 2 Comments

I need to know how to work around a particularly lame Internet Explorer bug in their CSS1 parser model.

http://sedonner.tripod.com/adec

On that page, hovering over the links is hard to read (whether the links are :visited (vlink) or regular link status doesn't matter).

A {
font-family: arial, helvetica, geneva, swiss, sunsans-regular;
font-size: 12pt;
font-weight: none;
text-decoration: none;
}

A:hover {
text-decoration: underline;
color: #003366;
}

A:visited {
color: #336699
}

I've got a div classed as div class='header'

In my CSS, I've got a class selector defined as:

.header a {
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #003366;
color: white;
}

.header {
padding-top: 5px;
padding-bottom: 5px;
background-color: #003366;
color: white;
}

The problem is that IE6 is ignoring the fact that my 'header' class defines the |a| element's color as white, and therefore on mouseover styles the link text as either:

* if it's :visited, it styles it #336699
* if it's _not_ :visited, it styles it as #003366

Anybody know how to work around this? Thanks!

2 Comments

your CSS could use a little tidying in general - mixing up the style of A elements and :link/:visited just leads to confusion. Why not use :link and :visited instead of the A? And "font-weight: none" isn't valid - you probably mean "font-weight: normal", but that's the default so you don't need to specify.

anyway, easiest change to make it work how you want is to explicitly style the hovered header link:
instead of just:
.header a {
use:
.header a, .header a:hover {

and it works fine.

Thanks Michael. I've fixed it now:

http://sedonner.tripod.com/adec/text.css

About this Entry

This page contains a single entry by Stephen Donner published on August 13, 2003 12:18 AM.

was the previous entry in this blog.

is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Pages

Powered by Movable Type 5.12