...

View Full Version : Resolved background image vanishes in Firefox



sterlingcooper
08-19-2010, 11:43 AM
Hi,

So I'm almost done with this site, seems the only problem I have is Firefox for mac refuses to show this watermelon image at the bottom left-hand corner. It shows up in Safari and Opera for Mac.

Actually it does show up in Firefox, at the bottom you can see a faint trace of the yellow "Coming Soon" text trying to show itself. So I guess something on the page is pushing it off the screen but I can't figure it out.

here's the link and relevant code:

link (http://ryanjcampbell.com/marksmarket/)


<div id="comingsoon"><a href="juice.html"><img src="images/comingsoonspacer.png" alt= "juice bar" /></a></div>


#comingsoon a:link {
position:absolute;
left: 40px;
top: 650px;
width:267px;
height:153px;
background-image: url(images/comingsoon.png);
background-repeat: no-repeat;

}

#comingsoon a:active {
background-image: url(images/comingsoonlite.png);

}

#comingsoon a:visited{
background-image: url(images/comingsoon.png);
}

#comingsoon a:hover{
background-image: url(images/comingsoonlite.png);

}


Thanks for any help!

IntegratedS
08-19-2010, 12:04 PM
Firefox is showing the image....Something weird happened when first time I clicked on the link it was not showing that coming soon part with water melon.But when I opened the link again it showed that coming soon part...:confused:

abduraooft
08-19-2010, 12:24 PM
<img src="images/comingsoonspacer.png" alt= "juice bar" /> Why do you need that image there?

sterlingcooper
08-19-2010, 09:58 PM
I deleted it, but the image is still missing. I don't know why Firefox is rendering this particular image differently than all the other browsers.

I guess I thought that if you were going to have a live link from background images you needed a blank image imbeded in the HTML so your mouse would have something to roll over to activate the link.

sterlingcooper
08-20-2010, 01:21 AM
Ok so I figured it out, a couple things. First it was missing because in my CSS, I had it called #comingsoon a:link. But it will only recognize #comingsoon a .

I always thought you were supposed to follow the sequence a:link, a: active, a: visited, a:hover. And that's what I've been doing but I've learned if something doesn't show up, get rid of the "a:link" part and just call it "a". Hopefully that is a proper way to do it.

Secondly the image was blinking when hovered, so instead of multiple images I just combined the regular image and the hover state into one image and adjusted the background position for the hover state, and it doesn't blink anymore.

Lots of fun.

abduraooft
08-20-2010, 07:39 AM
I always thought you were supposed to follow the sequence a:link, a: active, a: visited, a:hover. And that's what I've been doing but I've learned if something doesn't show up, get rid of the "a:link" part and just call it "a". Hopefully that is a proper way to do it. Not really.

#comingsoon a:link {
position:absolute;
left: 40px;
top: 650px;
width:267px;
height:153px;
background-image: url(images/comingsoon.png);
background-repeat: no-repeat;

}

#comingsoon a:active {
background-image: url(images/comingsoonlite.png);

}

#comingsoon a:visited{
background-image: url(images/comingsoon.png);
}

#comingsoon a:hover{
background-image: url(images/comingsoonlite.png);

} The width and height are set to the :link pseudo only. Once you've visted that page, the page will look in to the :visited pseudo and there's no dimensions specified.

A better approach would be

#comingsoon a {
position:absolute;
left: 40px;
top: 650px;
width:267px;
height:153px;
background-repeat: no-repeat;

}
#comingsoon a:link,#comingsoon a:visited {
background-image: url(images/comingsoon.png);
}
#comingsoon a:hover,#comingsoon a:active {
background-image: url(images/comingsoonlite.png);

}
And there's one more thing to consider when using all these pseudos. IE may behave strangely, if we don't use them in the order :link, :visited, :hover, :active (LoVe-HAte). Read http://www.w3schools.com/CSS/css_pseudo_classes.asp

sterlingcooper
08-20-2010, 08:10 AM
Excellent, thanks for explaining that. Now I'll know what to do next time I put in a background image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum