...

View Full Version : Chrome is duplicating my images



shinydarkrai94
04-15-2011, 12:46 AM
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:



<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 :).

teedoff
04-15-2011, 12:49 AM
Do you have a link to your live site?

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

shinydarkrai94
04-15-2011, 12:59 AM
It's not live yet. I could upload the image I'm using to a free site and perhaps a screenshot of the problem.

teedoff
04-15-2011, 01:06 AM
ok try closing your <a> tags first. Thats probably the problem.

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

shinydarkrai94
04-15-2011, 01:11 AM
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 :).

teedoff
04-15-2011, 01:11 AM
You should also use a valid doctype along with title tags in the head section.


<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum