CSS rollovers help

[Cybertronic]

Hey

I'm having some trouble with my CSS rollovers, here's my code in XHTML:

<a href="index.html"><img src="menu_home.jpg" width="150" height="30" border="0" alt="Home"></img></a>

To convert this into using rollovers, I assumed it would be like this:

<a class="menus" href="index.html"></a>

Along with the following code is a seperate CSS file:

a.menus { background: url(menu_home_rollover.jpg); }
a.menus:link { background: url(menu_home.jpg); }
a.menus:hover,
a.menus:focus { background: url(menu_home_rollover.jpg); }

Why doesn't this work? , my image doesn't show up either . Do I have to use .gif format?

Please help a newbie in CSS please!

 

[Al Vallario]

Cut all style information out of your XHTML document, for a start. Is this particular image part of a larger navigation? If there is more than one link, use an unordered list instead.

XHTML:

<ul id="navigation">
  <li><a href="index.html" title="Home" id="nav-home">Home</a></li>
</ul>

CSS:

ul#navigation {
  list-style: none;
}

ul#navigation a {
  display: inline-block;
  height: 30px;
  text-indent: -5000px;
  text-decoration: none;
}

a#nav-home {
  background: url("menu_home.jpg") top left no-repeat;
  width: 150px;
}

a#nav-home:hover {
  background: url("menu_home_rollover.jpg") top left no-repeat;
}

That should work. Style ul#navigation as you deem fit (You haven't mentioned the context in which the navigation is displayed; horizontal or vertical).

Note: I'm a bit tired, so I apologise if my code is a bit off

 

[Cybertronic]

Thanks!

It's almost there, it looks like this at the moment:

The size of the image is 150 X 30, but it appears like that?

I'm using a table column for the menus

 

[Cybertronic]

I managed to fix it by adding float:left;

Ignoring my n00b effort

On the left is what the menu looks like, on the right is what it looks like when I hover my mouse pointer onto a URL that has CSS code for highlighting the link. It happens when I hover over it twice

Is there a fix for this?

Here's the code I'm using for highlighting the URL and an email address:

a.links:visited  {color: purple;
                 text-decoration: underline;}
a.links:link     {color: #0000FF;
                 text-decoration: underline;}
a.links:active   {color: #FFFFFF;
                 text-decoration: underline;}
a.links:hover    {color: #FFFFFF;
                 background-color: lightslategray;
                 text-decoration: underline;}

Please help