Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 570
  • Last Modified:

CSS Sprite Help Required

Hi all, hope you're all well.

I'm currenty designing a new site and was hoping to use Sprites for the first time... This leads me onto my question! I know how to set the variables with the image but when I mouse over the image isn't corretly highlighting the correct part of my mouseover image, can anyone spot the obvious error? :)

Thanks
Tim
<html>
<head>
<style type="text/css">
#header_menu {
	width:228px; height:165px;
	background:url(http://img237.imageshack.us/img237/5791/headermenuus2.jpg);
	margin:10px auto; padding:0;
	position:relative;
}
 
#header_menu li {
	margin:0; padding:0; list-style:none;
	position:absolute; top:0;
}
 
#header_menu li, #header_menu a {
	height:165px; display:block;
}
 
#header_menu_1 {top:0px; height:57px; width:228px;}
#header_menu_2 {top:57px; height:52px; width:228px;}
#header_menu_3 {top:109px; height:58px; width:228px;}
 
#header_menu_1 a:hover {
    background: transparent url(http://img237.imageshack.us/img237/5791/headermenuus2.jpg);
}
#header_menu_2 a:hover {
    background: transparent url(http://img237.imageshack.us/img237/5791/headermenuus2.jpg);
}
#header_menu_3 a:hover {
    background: transparent url(http://img237.imageshack.us/img237/5791/headermenuus2.jpg)
    0 272px;
}
</style>
</head>
 
<body>
          <ul id="header_menu">
            <li id="header_menu_1"><a href="#1"></a></li>
            <li id="header_menu_2"><a href="#2"></a></li>
            <li id="header_menu_3"><a href="#3"></a></li>
          </ul>
 
</body>
</html>

Open in new window

0
EzEApostle
Asked:
EzEApostle
1 Solution
 
lorenzodalcolCommented:
Job is done!

tested in:
Firefox 3
Internet Explorer 7
Safari 3
Opera 9.5
Google Chrome
<html>
<head>
<style type="text/css">
#header_menu {
        width:228px; height:228px;
        margin:10px auto; padding:0;
        position:relative;
}
 
#header_menu li {
        margin:0; padding:0; list-style:none;
        position:absolute;
		display:block;
}
 
#header_menu a {
		width:228px;
		display:block;
		height: 100%;
		background:url(http://img237.imageshack.us/img237/5791/headermenuus2.jpg) 0 0 no-repeat;
}
 
#header_menu_1 { top:0px; height:56px; }
#header_menu_1 a { background-position: 0px 0; }
#header_menu_1 a:hover { background-position: 0 -165px; }
 
#header_menu_2 { top:56px; height:52px; }
#header_menu_2 a { background-position: 0px -56px; }
#header_menu_2 a:hover { background-position: 0 -221px; }
 
#header_menu_3 { top:108px; height:56px; }
#header_menu_3 a { background-position: 0px -109px; }
#header_menu_3 a:hover { background-position: 0 -274px; }
 
</style>
</head>
 
<body>
          <ul id="header_menu">
            <li id="header_menu_1"><a href="#1"></a></li>
            <li id="header_menu_2"><a href="#2"></a></li>
            <li id="header_menu_3"><a href="#3"></a></li>
          </ul>
 
</body>
</html>

Open in new window

0
 
EzEApostleAuthor Commented:
Great stuff it works perfectly on highlight, there is one problem I notice however. Looking in IE and FF there is a difference in the horizontal positioning, do you know whats causing it?

Thanks
Tim
0
 
David S.Commented:
Adding a doctype may help and even if it doesn't make a difference, you should be using one anyway: http://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now