css rollover image menu

[fukachu]

hey everyone, i will be the first to admit im not very good at CSS, it has been about 1.5 years since i even touched the stuff last. so i did some searching around the net and came up with the following:

i have these images:

THIS IS PHOTOS.PNG

THIS IS MENU.PNG

there are more menu options than that. ok so i have this code:

in header.php:

<div id="topmenu" >
	<ul>
		<li id="main"><a href="/"><span><em>Main</em></span></a></li>
	</ul>
</div>

in CSS:

#topmenu { 
	height:23px; 
	background-image:url(images/menu/menu.png); 
	}

#topmenu ul { 
	list-style:none; 
	margin:0; 
	padding:0 10px;  
	}

#topmenu li { 
	float:left; 
	}

#topmenu li a span, #topmenu li a em { 
	display:none; 
	}

#topmenu li a { 
	display:block; 
	height:23px; 
	width:100px; 
	background-position:center top; 
	}

#topmenu li a:hover span { 
	display: block; 
	width:100px; 
	height:23px; 
	top:-23px; 
	background-position:center bottom; 
	}

#topmenu li#photos a, #topmenu li#photos a:hover span { 
	background-image:url(images/menu/photos.png); 
	}

and this is the problem i'm getting:

As you can see they are doubling up on top of each other. So my question is, how can i remove the normal state of the menu item. I don't want to use solid colour background for the menu items as i have made many picture/colour themes for this blog depending on events and seasons in Japan. I'm hoping this is really simple. I don't even know where to start to find an answer to this as i got this code from a how-to. sorry for trouble ><

Edited February 19, 2008 by fukachu

[Mathachew Veteran]

Your CSS seems to be, at the very least, partially incomplete because the last bit of code is missing the closing }, but I'm sure that you just didn't include it.

Which of the two images is main.png? I'm not seeing where the second image (main2.png?) is put in by the CSS either. Is this page accessible for us to see?

I like to refer people to this page for CSS rollovers (which can help you in two ways, with the rollover and with no preloading).

[fukachu]

thank you for your reply, sorry that i didn't give everything correcly. I have named the images above and i have fixed the code to reflect the images better at the last minute i changed the image from main to photos as that particular one showed the problem more clearly but if forgot to edit the code in this post.

you can view the site here\ it is very simple default wordpress layout with some graphical changes and the menu. obviously not complete but wanting to get this menu nailed before i move on.

as for the website you linked to. i tried using that sites information once before and i must have been doing something wrong. 1.5 years ago i had a hell of a time getting everything to look the same in the menu in firefox/safari/ie even though it is meant to be compatible. so i looked elsewhere this time. also with the example you show there, it might still have the original yellow image showing but simply being covered up by the brown and black image sections.

what i need is for the regular state image, the smaller version of photos, to disappear when in hover state so that it doesn't appear behind the larger, hover state image of photos.

the reason for this is the themes i will have as you can see below will be changed every few weeks to reflect what is going on in Japan: it makes my life easier if i can have the menu without putting the colour backgrounds in. then if i want to add new menu items down the track, which is more than likely, i can just make one image with the text rather than as many as 20 (when finished making all the themes)

Edited February 19, 2008 by fukachu

[Mathachew Veteran]

Alrighty, I saw this at first and confirmed that it's the problem: you're setting the background for both the anchor and span. Remove all references to applying a background to the span, and remove span from #topmenu li a:hover span { }

[fukachu]

wow that worked great, thank you so much for that! really appreciate it (Y)

[Mathachew Veteran]

You're welcome so much, and I mean it! :D