nicht angemeldet
Hallo,
verzweifelt suche ich Hilfe für folgendes Problem:
Ich habe ein Navigationsmenü mit Hover-Effekt (andere Hintergrundgrafik). Nun möchte ich beim Hover auch noch den Text vor der Hintergrundgrafik einen Pixel nach rechts und einen nach unten verschieben, damit ein 3d-Effekt entsteht.
In CSS sieht das so aus:
ul#nav li a {
background-image: url(images/Menu-1.gif);
font-size: 12px;
line-height: 21px;
height: 21px;
display:block;
color:#444444;
text-decoration: none;
font-weight: bold;
border: 0px solid #666666;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
border-top-color: #fff;
cursor: hand;
}
ul#nav li a span {
height: 21px;
text-indent: 5px;
display:block;
margin-left: 5px;
}
ul#nav li a:hover {
background-image: url(images/Menu-2.gif);
}
ul#nav li a:hover span {
color:#000000;
padding-top: 1px;
padding-left: 1px;
}
Die beiden letzten Zeilen sind entscheidend für das Verschieben des Textes. Im Firefox klappt das wunderbar, im IE ignoriert er das einfach. Kann der IE kein Padding in einem span? Mit text-indent klappts auch nicht, oder mit position: relative; top: 1px etc. Das alles versteht nur der Firefox...
Der Aufruf auf der html-Seite ist folgender:
<table width=150 border=0 cellpadding=0>
<tr height=100%>
<td>
<div style="width:150px;">
<ul id="nav"> <li><a href="Aktuelles.htm" target="Hauptframe"><span>Aktuelles</span></a></li></ul>
</div>
</td>
</tr>
</table>
Hat jemand eine Idee oder einen Lösungsansatz? Zur Verdeutlichung könnt Ihr Euch das Navigationsmenü auf meiner Webseite anschauen. Im Firefox ist es 3d, im IE nicht, sprich der Buttontext bleibt auf beim Hovern da wo er vorher war.