Hallo,
folgendes Problem:
ich habe ein Mainmenu, bei dem die Menüpunkte mit einem
Bild hinterlegt sind. Besser gesagt zwei, da ein rollover
besteht. Damit ihr wisst wovon ich rede:
.mainlevel {
letter-spacing : 0px;
padding-left : 15px;
width : 160;
line-height : 22px;
border : 3px solid #FFFFFF;
}
a.mainlevel:link, a.mainlevel:visited {
color : #000000;
background : url('../images/icon01.gif');
font-weight : bold;
background-repeat: no-repeat;
}
a.mainlevel:hover {
color : #FFFFFF;
background : url('../images/icon02.gif');
font-weight : bold;
background-repeat: no-repeat;
}
Mein Problem besteht darin, dass der IE alles perfekt
anzeigt, Netscape, Firefox und Opera mir aber die
Hintergrundbilder des Menüs genau auf die rechte und untere
Kante des Textes beschneiden!
Habe auch schon versucht die Länge und Breite der Bilder
anzugeben. Ändert sich aber nichts!
Hoffe mir kann jemand helfen!
Homepage selbermachen 7.851 Themen, 35.615 Beiträge
Das Problem besteht wohl darin, daß die Menüelemente keine Block- sondern Inline-Elemente sind. Inline-Elemente sind immer nur so breit, wie ihr Inhalt laut Webstandard, die width im Stylesheet wird also ignoriert (von standardkonformen Browsern).
Packe die Menüpunkte entweder in ein DIV mit vorgegebener Breite, dem Du dann das Hintergrundbild zuweist, oder mache aus dem Menüelementen Block-Elemente per:
display:block;
float:left;
Zu letzterem würde ich dir aber nicht raten, da es die unsaubere Variante ist, die wahrscheinlich noch Nebeneffekte nach sich zieht.