Question

In a webpage I’m building I use anchors for easy navigating. The styling of these anchors in IE6 gives me some troubles.

<div class="text">
    <h3><a class="anchor" name="custom_name">Title</a></h3>
    Lorem ipsum <a href="otherpage.aspx">dolor</a> sit amet.
</div>

With this CSS:

.text 
{
    color: #000;
}

.text a[href] 
{
    color: #ea2026;  //red
}

.anchor, .anchor:hover
{
    color: #a9a18c;  //gray
    text-decoration: none;
}

In FF and IE7+, no problems. But in IE6, the links are white (as defined in the body selector) because it has issues with the .text a[href]. When I remove the [href] though, the anchors become red in all browsers (naturally). In firefox the hover still gives an effect, but not in IE.

Is there a way to style the anchors differently than the regular links in both FF and IE6? Obviously the class “anchor” doesn’t help much…

Edit – Sorry, this is what I want:
All regular links have to be red (the href’s). All the anchors have to be the h3 colour, gray. When I hover over a regular link it underlines, and a hover over one of the anchors should virtually change nothing.

Answer 1

Drop the “anchor” class… I think what you want is this:

.text 
{
    color: #000;
}

.text a
{
    color: #ea2026; /*red*/
}

.text h3 a, .text h3 a:hover
{
    color: #a9a18c; /*gray*/
    text-decoration: none;
}