CSS: Can't get different coloured links to work right

[Julianne]

I'm trying to be XHTML-compliant by using CSS to format text and insert background images in my page, which is all within tables.

I have a coloured bar at the bottom which a) has a background graphic and b) has text links which are a different size and colour to those in the main body of the page.

The problem I'm having is that even though I've defined both "regular" links and a class for the ones in the coloured bar the ones in the bar are not behaving. I can get the background graphic to appear and the links to be the right size/colour, but they've each got a white background!

Here's my style sheet (it's the .bottomnav links that aren't looking right):

body {
margin: 0px 0px 0px 0px;
padding: 0px;
overflow: auto;
}
.leftbackground {
background-image: url(images/left_nav_bar.gif);
}
.rightbackground {
background-image: url(images/blue_bar_right.gif);
}
p {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;

}

a:link {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #FF6633;
text-decoration: none;
}

a:visited {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #FF6633;
text-decoration: none;
}

a:hover {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
color: #3366FF;
text-decoration: underline;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FF6633;
}
.bottomnav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFCC33;
background: url(images/bottom_blue_bar.gif) repeat;

(not sure if I need the repeat or not - I didn't put it in for .leftbackground etc but that renders OK)
}

a.bottomnav:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFCC33;
text-decoration: none;
background: url(images/bottom_blue_bar.gif) repeat;

}
a.bottomnav:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFCC33;
text-decoration: none;
background: url(images/bottom_blue_bar.gif) repeat;
}
a.bottomnav:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF6633;
text-decoration: underline;
background: url(images/bottom_blue_bar.gif) repeat;
}
ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

This is what the code looks like for the bottomnav links:

<td valign=&quot;bottom&quot; class=&quot;bottomnav&quot;><div align=&quot;center&quot;><a href=&quot;../index.asp&quot; class=&quot;bottomnav&quot;>Home</a>

Either the background graphic wouldn't show or the links would become the &quot;normal&quot; link colour/size if I took either of the class=&quot;bottomnav&quot; bits out.

Funnily enough, I just checked my page in Opera and everything works fine, but it doesn't in IE6!

Any ideas, anyone?!

http://www.leevalleylions.co.uk

 

[deecee]

remove the background from the link and use a color instead, im guessing that is where it is going wrong, ive never seen a link with a background image speciefied
sleep is good

 

[Julianne]

Specifying a background image is valid CSS, I did this in Topstyle! I can't not have a background image as it would break the design of the page, but it's not really the background image that is causing the problem, it's the .bottomnav links.

http://www.leevalleylions.co.uk

 

[ChrisHunt]

I've sometimes found (on IE anyway) that styles for objects within tables only work if you specify that that's where they're going to be used. So

td a.bottomnav:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFCC33;
text-decoration: none;
background: url(images/bottom_blue_bar.gif) repeat;
}

might work properly.
-- Chris Hunt
Extra Connections Ltd

http://www.extracon.com

 

[Julianne]

It turns out the problem was in the order of the class. What I should have had is:

.bottomnav a:link

rather than

a.bottomnav:link

I remembered that I have another site where I had the same problem so was able to look to see what I'd done there that worked!

http://www.leevalleylions.co.uk