Solved

CSS Sprite Help Required

Posted on 2008-09-30
3
564 Views
Last Modified: 2012-06-27
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
Comment
Question by:EzEApostle
3 Comments
 
LVL 2

Accepted Solution

by:
lorenzodalcol earned 500 total points
ID: 22617115
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
 
LVL 1

Author Comment

by:EzEApostle
ID: 22743036
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
 
LVL 42

Expert Comment

by:David S.
ID: 22743122
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question