Image Rollover/Hover

[jasonmanheim]

You know how some sites have a horizontal row of faded images in the footer that when you rollover them turn to color and when you click on them they link to another site? Thats what Im trying to do however I cant seem to get the images to align horizontally because I have to display:block to get them to show up at all.

What am I doing wrong?

Here's the HTML:

<a href="http://www.pettech.net/" class="pettech" title="PetTech Certified - First Aid and Care for Your Pets"><span>PetTech Certified</span></a>
<a href="http://www.petsit.com/" class="psi" title="Members of Pet Sitters International"><span>Pet Sitter International Members</span></a>

Here's the CSS:

a.psi {
background:url(images/psi_logo.png) repeat 0 -50px;
width: 47px;
height: 50px;
display: block;
}

a.psi:hover {
background: url(images/psi_logo.png) repeat 0 0;
}

a.pettech {
background:url(images/pet_tech_logo.png) repeat 0 -50px;
width: 50px;
height: 50px;
display: block;
}

a.pettech:hover {
background: url(images/pet_tech_logo.png) repeat 0 0;
}

a.psi span, a.pettech span {
display: none;
}

[Andyram2k]

Hi Jason,
If you float the 2 a tags, they'll align next to each other, and you won't need to include the display:block at all:

a.psi {
background:url(images/psi_logo.png) repeat 0 -50px;
width: 47px;
height: 50px;
float: left;
}

a.psi:hover {
background: url(images/psi_logo.png) repeat 0 0;
}

a.pettech {
background:url(images/pet_tech_logo.png) repeat 0 -50px;
width: 50px;
height: 50px;
float: left;
}

a.pettech:hover {
background: url(images/pet_tech_logo.png) repeat 0 0;
}

a.psi span, a.pettech span {
display: none;
}

Hope this helps :)

- Andy