anchors and regular links - styling

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

Try using .text > a to hit the second link. It will only hit direct children of the .text class.

Answer 2

there’s a:link for this:

a { /* styles for all anchors */ }
a:link, a:visited { /* styles only for links */ }
a:hover { /* styles that should only apply to hovered links (not anchors) */ }

Answer 3

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;
}

Answer 4

Replace:

<h3><a class="anchor" name="custom_name">Title</a></h3>

With:

<h3 class="fragment" id="custom_name">Title</h3>

It is shorter, and doesn't get mixed up with styles intended for links.

(Alternatively, look at a:link:hover, a:visited:hover {}, but I don't know what IE is like about supporting multiple pseudo-classes on a single part of a selector)

Answer 5

Two things:

adding an anchor element without giving it an id will not make navigation easier. It's also less likely to be valid. I think what you want is to have anchors that point to the ID of the h3. Something like:

<div class="linktotext">
<a href="#title1">Title</a>
</div>
<div class="text">
    <h3 id="title1">Title</h3>
    Lorem ipsum <a href="otherpage.aspx">dolor</a> sit amet.
</div>

Now the anchor in the first part links to the id in the second part.

Second,

To fix your specific issue, you can simply specify the CSS for a elements inside of h3 elements, like this:

.text 
{
    color: #000;
}

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

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