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!

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:

<img src="images/comingsoonspacer.png" alt= "juice bar" /> Why do you need that image there?

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.

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.

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

Excellent, thanks for explaining that. Now I'll know what to do next time I put in a background image.