Welcome to WebmasterWorld Guest from 54.146.180.94

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