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
source to share
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; }
source to share
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.
source to share
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">⎙</span>
source to share
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;
}
source to share