✔ CSS - Mouseovereffekt

[cromec]

Hi,

also ich habe ein Problem bei einem Script das Beim MouseOver den das Hintergrundbild wechselt. Das gante funktioniert im IE super. Nur im Mozilla macht er macken.

Guckst du hier!

Im Mozilla werden die Unterstriche noch angeziegt sowie die Aufzählungszeichen.

Mein CSS Code:

menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu li {
	float: left;

			


}

#start {
	background-image: url(grafics/btn_home_norm.jpg);
	width: 70px;
	height: 30px;
	display: block;
}

#start:hover , #start:active, #start:focus, #start_active {
	background-image: url(grafics/btn_home_over.jpg);
	width: 70px;
	height: 30px;
	display: block;
}

#about {
	background-image: url(grafics/btn_about_norm.jpg);
	width: 70px;
	height: 30px;
	display: block;
}

#about:hover, #start:active, #start:focus, #start_active {
	background-image: url(grafics/btn_about_over.jpg);
	width: 70px;
	height: 30px;
	display: block;
	
}

#musik {
	background-image: url(grafics/btn_musik_norm.jpg);
	width: 70px;
	height: 30px;
	display: block;
}

#musik:hover, #start:active, #start:focus, #start_active {
	background-image: url(grafics/btn_musik_over.jpg);
	width: 70px;
	height: 30px;
	display: block;
	
}

#kontakt {
	background-image: url(grafics/btn_kontakt_norm.jpg);
	width: 70px;
	height: 30px;
	display: block;
}

#kontakt:hover, #start:active, #start:focus, #start_active {
	background-image: url(grafics/btn_kontakt_over.jpg);
	width: 70px;
	height: 30px;
	display: block;
	
}

#impressum {
	background-image: url(grafics/btn_impressum_norm.jpg);
	width: 70px;
	height: 30px;
	display: block;
}

#impressum:hover, #start:active, #start:focus, #start_active {
	background-image: url(grafics/btn_impress_over.jpg);
	width: 70px;
	height: 30px;
	display: block;
}

.invisible {
	visibility: hidden;
}

HTML:

<ul id="menu" >
    <li><a href="index.html" id="start" style="display:block;"><span class="invisible">Start</span></a></li>
    <li><a href="wer.html" id="about" style="display:block;"><span class="invisible">about</span></a></li>
    <li><a href="was.html" id="musik" style="display:block;"><span class="invisible">musik</span></a></li>
    <li><a href="kontakt.html" id="kontakt" style="display:block;"><span class="invisible">kontakt</span></a></li>
	<li><a href="impressum.html" id="impressum" style="display:block;"><span class="invisible">Impress</span></a></li>
</ul>

Wenn ihr es mal mit beiden Browsern aufruft seht ihr was ich meine.

Kann mir da jemand helfen, oder hat ne Idee wie ich das hinkriege das es im Mozilla auf vernünftig ausschaut?

 

[Maik]

Der ID menu fehlt das #-Zeichen, weshalb die CSS-Formatierung nicht übernommen wird:

#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Um die Unterstriche der Links zu deaktivieren, muß folgende CSS-Regel im Stylesheet notiert werden:

a:link, a:visited, a:hover
{
text-decoration: none;
}