6 replies [Last post]
Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Hi there,

I'm trying to make my image roll-overs work properly. I've tested in IE, FF, and Safari and get different results in each; FF being the best. Here's the problem:

When hovering over the first nav button, it looks fine. Hover over button number 2, and both 2 & 3 light up. Hover over the third button, and 3, 4, and 5 light up. Et cetera. In Safari some extra hover buttons appear to repeat across and out of view (not supposed to).

Here's a link to the page:

http://www.digitalpawprint.com/test.html

Please ignore the comments (on the site) saying that I had a breakthrough... that was from an earlier problem I'd solved.

Here's the CSS code that has related info:

#menu 
{ width: 567px; height: 70px; background: url(./images/menu.gif); margin: 10px auto; padding: 0; position: relative; }
	
#menu li
{ margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
	
#menu li, #menu a
{ height: 70px; display: block; text-indent: -9999px; text-decoration: none; }
	
#homemenu
{ left: 0; width: 70px; }
	
#servicesmenu
{ left: 71px; width: 141px; }
	
#aboutmenu
{ left: 142px; width: 212px; }
	
#portfoliomenu
{ left: 213px; width: 283px; }
	
#contactmenu
{ left: 284px; width: 354px; }
	
#vaultmenu
{ left: 355px; width: 420px; }
	
#infomenu
{ left: 426px; width: 496px; }
	
#linksmenu
{ left: 497px; width: 567px; }
	
#homemenu a:hover
{ background: transparent url(./images/menu.gif) 0 -70px no-repeat; }
	
#servicesmenu a:hover
{ background: transparent url(./images/menu.gif) -71px -70px no repeat; }
	
#aboutmenu a:hover
{ background: transparent url(./images/menu.gif) -142px -70px no-repeat; }
	
#portfoliomenu a:hover
{ background: transparent url(./images/menu.gif) -213px -70px no-repeat; }
	
#contactmenu a:hover
{ background: transparent url(./images/menu.gif) -284px -70px no-repeat; }
	
#vaultmenu a:hover
{ background: transparent url(./images/menu.gif) -355px -70px no-repeat; }
	
#infomenu a:hover
{ background: transparent url(./images/menu.gif) -426px -70px no-repeat; }
	
#linksmenu a:hover
{ background: transparent url(./images/menu.gif) -497px -70px no-repeat; }

I hope I posted this okay... it's my first time posting something here and I read through the rules and suggestions and want to do things right to ensure I don't potentially annoy anyone that might help me.

Thanks!

Jenn

matera
Offline
Regular
Last seen: 14 years 26 weeks ago
Timezone: GMT-6
Joined: 2006-06-01
Posts: 11
Points: 0

[Solved] Image roll-overs - too many hovers showing up

Width! Use the same width for each segment. (I think...) Smile

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

[Solved] Image roll-overs - too many hovers showing up

Yay!

Thanks Matera, you were absolutely right. It seemed so terribly obvious once I read what you wrote and then looked at my code... but I suppose that's what happens.

I love it when something that seems so horribly big and difficult becomes something so simple and obvious.

Thank you very much! Laughing out loud Wow. This forum is great.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[Solved] Image roll-overs - too many hovers showing up

You get my prize for best username this month. Laughing out loud

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

[Solved] Image roll-overs - too many hovers showing up

Sweet.

Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

[Solved] Image roll-overs - too many hovers showing up

You get MY prize for longest username/topic combo ever Tongue

Hehehehe . . . . lambs . . . Laughing out loud

Have you seen the limited edition Star Wars prints? They're quite nifty.

http://www.firebox.com/index.html?dir=firebox&action=product&pid=1344

Verschwindende wrote:
  • CSS doesn't make pies

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 5 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

[Solved] Image roll-overs - too many hovers showing up

You're right, they are rather lengthy... but what's a rebel lamb to do?

Very nice prints on that site.