Hover mit Hintergrundbildern funktioniert nicht

[berlin10999]

Ich habe einen praktischen Tipp in einem anderen Forum entdeckt:

>>>> Du brauchst kein JS, um beim Hovern 2 verschiedene Hintergrundbilder zu ändern:

Code:
<a href="#"><span>text</span></a>

Code:
a,
span {
display: block;
}

a:hover {
background: ...
}

a:hover span {
background: ...
}

Das läuft sogar im IE 5.0. <<<<<<<<<<

Nun ist es bei mir aber so, wenn ich das z.B. einbinde in

<ul id="subnav2">
<li><a href="xyz" ><span></span></a></li>
</ul>

<ul id="subnav3">
<li><a href="xyz2" ><span></span></a></li>
</ul>
..............

und in der style.css entsprechend z.B.

#subnav2 li a,span {

background: #FFFFFF url(images/xyz.gif);
width: 130px;
height: 30px;
display: block;
cursor: pointer;
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}


#subnav2 li a:hover span, #subnav2 li a:active span {
background: #FFFFFF url(images/xyz2.gif);
width: 130px;
height: 30px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

Dann kommt jede einzelne Box immer leicht nach unten versetzt (durch den ja leeren Text). Ich benötige immer eine neue <li> da jedes Bild eine andere Breite hat.

Wie kann ich erreichen dass alle Menüpunkte immer auf gleicher Höhe sind?

Danke!

 

[Maik]

Hi,

Wie kann ich erreichen dass alle Menüpunkte immer auf gleicher Höhe sind?

erweiter das Stylesheet zu Beginn folgendermaßen:

* {
margin:0;
padding:0;
}
#subnav2, #subnav3 {
float:left;
}

mfg Maik

P.S. In diesem Selektor dürfte das Komma deplatziert sein:

#subnav2 li a,span  { ... }

wenn ich zum Vergleich diesen Selektor betrachte:

#subnav2 li a:hover span, #subnav2 li a:active span { ... }

 

[berlin10999]

Klasse, funktioniert, thx!!