?
Solved

CSS Sprite Help Required

Posted on 2008-09-30
3
Medium Priority
?
572 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 2000 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 43

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses
Course of the Month5 days, 21 hours left to enroll

589 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