CSS multiple .a link problems

[DougWD]

This is easy to explain in person, but kind of hard to explain in writing. I have a main link set for the entire site. However, I need an alternate link for other links that would look funny with the main link set (such as background, indents, etc.

The trouble is that the alternative link set is picking up setting from the main link set no matter what I do.

For instance, I have the main link set to a background color on hover set to block, so the background goes all the way to the edge of the <td> that contains the navigation links.

The problem is that the alternative link set wants to do the same thing, no matter what I do to get it not to do that. I changed the <bg> color to none on for the alternative link set, and it no longer shows the <bg> color of the main link set, but here's the kicker--it still wants to "hover" way past the text inself, like the entire width of the cell or table it is in, like the main link set. (I've left the background color of the alternative link set to "white" so you can more easily see my problem.)

You can see what I mean by going here:

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

Check the navigation on the left first. Then hover over the email address, and move the cursor to the right. It still hovers even though you are off of the text. IT'S PISSIN' ME OFF ROGER!

Thanks very much to all who respond. Below is the CSS:

a:link {
color: #FFFFFF;
text-decoration: none;
padding-left: 18px;
display: block;
padding-bottom: 1px;
padding-top: 1px;
padding-right: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
padding-left: 18px;
display: block;
padding-bottom: 1px;
padding-top: 1px;
padding-right: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:hover {
color: #000000;
text-decoration: none;
display: block;
padding: 0px 0px 0px 17px;
background-color: #FFCF63;
border: 1px solid #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
}
.alt a:link {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px;
border: none;
}
.alt a:visited {
color: #000000;
text-decoration: none;
margin: 0px;
padding: 0px;
border: none;
}
.alt a:hover {
color: #000000;
text-decoration: underline overline;
margin: 0px;
padding: 0px;
border: none;
background-image: none;
background-color: #FFFFFF;
display: block;
}

[edited by: tedster at 3:43 pm (utc) on May 31, 2005]

[Richard_N]

First if you set the generic A width to 100% and float to left rather than display block that should solve it I would think.

You can the define the alt A to flaot left with a width of whatever.

Off top of my head, not tried it :-)

[createErrorMsg]

The trouble is that the alternative link set is picking up setting from the main link set no matter what I do.

You have two options here. One is to limit the context of each set of link styles so that they cannot effect links in other contexts. The other is to make sure that you completely override the main link styles in the secondary one.

1. Unique contexts.

Say you have three different sorts of styles you want to have on your links. One set you want used to style your navigation bar, the other to style links in the body text, a third to style the links in your footer. You can limit the scope of those styles by forcing them to effect only links within a specific context.

Let's assume the skeletal markup for the page looks something like this...

<div id="header"></div>
<div id="container">
<div id="navbar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>

To apply styles to the links in the navbar ONLY, you would preceed your link styles with the navbar id selector like so...

#navbar a:link, #navbar a:visited{
/*styles*/
}
#navbar a:link:hover, #navbar a:visited:hover{
/*styles*/
}

Using the same logic, you can create different styles for all three contexts...

#navbar a:link, #navbar a:visited{
/*styles*/
}
#navbar a:link:hover, #navbar a:visited:hover{
/*styles*/
}
#content a:link, #content a:visited{
/*styles*/
}
#content a:link:hover, #content a:visited:hover{
/*styles*/
}
#footer a:link, #footer a:visited{
/*styles*/
}
#footer a:link:hover, #footer a:visited:hover{
/*styles*/
}

2) Overriding the main link styles

Another option is to set link styles for the whole document...

a:link, a:visited{
/*styles*/
}
a:link:hover, a:visited:hover{
/*styles*/
}

...and then override them within a specific context. This is what you've been trying to do. The reason you've been running into trouble is that you have not been overriding ALL of the properties in the original styles. Remember that by setting the generic link styles, you cause those properties to cascade throughout the document to all elements that match the selector. If you don't want a property to cascade to a certain element, you have to specifically override it in that element's styles.

So if set your anchors to display:block, but you don't want the anchors in the #content div to be block level, you have to explicitly set them back to their default...

#content a:link, #content a:visited{
display:inline;
}

The key is to remember that ANYTHING from the old styles that you don't want applied has to be explicitly countered in the new styles. Otherwise the stuff from the old styles will remain.

cEM

[DougWD]

OK I see what you are saying, and that is how I was thinking about fixing it today. I could just take the nav links and name them .nav etc and tehn apply them to teh navigation <td>, then use the alternate links applied to the class on each table I want or <td> etc. The last option is what I will try, since it is the easiest: Display inline! That's easy. I'm gonna try it right now and see if it works.

Back again, and yep that did it. I really want to thank you for that explanation. You seemed dto know exactly waht I wanted to do without even seeing it. Thanks a lot bro!