✔ Problem mit Menü beim firefox

[joextra]

Hi,

ich sitze nun schon seit stunden an diesen misst und komme nicht weiter. Ich bastle grad ein Menü. Beim ie siehts aus wie es aussehen sollte, nur macht jetzt der blöde firefox probleme (siehe Bild)

Hier der Code:

.leftMenu {
	background-image: url(imagesOld/menuArrowBG1.gif);
	background-position: right;
	vertical-align:top;
	width:257px;
	height:19px;
	margin:0px;
}

.leftMenu a {
	font-family:Verdana, Arial;
	font-size:11px;
	color:#000000;
	text-decoration:none;
	vertical-align:middle;
	width:257px;
	height:19px;
	line-height:19px;
	padding-left:27px;
	margin:0px;
}

.leftMenu a:hover {
	font-family:Verdana, Arial;
	font-size:11px;
	color:#000000;
	text-decoration:none;
	background-image: url(imagesOld/menuArrowBG2.gif);
	width:257px;
	height:19px;
}

Und hier wird das ganze aufgerufen:

<div class="leftMenu"><a href="">Top News</a></div>

Wie kriege ich es hin, das das ganze Menü beim hover mit den anderen Bild ganz ausgetauscht wird, und nicht nur zum teil wie auf dem Bild zu sehen?

 

[Maik]

Probier's mal so:

/* EDIT 11.12.2006, 10:27h */

.leftMenu {
        width:284px; /* width:257px + padding-left:27px = 284px */
        height:19px;
        margin:0px;
}

.leftMenu a {
        font-family:Verdana, Arial;
        font-size:11px;
        color:#000000;
        text-decoration:none;
        width:257px;
        height:19px;
        line-height:19px;
        padding-left:27px;
        margin:0px;
        display: block;
        background: url(imagesOld/menuArrowBG1.gif);

}

.leftMenu a:hover {
        background: url(imagesOld/menuArrowBG2.gif);
}

Das Thema wird ins CSS-Board verschoben.