Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Help with CSS rollover effect for *inline* images!

4:43 pm on Feb 6, 2007 (gmt 0)

5+ Year Member

Ok, my rollover effect are working fine on images whose display is of type "block". But when the display is of type "inline", the image in the background is shifted a pixel or two downwards! Which is frustrating!

Here is the code form the CSS file and the HTML file, respectively:

==CSS File==========================================
#pdf {
background-image: url("./images/pdfOn.gif");}
#ppt {
background-image: url("./images/pptOn.gif");}

.rollDoc { display:inline;}
.rollDoc img { width: 15px; height: 15px; border: 0;}
.rollDoc:hover { visibility: visible;}
.rollDoc:hover img { visibility: hidden; }

==HTML File=========================================
Bla Bla Bla <a href="one.pdf" id=pdf class=rollDoc>
<img src="./images/pdf.gif"></a>&ensp;
<a href="two.ppt" id=ppt class=rollDoc>
<img src="./images/ppt.gif"></a> Bla Bla Bla

Anyone has any idea how to fix this?

12:07 am on Feb 7, 2007 (gmt 0)

10+ Year Member

Just a guess, but try adding: ".rollDoc{line-height:15px;}"

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month