Some CSS sprites not showing on Firefox, Chrome and IE? - css

Question

I am using css-sprites on a few pages of a website as navigation buttons, with a part of the image darkening when hovered over. All these buttons have text on them. Before I had just written the text onto the image and things worked fine, but I wanted to add the text to my html so that it renders better for anyone that zooms in to the page. Doing this however has now caused the images for the sprites not to appear in Firefox, Chrome and IE (still works fine in Safari).
Obviously I assumed that adding the text to the code had caused this but now even when I remove the text, the images still don't show up. I'm really having trouble figuring out why this is, especially as I have 2 other pages that use sprites and they are still working fine. The only difference is that i hadn't attempted to move the text into my code on those pages.
Any suggestions are really appreciated
Code for the broken sprites:
.row5
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1215px;
}
.box1
{
background: url(http://www.sungblue.com/Images/box1sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}
.boxtext
{
font-family: elron;
color: rgba(255,255,255,1.00);
font-size: 18px;
width: 306px;
height: 18px;
position: absolute;
top: 175px;
left: 0px;
text-align: center;
}
.box1:hover
{
background-position: 0 -201px;
}
.box2
{
background: url(http://www.sungblue.com/Images/box2sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}
.box2:hover
{
background-position: 0 -201px;
}
.box3
{
background: url(http://www.sungblue.com/Images/box3sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}
.box3:hover
{
background-position: 0 -201px;
}
.row6
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1425px;
}
.box4
{
background: url(http://www.sungblue.com/Images/box4sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}
.box4:hover
{
background-position: 0 -201px;
}
.box5
{
background: url(http://www.sungblue.com/Images/box5sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}
.box5:hover
{
background-position: 0 -201px;
}
.box6
{
background: url(http://www.sungblue.com/Images/box6sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}
.box6:hover
{
background-position: 0 -201px;
}
<div class='row5'>
<a href='http://www.sungblue.com/weddings.html'>
<div class='box1'>
<div class='boxtext'>WEDDINGS</div>
</div>
</a>
<a href='http://www.sungblue.com/prewedding.html'>
<div class='box2'>
<div class='boxtext'>ENGAGEMENT SHOOTS</div>
</div>
</a>
<a href='http://www.sungblue.com/contact.html'>
<div class='box3'>
<div class='boxtext'>CONTACT</div>
</div>
</a>
</div>
<div class='row6'>
<a href='http://sungbluephotography.zenfolio.com'>
<div class='box4'>
<div class='boxtext'>CLIENT AREA</div>
</div>
</a>
<a href='http://www.sungblue.com/prices.html'>
<div class='box5'>
<div class='boxtext'>PRICING</div>
</div>
</a>
<a href='http://sungbluephotography.zenfolio.com/blog/'>
<div class='box6'>
<div class='boxtext'>BLOG</div>
</div>
</a>
</div>
And here's the code from my other page where my sprites are working:
.row3
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 335px;
text-align: center;
}
.box1
{
background-image: url(http://www.sungblue.com/Images/weddingbox1sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}
.boxtext
{
width: 465px;
height: 18px;
position: absolute;
left: 0px;
top: 260px;
font-family: elron;
font-size: 18px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.box1:hover
{
background-position: 0 -289px;
}
.box2
{
background-image: url(http://www.sungblue.com/Images/weddingbox2sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}
.box2:hover
{
background-position: 0 -289px;
}
.row4
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 633px;
text-align: center;
}
.box3
{
background-image: url(http://www.sungblue.com/Images/weddingbox3sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}
.box3:hover
{
background-position: 0 -289px;
}
.box4
{
background-image: url(http://www.sungblue.com/Images/weddingbox4sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}
.box4:hover
{
background-position: 0 -289px;
}

Answer 1

The problem is with the images themselves. Since they have .jpg extensions, the browsers try to treat them as JPEG files, which they are not. They are PNG files.
Solution: rename them to .png, or convert them to actual JPEG files.