Solved

CSS image sprite rollover not working

Posted on 2013-01-31
8
451 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 15

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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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 …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

911 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now