Solved

CSS image sprite rollover not working

Posted on 2013-01-31
8
462 Views
Last Modified: 2013-02-03
Greetings. I am having trouble getting a CSS image sprite to work. I have been working at this for several hours, and could use your advice.

My test page is here: http://test.ebwebwork.com/

And the image sprite PNG file is attached below.

I am trying to get the image sprite to appear when I mouse over "Gopho", video, photo, and info.

My HTML looks like this:

<ul id="navlist"><!-- this is a CSS image sprite, with rollovers from sprite images -->

<!--- navGopho --->
<li id="navGopho"><a href="#">Gopho Home</a></li><!--- /navGopho --->

<!--- navVideo --->
<li id="navVideo"><a href="#">Gopho Home</a></li><!--- /navVideo --->

<!--- navPhoto --->
<li id="navPhoto"><a href="#">Gopho Home</a></li><!--- /navPhoto --->

<!--- navInfo --->
<li id="navinfo"><a href="#">Gopho Home</a></li><!--- /navInfo --->

</ul><!--- /navlist --->

Open in new window


And my CSS looks like this:


/* NAVIGATION; with rollovers from CSS sprite
----------------- */
#navlist { 
        background: url(/img/gophoNavigation.png) no-repeat 205px 80px;
        width:786px; 
        height:430px; 
        margin:0 auto; 
        padding:0;
		position:relative;
		z-index:2 !important;
border:1px solif #F30;
}

#navlist li {   
        padding:0;
        list-style:none;

}

#navlist li, #navlist a {
        display:block;   
}

#navlist a {text-indent: -9999px;}

#navGopho	{
	width:186px;
    height:70px;
		position:absolute;
        top:0px; 
        left:0px;
}

#navGopho a:hover {
        background: transparent url(/img/gophoNavigation.png) 8px 0px;
}

#navVideo	{
	width:186px;
    height:70px;
		position:absolute;
        top:0px; 
        left:0px;
}

#navVideo a:hover {
        background: transparent url(/img/gophoNavigation.png) 8px 0px;
}


#navPhoto	{
	width:186px;
    height:70px;
		position:absolute;
        top:0px; 
        left:0px;
}

#navPhoto a:hover {
        background: transparent url(/img/gophoNavigation.png) 8px 0px;
}

#navInfo	{
	width:186px;
    height:70px;
		position:absolute;
        top:0px; 
        left:0px;
}

#navInfo a:hover {
        background: transparent url(/img/gophoNavigation.png) 8px 0px;
}

Open in new window


Obviously I have not set up the CSS sprite correctly. Does anyone with more experience with CSS sprites have a suggestion? Thank you very much!

Eric
gophoNavigation.png
0
Comment
Question by:Eric Bourland
  • 5
  • 2
8 Comments
 
LVL 16

Assisted Solution

by:Gurpreet Singh Randhawa
Gurpreet Singh Randhawa earned 250 total points
ID: 38842468
Hi eric,

Check out this Tutorial,

http://alistapart.com/article/sprites
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38843595
The problem is that the a tag to which you're applying the hover state and background-image is a very small area near the top left corner of the image. You can tell where it is by passing the cursor over it. When the cursor changes to a hand, you are over the a tag. The background image is being applied, but the area of the image that is cropped by the area of the a tag is all transparent.

Try adding the following to line 44 of your "gopho.css" file:
#navlist li, #navlist a {
      display: block;
      width: 100%;
      height: 100%;
}

Open in new window

This will increase the size of both the li and the a elements to fill the size of the ul element. Then you can see the image sprite and adjust it's position as needed.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 38843908
randhawa and xmediaman, thank you both for these comments. I am working on this now and will report my progress later today.

Eric
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 3

Author Comment

by:Eric Bourland
ID: 38844301
Hi again. I have studied the examples at http://alistapart.com/article/sprites. Randhawa, thank you again for that tutorial. I am still not quite there. Though I think I have made progress.

xmediaman, I added:

width: 100%;
height: 100%;

As you suggested, but I am still getting some weird "shifting" behavior in the rollover area; and the hover images do not line up with the home images:

http://test.ebwebwork.com/

What I have done:

1) I trimmed the navigation background image, and made it fit exactly in the navigation space

2) My HTML:

<ul id="navlist"><!-- this is a CSS image sprite, with rollovers from sprite images -->

<!--- navGopho --->
<li id="navGopho"><a href="#">Gopho Home</a></li><!--- /navGopho --->

<!--- navVideo --->
<li id="navVideo"><a href="#">Gopho Video</a></li><!--- /navVideo --->

<!--- navPhoto --->
<li id="navPhoto"><a href="#">Gopho Photo</a></li><!--- /navPhoto --->

<!--- navInfo --->
<li id="navInfo"><a href="#">Gopho Information</a></li><!--- /navInfo --->

</ul><!--- /navlist --->

Open in new window


