Solved

CSS image sprite rollover not working

Posted on 2013-01-31
8
486 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

635 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