Solved

CSS image sprite rollover not working

Posted on 2013-01-31
8
476 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
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!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem to refer to value 8 80
Why am I getting this white space between my section and my footer? 2 27
Why "Mobile First"? 5 37
Fix a css menu for width 15 33
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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 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…

749 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