Welcome to WebmasterWorld Guest from 184.72.177.182

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)

New User

5+ Year Member

joined:Feb 6, 2007
posts:1
votes: 0


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)

Full Member

10+ Year Member

joined:Dec 25, 2003
posts: 269
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members