Question

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 :

And here’s for FF :

I have no idea what’s going on.

Answer 1

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.