Welcome to WebmasterWorld Guest from 54.159.250.110

Forum Moderators: not2easy

Message Too Old, No Replies

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;}"