3) My CSS:
/* NAVIGATION; with rollovers from CSS sprite; primary sprite image is /img/gophoNavigation.png
----------------- */
#navlist { 
        width:561px; 
        height:298px; 
        background: url(/img/gophoNavigation.png) no-repeat;
        top:88px;
		left:305px;
        padding:0;
		position:relative;	
}

#navlist li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;width: 100%;
      height: 100%;}
	

#navlist a {
       display:block;width: 100%;
      height: 100%;
}


#navlist a {text-indent: -9999px;}

#navGopho	{
left: 0px; top: 0px; width: 146px; height: 58px;

}

#navGopho a:hover {
background: transparent url(/img/gophoNavigation.png)
    -120px -124px no-repeat;
}

#navVideo	{
	width:186px;
    height:70px;
		position:absolute;
        top:0px; 
        left:0px;
}

#navVideo a:hover {
        background: transparent url(/img/gophoNavigation.png) 8px 0px;
}


#navPhoto	{
	width:186px;
    height:70px;
		position:absolute;
        top:0px; 
        left:0px;
}

#navPhoto a:hover {
        background: transparent url(/img/gophoNavigation.png) 8px 0px;
}

#navInfo	{
	width:186px;
    height:70px;
		position:absolute;
        top:0px; 
        left:0px;
}

#navInfo a:hover {
        background: transparent url(/img/gophoNavigation.png) 8px 0px;
}

Open in new window


Do you have any other ideas about what I am missing?

I will continue to work on this. Thank you again for your ideas.

Eric
gophoNavigation.png
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 250 total points
ID: 38844329
Line 138 of the kickstart-forms.css file is applying a transition to all "a" tags which is somehow shifting the image. If you can, you may want to make that style more specific. If you can't you may want to add
transition: none;

Open in new window

to the #navlist a style just below the width: 100%; and height: 100%; you just added.
0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 38844476
xmediaman,

Good point about the a: transition! Thanks for that catch.

I took away the references to the stylesheets in the /css/ folder and now the sprites are behaving somewhat better.

Two problems still:

1) rollover image still shifts about 10px to the right of the home image

2) rolling over the "Gopho" image causes the entire group of sprites to roll over

I am trying out some ideas. Thank you again for your help!

Eric


Current CSS:

#navlist { 
        width:561px; 
        height:298px; 
        background: url(/img/gophoNavigation.png) no-repeat;
        top:88px;
		left:335px;
        padding:0;
		position:relative;	
}

#navlist li {margin: 0; padding: 0; list-style: none; display: block; position: absolute; width: 100%; height: 100%;}
	
#navlist a {display:block; width: 100%; height: 100%;}

#navlist a {text-indent: -9999px;}

#navGopho	{left: 0px; top: 0px; width: 146px; height: 58px;}

#navGopho a:hover {background: transparent url(/img/gophoNavigation.png) -10px -114px no-repeat;}

Open in new window

0
 
LVL 3

Author Comment

by:Eric Bourland
ID: 38849871
I fixed it up: http://test.ebwebwork.com/

/* NAVIGATION; with rollovers from CSS sprite; primary sprite image is /img/gophoNavigation.png
----------------- */
#navlist { 
        width:561px; 
        height:298px; 
        background: url(/img/gophoNavigation.png) no-repeat;
        top:88px;
		left:335px;
        padding:0;
		position:relative;
}

#navlist li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
	
#navlist a {display:block;height:94px;margin-left:-8px}

#navlist a {text-indent: -9999px;}

#navGopho	{left: 0px; top: 0px; width: 146px; height: 58px;}

#navGopho a:hover {background: transparent url(/img/gophoNavigation.png) 8px -298px no-repeat;}

#navVideo	{
	width:86px; height:28px;
		position:absolute;
        top:240px; 
        left:40px;
}

#navVideo a:hover {
        background: transparent url(/img/gophoNavigation.png)  -32px -538px no-repeat;
}


#navPhoto	{
	width:86px; height:33px;
		position:absolute;
        top:170px; 
        left:200px;
		
}

#navPhoto a:hover {
        background: transparent url(/img/gophoNavigation.png)  -192px -468px no-repeat;
}
*#navInfo	{
	width:60px; height:33px;
		position:absolute;
        top:265px; 
        left:506px;
}

#navInfo a:hover {
        background: transparent url(/img/gophoNavigation.png) -498px -563px no-repeat;
}

Open in new window


My problem was, I was not measuring my pixels from the top, left edges of the master image. After some experimenting, I figured that out. =)

Thank you both very much for your help! If it is OK with you, I will split the points between you -- hope that is OK. Take care.

Eric
0
 
LVL 3

Author Closing Comment

by:Eric Bourland
ID: 38849873
Thank you both again.
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Looking for magnifying glass wingding font 3 17
Bottom border change 5 15
div to fit another div 8 23
specific navigation button disappears on mobile devices 1 17
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 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…

821 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