homepage Welcome to WebmasterWorld Guest from 54.234.59.94
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Help with CSS rollover effect for *inline* images!
ana_nan




msg:3244289
 4:43 pm on Feb 6, 2007 (gmt 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?

 

mep00




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved