Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts

    background image vanishes in Firefox

    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

    Code:
    <div id="comingsoon"><a href="juice.html"><img src="images/comingsoonspacer.png" alt= "juice bar" /></a></div>
    Code:
    #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!
    Last edited by sterlingcooper; 08-20-2010 at 01:19 AM.

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Location
    In My Dreams
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    <img src="images/comingsoonspacer.png" alt= "juice bar" />
    Why do you need that image there?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    Code:
    #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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    sterlingcooper (08-20-2010)

  • #7
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Excellent, thanks for explaining that. Now I'll know what to do next time I put in a background image.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •