CODEWITHSUNDEEP
cssinternet-explorer-8background-imagepseudo-element
MacGirl1985
MacGirl1985

Reputation: 23

css :before Pseudo-element not displaying background-image with IE8

I'm starting to use the :before pseudo element to display logos before anchor text in a list.

I've followed Nicolas Gallagher's instructions, but the background images are not displaying in IE8. Works in other browsers. Anyone see what I might be doing wrong?

I've posted the example here: http://vervedesignstudios.com/gb/testBefore.html

Here is the markup: Thanks in advance for your advice.

<style>

/* Pseudo-element cropping bit */
.iLst24 li a:before {
    content:""; 
    float:left; 
    width:24px; 
    height:24px; 
    margin:0 6px 0 0; 
    background-image:url("images/HomeSprite.png");
    }

.iLst24 .fb a:before {background-position:0 0;}
.iLst24 .tw a:before {background-position:0 -50px;}
.iLst24 .yt a:before {background-position:0 -100px;}

</style>


<div class="iLst24">
    <ul>
        <li class="fb"><a href="http://www.facebook.com">Facebook</a></li>
        <li class="tw"><a href="http://www.facebook.com">Twitter</a></li>
        <li class="yt"><a href="http://www.facebook.com">YouTube</a></li>
    </ul>
</div>

Upvotes: 2

Views: 7743

Answers (1)

Joshua
Joshua

Reputation: 3603

IE8 has multiple issues with float and specific width/height values on tags. Try adding a "zoom:1" to trigger haslayout and see if that helps.

Upvotes: 4

Related Questions