css image rollover effects displayed inline

I'm using css to create dynamic rollovers of a gif image
this is my html for that part

<div id="menu2">
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
</div>

and the css

#menu2 {
width:900px;
margin-left:10%;
}

#testi
{
display:block;
width:200px;
height:100px;
background-image:url(testimonials.gif);
background-repeat:no-repeat;

}
#testi:hover
{
background-position: 0 -100px;
}
#testi span
{
display: none;
}

This code makes the rollovers work fine and everything, but I can't get them to sit next to each other horizontally.

I've tried doing
#menu2 a{
display:inline;
}

but that just makes the images disappear.

any advice?

Hello Levie,
Would float: left; and display: block; work better for you?

If that doesn't help, link us to the test site so we can see all your code, CSS and images.

<div id="menu2">
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
</div>A given ID can only appear once in a document. You might want to use class attributes (i.e., class="testi") and selectors (i.e., .testi and .testi:hover).

I've tried doing
#menu2 a{
display:inline;
}

but that just makes the images disappear.

any advice?When you use display: inline, the height and width properties no longer have an effect. You might want to try display: inline-block so that height and width continue to have effect.

You might want to try display: inline-block so that height and width continue to have effect.
This worked perfectly, thanks!!