Solved

CSS image sprite rollover not working

Posted on 2013-01-31
8
441 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 21

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 21

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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 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 overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

747 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

18 Experts available now in Live!

Get 1:1 Help Now