IE6: span (inline) with background image

I am trying to find a good reason to show my badges.

I want to use CSS and not an img tab.

My code:

<span id="Span1" class="iconPrinter"></span>

      

.iconPrinter {background: url (../images/BWIcons.gif) no-repeat 0 0; padding: 0 8px;}

or

.iconPrinter {background: url (../images/BWIcons.gif) no-repeat 0 0; width: 16px;}

It works fine on FF, but on IE6, I don't see the icon, only if I insert the span into the span.

When I use div or display: block; it works fine, but I need it to be inline.

thank

+2


source to share


8 answers


The easiest way to find an inline tag like span that will work with IE6:

(for 16px icon)



<span id="Span1" class="iconPrinter">&nbsp;</span>

.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}

      

+3


source


IE6 probably won't show an inline padded element if it has no content. Try adding & nbsp; in between;

<span id="Span1" class="iconPrinter">& nbsp;</span>

      

(Note that in & nbsp; extra space is allocated as )



On the other hand, to give the span width, you can also try using

.iconPrinter { display: inline-block; }

      

+2


source


To work around FF2's inline-block issues, I found a suggestion online that worked for my setup. Now for my setup, I have a text that also has padding-left and background-image set to the left of the text. I needed the whole range to fire the event on click, which just wasn't there when I used the display box in IE6 or IE7.

I came here and it was suggested to use inline-block which fixed my problems but left me with FF2 compatibility issues. I found this solution.

display: -moz-inline-box; display: inline-block;

Having both displays has no negative impact on any of the browsers I've tested on IE6,7,8, FF2, 3.

+1


source


What's your purpose with icons? You just want to show icons, why not use "img" -tagg. If you can click them, wrap them in "a" -tagg.

ie6 has a vertical padding bug on inline elements. You can also use divs and float them.

0


source


What's within the range? Anything?

Try adding:

#iconPrinter{
    background:url(../images/BWIcons.gif) no-repeat 0 0; 
    padding: 8px;
    text-indent: -100000px;
    overflow: hidden;
}

      

And if there is a space for that icon, add some kind of special html character. This can make IE recognize that something is there, and it is more accessible to those with no CSS or with screen readers, something like:

<span id="iconPrinter">&#9113;</span>

      

0


source


Try giving css height to the span class. Something like

.iconPrinter{
    background:url(../images/BWIcons.gif) 
    no-repeat 0 0; 
    width:16px;
    height: 16px;
}

      

0


source


I realize this is an older post, but I came across this question while searching and thought it might help others. I used CSS background images for links and also had problems with IE6 and IE7.

Here's the HTML:

<a href="edit_admin.php" class="icon-edit" title="Edit Admin">Edit Admin</a>
<a href="delete_admin.php" class="icon-delete" title="Delete Admin">Delete Admin</a>

      

Here's my css for non-IE6 and IE7 browsers.

.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box;   /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}

      

Here's the extra css I'm conditionally adding for IE6 and IE7 only:

.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}

      

0


source


Use padding and add zoom: 1

to your css class

<span id="Span1" class="iconPrinter"></span>

.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }

      

0


source







All Articles