CSS Link behavious and name tags

[bigbird3156]

Hi,

I have created a standard html page using CSS...

In the page I have put some href links that reference points further down in the page using name tags <a name="tag1">

I have then created some CSS behaviours for the links to hide the underline, change link colors etc...

The problem I am having is that both the actual href links and the text below the name tags both change colors etc when they are rolled over. obviously I only want the links to do this ... any suggestions on how to fix this???

Here is some of the code to hopefully explain things better:

CSS:
#wrapper #main a {
color: #FFF;
text-decoration: none;
}
#wrapper #main a:hover {
color: #666;
text-decoration: underline;
}
#wrapper #main a:visited {
color: #FFF;
text-decoration: none;
}

HTML:
<ul>
<li><strong>
Option 1</strong>: <a href="#delivery">Delivery Catering</a> – Bulk orders delivered to your door.</li>
<li><strong>Option 2</strong>: <a href="#classic">Classic Catering</a> – We cook on site, serve the food and do the dishes.</li>
<li><strong>Option 3</strong>: <a href="#corporate">$10 Corporate Meal Deal</a> – Great prices for large groups.</li>
</ul>

............

<a name="delivery">
<h3>
Delivery Catering: <br /></h3>
Ideal for those who just want the food delivered to your door.<p>

...................

<a name="classic">
Classic Catering:</h3>
<p>
We come to you, and cater a delicious Burmese feast for just about any function you can imagine:<p>

.......................

<a name="corporate">
<h3>
$10 Corporate Meal Deal:</h3>
<p>
The $10 Corporate Meal Deal is designed for those times when you have a large group of people attending a seminar, conference or workplace meeting and you want to feed them a simple, but delicious meal.<p>

........................

I hope that helps.

The Bird from Down Under- Bigbird 3156

 

[vacunita]

There's several ways to attack this. The main thing to understand, is that both anchors and links are <a> elements so your CSS targets them both.

The easiest way to fix this, is to be more specific about your links.

Since they are inside a <ul> element you could do something like the following assuming your anchors below aren't inside a <ul> element.

[COLOR=#993399]#wrapper[/color] [COLOR=#993399]#main[/color] [b][red]ul[/red][/b] a [COLOR=#FF0000]{[/color]
[COLOR=#0000FF]color:[/color] [COLOR=#FF0000]#FFF[/color];
[COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]none[/color][/i];
[COLOR=#FF0000]}[/color]
[COLOR=#993399]#wrapper[/color] [COLOR=#993399]#main[/color] [b][red]ul[/red][/b] a[COLOR=#990000]:[/color]hover [COLOR=#FF0000]{[/color]
[COLOR=#0000FF]color:[/color] [COLOR=#FF0000]#666[/color];
[COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]underline[/color][/i];
[COLOR=#FF0000]}[/color]
[COLOR=#993399]#wrapper[/color] [COLOR=#993399]#main[/color] [b][red]ul[/red][/b] a[COLOR=#990000]:[/color]visited [COLOR=#FF0000]{[/color]
[COLOR=#0000FF]color:[/color] [COLOR=#FF0000]#FFF[/color];
[COLOR=#0000FF]text-decoration:[/color] [i][COLOR=#009900]none[/color][/i];
[COLOR=#FF0000]}[/color]

This would only apply your CSS to links inside un-ordered lists.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ChrisHirst]

Or you could use attribute selectors

a[name] {
/* these rules apply to anchor elements with a name attribute*/
}

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[ChrisHunt]

Or you can code your named anchors like this, giving the CSS nothing to style:

<h3><a name="corporate"></a>
$10 Corporate Meal Deal:</h3>

Though frankly, the whole [tt]<a name="">[/tt] thing is pretty old-fashioned. You'll get the same effect with this code in any but the most ancient (i.e. 20th Century) browsers:

<h3 id="corporate">
$10 Corporate Meal Deal:</h3>

Unless you're expecting a significant number of Netscape users to visit your site, this is what I'd go for.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd