advanced code snippet search

Posted By

derekholmes on 03/26/10


Tagged

ie7


Versions (?)

IE7 Background images on a blank link

 / Published in: HTML
 

IE7 will not show background images on a item that has no text. This is probably true with ie6 as well.

The best trick I've found is to display:inline-block, but you must do this for ie7 only

Expand | Embed | Plain Text 
  1. <!--[if IE 7]><link rel="stylesheet" type="text/css" href="/css/IE7.css" /><![endif]-->  
  2.  
  3. .ie7blanklink
  4. {
  5.     display:inline-block;
  6. }
  7.  
  8. <a title="Click Me" class="ie7blanklink" style="background: url('/images/email_trim.gif') no-repeat right center; padding-left: 20px; margin-left: 5px;" onclick="updatePermission(this);return false;" href="#" id="email_0"></a>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: shapeshifta on March 27, 2010

Hey there!

Why would you want to make a blank link? Just enter some descriptive text, set the link to display:block, give it the needed width and height and set text-indent to -20000px. You won't see the text anymore and your element will have the right width and height for the link in all browsers. No problems with the box-model in ie6.

Or are you trying to do something different than this?

Regards shape

Posted By: derekholmes on April 2, 2010

I'll have to try this.. thanks!

Posted By: derekholmes on May 17, 2010

this only works if the display is set to block fyi

You need to login to post a comment.