homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

Help with CSS rollover effect for *inline* images!

 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?



 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved