CODEWITHSUNDEEP
htmlcssimagefirefoxcross-browser
Rafael Adel
Rafael Adel

Reputation: 7759

Image links does not appear on Firefox

I have several images that are nested inside anchor tags. They appear perfectly on Chrome and IE. Even IE 7 ! But on Firefox 18 the images don't appear at all. Here's my code :

<div id="follow-wrapper">
    <p>Follow Us</p>
    <ul>
        <li><a href="#"><img id="facebook-img"/></a></li>
        <li><a href="#"><img id="twitter-img"/></a></li>
        <li><a href="#"><img id="googleplus-img"/></a></li>
        <li><a href="#"><img id="linkedin-img"/></a></li>
        <li><a href="#"><img id="youtube-img"/></a></li>
        <li><a href="#"><img id="rss-img"/></a></li>
    </ul>
</div>


#follow-wrapper {
    position: absolute;
    right: 0px;
    top: 15px;
    width:230px;
}

#follow-wrapper p {
    float:left;
    font-family:'Arial', Gadget, sans-serif;
    font-size: 15px;
    color : #20417f;
}

#follow-wrapper ul {
    float:left;
    list-style: none;    
}

#follow-wrapper ul li {
    display: inline;    
    margin-left:8px;  
}


#follow-wrapper ul li a img {
    border: none;
}

#follow-wrapper ul li img {
    background-image: url('../img/follow.png');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;   
    border-radius: 2px;
}

#facebook-img{
    background-position: 0px 0px;
}

#twitter-img {
    background-position: 0px -26px;
}

#googleplus-img{
    background-position: 0px -52px;
}

#linkedin-img{
    background-position: 0px -78px;
}

#youtube-img{
    background-position: 0px -104px;
}

#rss-img{
    background-position: 0px -130px;
}

Here's the result on Chrome : enter image description here

And here's for FF : enter image description here

I have no idea what's going on.

Upvotes: 0

Views: 586

Answers (2)

Dawson
Dawson

Reputation: 7597

http://www.w3.org/MarkUp/html3/img.html

"SRC is mandatory."
edit: to clarify - src is a mandatory attribute of the img element.

Guess FF is the only browser playing by the rules. But the point is, your code is not valid.

You aren't saving any code using this: <a href=""><img id...></a> vs <a href="" id=""></a>. If anything, you're writing more.

Upvotes: 4

Billy Moat
Billy Moat

Reputation: 21050

Two choices:

  1. Cut up your sprite and use the img tag as it was meant to be used with an src of an individual image.

  2. Use your sprite but apply it to the anchor tags instead of img tags.

Upvotes: 1

Related Questions