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

    Missing Background images

    Hey guys, another newbie question.

    I'm laying out a site and an image keeps disappearing from the page. Initially it was only in Firefox (Mac) and was fine in Safari and Opera, but now it's missing in all three browsers.

    Here is the html part:

    Code:
      <div id="produce"><a href="produce.html"></a></div>
                <div id="seafoodlink"><a href="seafood.html"></a></div>
                <div id="takeoutlink"><a href="takeout.html"></a> </div>

    The problem is the "produce" div. I tried changing the name of the link so that it wasn't the same name as the div, and that actually got the image to reappear. But when I logged back in to my computer and opened the page, the image vanished again. I've been able to get it to reappear intermittently by giving the link a new name, but as soon as I actually create the page that the link refers to (produce.html) the image disappears again.


    Code:
    #produce:link {
        position: absolute;
        float: left;
        background-image: url(images/produce.png);
        width: 205px;
        height: 162px;
        top: 550px;
        left: 325px;
     }
     
     
    
    #produce a:active {
        background-image: url(images/producelite.png);
         
    }
     
    
    #produce a:hover {
         background-image: url(images/producelite.png);
       
    }
    
    #produce a:visited {
        background-image: url(images/produce.png);
         
    }
    I should add that when I just replace the first css code with "#produce" instead of "#produce a:link", the image reappears, but is no longer interactive.

    I have no clue what's going on.

    Would appreciate some insight.
    Last edited by sterlingcooper; 08-15-2010 at 02:11 AM.

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    I dont know what your aiming for, but maybe this will help..

    Are you building locally?

    Code:
    #produce {
        position: absolute;
        float: left;
        background-image: url(images/produce.png);
        width: 205px;
        top: 550px;
        left: 325px;
     }
    #produce a{
     height: 162px;
     width: auto;
    }
    
    #produce a:link {
     background-position: url(images/produce.png);
    }
     
     
    
    #produce a:active {
        background-image: url(images/producelite.png);
         
    }
     
    
    #produce a:hover {
         background-image: url(images/producelite.png);
       
    }
    
    #produce a:visited {
        background-image: url(images/produce.png);
         
    }
    Last edited by ch4sethe5un; 08-13-2010 at 10:30 PM.

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks for responding ch4sethe5un,

    I tried your code and nothing yet. The image is appearing in Safari again, and also IE5 (mac). Missing in FireFox and Opera.

    This is just a practice site for me and is not actually online yet.

    This is a screenshot of Safari, how it should look:



    And Firefox, where the pic is gone:



    Just can't figure out what I'm doing wrong. I've deleted everything on the page except for that image and the ones to the left of it, same thing.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I tried your code and nothing yet.
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hi abduraooft,

    The page isn't online, it's only on my computer.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    It'd help us a lot if you upload the relevant files to a host. You may even use a free host like freehostia.com
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ok I'll try to have something up soon, thanks.

  • #8
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Set up my hosting plan, that's something I was putting off so this was a good push.

    Here's the page, and the css code (with the code for the missing image up top):

    http://carl.machighway.com/~ryanjcam/ryan/marksmarket/

    Code:
    @charset "UTF-8";
    
    
    /*-------------------------
     =BODY2
    -------------------------*/
    
    
     
    #produce {
        position: absolute;
        float: left;
        background-image: url(images/produce.png);
        width: 205px;
        top: 550px;
        left: 325px;
     }
     
    #produce a{
     height: 162px;
     width: auto;
    }
    
    #produce a:link {
     background-position: url(images/produce.png);
    }
     
     
    
    #produce a:active {
        background-image: url(images/producelite.png);
         
    }
     
    
    #produce a:hover {
         background-image: url(images/producelite.png);
       
    }
    
    #produce a:visited {
        background-image: url(images/produce.png);
         
    }
    
    
    
    #seafoodlink a:link {
        position: absolute;
        float: left;
        width: 205px;
        height: 162px;
        background-image: url(images/seafood.png);
        left: 507px;
        top: 550px;
            
    }
    
    #seafoodlink a:active {
         background-image: url(images/seafoodlite.png);
    }
    
    #seafoodlink a:hover {
        background-image: url(images/seafoodlite.png);
           
    }
    
    #seafoodlink a:visited {
        background-image: url(images/seafood.png);
          
    }
    
    
    
    #takeoutlink a:link {
        position: absolute;
        float: left;
        width: 205px;
        height: 162px;
        background-image: url(images/takeout.png);
        left: 682px;
        top: 550px;
        
    }
    
    #takeoutlink a:active {
        background-image: url(images/takeoutlite.png);
           
    }
    
    #takeoutlink a:hover {
        background-image: url(images/takeoutlite.png);
            
    }
    
    #takeoutlink a:visited {
        background-image: url(images/takeout.png);
          
    }
    
    
    
    #big3  p {
       
       float: left;
       width: 150px;
       text-align: center;
       margin-top: 400px;
       font-size: 14px;
       margin-right: 25px;
       font-size: 13px;
       line-height: 16px;
       padding-top: 5px;
       padding-right:3px;
        
    }
    
    
    
    
    
    #container {
        position: relative;
        width: 900px;
        height: 1000px;
        margin: 0px auto;
        margin-top: 15px;
        margin: 0px auto;
         
    
      
    }
    
    
    #box {
        background-image: url(images/bg2.png);
        background-repeat: no-repeat;
        width: 910px;
        height: 100%;
        margin: 0px auto;
        margin-top:25px;
       }
    
    body {
        background-image: url(images/bg.png);
        background-color: #fff784;
        font-family: georgia, times, serif;
        color: white;
    }
    
     
    h1 {
        font-size: 27px;
        letter-spacing: -1px;
        line-height: 30px;
        font-weight: normal;
    }
    
    h2 {
        font-size: 14px;
        font-weight: normal;
        line-height: 16px;
        
    }
    /*-------------------------
     =MASTHEAD
    -------------------------*/
    
    #logo {
        background-image: url(images/logo.png);
        float: left;
        width: 500px;
        height: 203px;
        margin-top: 50px;
        margin-left: 20px;
    }
     
    
    #special a:link {
        float: left;
        background-image: url(images/specials.png);
        width: 373px;
        height: 220px;
        margin-top: 45px;
    }
    
    #special a:active {
        background-image: url(images/specialslite.png);
        
    }
    
    #special a:visited {
        background-image: url(images/specials.png);
          
    }
    
    #special a:hover {
        background-image: url(images/specialslite.png);
    }
    
    /*-------------------------
     =NAVIGATION
    -------------------------*/
    
    #navbarcontainer {
      
        margin-left: 30px;
    }
    
     
    #navbar li span {
        padding-left: 9.5px;
        padding-right: 9.5px;
    }
    
    #navbar li {
        text-decoration: none;
        width: 900px;
        height:150px;
        display: inline;
        font-weight: bold;
        font-size: 17px;
        color: white;
         
    }
    
    #navbar li a {
        text-decoration: none;
        color: white;
    }
    
    #navbar li a:active{
        text-decoration: none;
        color: black;
    }
    
    #navbar li a:visited{
        text-decoration: none;
        color: white;
         
    }
    
    #navbar li a:hover{
        text-decoration: none;
        color: black;
          
    }
    
    #navlinetop {
        position: absolute;
        width: 840px;
        height: 2px;
        background-color: white;
        margin-top: 257px;
        margin-left: 30px;
    }
    
    #navlinebottom {
        position: absolute;
        width: 840px;
        height: 2px;
        background-color: white;
        margin-top: 292px;
        margin-left: 30px;
    }
    
    /*-------------------------
     =MAINCONTENT
    -------------------------*/
    
    #bottomhalf {
        margin-top: 20px;
    }
    
    #maincontent {
        width: 480px;
        height: 180px;
        margin-left: 350px;
        margin-top: 35px;
        background-color:#CD5C5C;
        /*border:3px solid #999;*/
        padding:1em;
        -moz-border-radius:8px;
        -webkit-border-radius:8px;
        -opera-border-radius:8px;
        -khtml-border-radius:8px;
        -border-radius:8px;
         position: absolute;
         overflow:auto;
    }
    
    #maincontent h1 {
        margin-left: 20px;
    }
    
    #bread{
        width: 348px;
        height: 351px;
        background-image: url(images/bread.png);
        margin-left: 40px;
        position: absolute;
    }
    
    
    
    /*-------------------------
     =COMINGSOON
    -------------------------*/
    
    #comingsoon a:link {
        position: relative;
        float: left;
        width: 267px;
        height: 144px;
        background-image: url(images/comingsoon.png);
        left: 42px;
        top: 347px;
        margin-right: 85px;
         
     
    }
    
    #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);
        
    }
    
    /*-------------------------
     =FRESH PRODUCE PAGE
    -------------------------*/
    #producecontent  {
        width: 480px;
        height: 180px;
        margin-left: 350px;
        margin-top: 15px;
     
    }
    
    
    #producecontent h1 {
        margin-left: 20px;
        line-height: 30px;
    }
    
    
    #producespecial {
        float: left;
        background-image: url(images/pumpkin2.png);
        width: 390px;
        height: 220px;
        margin-top: 45px;
        overflow: hidden;
    }
    
    #strawberries {
        float: left;
        width: 301px;
        height: 266px;
        background-image: url(images/strawberries.png);
        margin-left: 40px;
       
    }
    
    #bananas {
        position: absolute;
        width: 271px;
        height: 237px;
        background-image: url(images/bananas.png);
        left: 75px;
        margin-top: 25px;
            
    }
    
    
    #peppers {
        float: left;
        width: 289px;
        height: 199px;
        background-image: url(images/peppers2.png);
        margin-left: 355px;
         
    }
    
    #tomatoes {
        float: left;
        width: 260px;
        height: 166px;
        background-image: url(images/tomatoes.png);
        margin-top: 20px;
        margin-left: -10px;
          
    }
    Thanks for taking a look. After posting this, I saw that the page is completely screwed up in FireFox, but looks ok in Safari.
    Last edited by sterlingcooper; 08-15-2010 at 12:12 AM.

  • #9
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ok, I've appeared to solve this by sheer chance.

    I was experimenting with not using multiple images for hover events because it was causing a "blink" to happen in the browser. So instead of two images, I combined them, using background-position to move the hover state over the correct amount of pixels.

    I was tired of not seeing the image though, so I just put in a

    Code:
    #produce a {
        position: absolute;
        float: left;
        background-image: url(images/produce3.png);
        width: 205px;
        height: 162px;
        top: 550px;
        left: 325px;
        
     }
    At the beginning and now all of the sudden it is working. Previously, when I added just the #produce a code, the image showed up but didn't do anything when I hovered over it. Now, since using background positioning, it is back.

    I still have no idea what caused the problem in the first place though, or why exactly what I did fixed it. If anyone has an explanation I'd appreciate it.


    This is the updated code that works:

    Code:
    #produce a {
        position: absolute;
        float: left;
        background-image: url(images/produce3.png);
        width: 205px;
        height: 162px;
        top: 550px;
        left: 325px;
        
     }
     
     
    #produce a:link {
        position: absolute;
        float: left;
        background-image: url(images/produce3.png);
        width: 205px;
        height: 162px;
        top: 550px;
        left: 325px;
        
     }
     
     
    
    #produce a:active {
        background-image: url(images/produce3.png);
        background-position:-205px;
         
    }
     
    
    #produce a:hover {
         background-image: url(images/produce3.png);
         background-position:-205px;
       
    }
    
    #produce a:visited {
        background-image: url(images/produce3.png);
         
    }

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    #produce {
    position: absolute;
    float: left;
    background-image: url(images/produce.png);
    width: 205px;
    top: 550px;
    left: 325px;
    }
    There was no height set to that element!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Ah, thanks for spotting that. I'm glad it was something simple like that.


  •  

    Posting Permissions

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