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 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    21
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Chrome is duplicating my images

    I decided to try to make an image navigation bar that consists of a stoplight that lights up whenever you hover over the individual lights. It worked well in Firefox, but in Chrome, it displays 5 lights instead of 3 (it should display first a Home [stoplight1] light, then an About Us [stoplight2] light and finally a Contact Us [stoplight3] light -- instead it displays a Home light, then two About Us lights, then another two Contact Us lights). The strangest thing is that all five lights function properly - when you hover over any of them, they will light up. I only have 3 <li> tags, so I don't know how or why it is duplicating two of the lights in Chrome, but not in Firefox. Here is the code:

    Code:
    <html>
    
      <head>
    
    
    
        
        <style type="text/css">
    
          ul#stoplight {
       width:100px;
       list-style:none;
       margin:0 auto;
          }
    
          
    
          ul#stoplight li a {
       float:left;
    
          }
    
          ul#stoplight li#stoplight-1 a {
       width:178px;
       height:82px;
       background:url(sprites.png) no-repeat 0 0;
          }
    
          ul#stoplight li#stoplight-1 a:hover {
       background-position: -179px 0;
          }
    
          ul#stoplight li#stoplight-2 a {
       width:179px;
       height:63px;
       background:url(sprites.png) no-repeat 0 -82px;
          }
    
          ul#stoplight li#stoplight-2 a:hover {
       background-position: -359px -82px;
          }
    
          ul#stoplight li#stoplight-3 a {
       width:179px;
       height:66px;
       background:url(sprites.png) no-repeat 0 -145px;
          }
    
          ul#stoplight li#stoplight-3 a:hover {
       background-position: -538px -145px;
          }
    
    
        </style>
    
    
    
    
      </head>
    
      <body>
    
        <ul id="stoplight">
          <li id="stoplight-1"><a href="Index.html"/></li>
          <li id="stoplight-2"><a href="AboutUs.html"/></li>
          <li id="stoplight-3"><a href="ContactUs.html"/></li>
        </ul>
        
        
      </body>
    
    </html>
    Thanks everyone in advance .
    Last edited by shinydarkrai94; 04-15-2011 at 12:59 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Do you have a link to your live site?

    Also please use the code button(#) to wrap your posted code in code tags.
    Teed

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    21
    Thanks
    9
    Thanked 0 Times in 0 Posts
    It's not live yet. I could upload the image I'm using to a free site and perhaps a screenshot of the problem.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ok try closing your <a> tags first. Thats probably the problem.

    <li><a href=index.html>Home</a></li>
    Teed

  • Users who have thanked teedoff for this post:

    shinydarkrai94 (04-15-2011)

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    21
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Wow, can't believe I missed that. Thanks! Apparently it was displaying both the first and second images as one link and the second and third (again) as the second link and the third (again) as the third link. Fastest reply I've gotten, thanks again .

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You should also use a valid doctype along with title tags in the head section.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Page Title</title>
    
    <style>
    </style>
    </head>
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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