so, hier die ausführliche erklärung:
opera 5.02 (in meinem fall) stellt das li-element zu breit dar; d.h. es muss bereits für den "normalen" zustand (also NICHT link-zustand) definiert werden, und zwar wie folgt:
Code:
#menu ul li {
display:block;
float:left;
text-align:center;
padding:0;
margin:0;
}
html>body #menu ul li { /* gekko und opera */
background-color: white; /* dient zur visualisierung beim testen */
width: 109px;
}
herausgefunden hab ich das durch das einfärben des li-elements mit weißer hintergrundfarbe!
mit folgendem css-code unter zuhilfenahme:
Code:
html>body #menu ul li a {
background-color: Red; /* visualisierung */
}
d.h. ich habe das link-element in der liste mit rot hinterlegt, das list-element an sich mit weiß!
nimmt man da deinen ursprungs-code, so sieht man das rote element (li), und danach einen langen weißen balken -> danach erst wiederum das nächste li-element -> genau DA ist opera buggy!
durch den einsatz des
child-selektors definiere ich hier für moz/opera einen zusatz, den der ie nicht interpretieren kann -> und dieser zusatz beinhaltet schon für das "normale" li-element die breite!!!
hier der gesamte css-code:
Code:
#menucontainer {
clear:left;
width:955px;
height:18px;
background-color:#342B50;
border-top: 2px solid #FFF;
}
#menu {
margin:0 143px 0 150px;
padding:0;
border-left: 1px solid #FFF;
}
#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
/*html>body #menu ul {
margin: auto;
}*/
#menu ul li {
display:block;
float:left;
text-align:center;
padding:0;
margin:0;
}
html>body #menu ul li { /* gekko und opera */
background-color: white; /* dient zur visualisierung beim testen */
width: 109px;
}
#menu ul li a {
width:109px;
height:16px;
border-right:1px solid #FFF;
border-bottom:none;
padding-top:2px;
color:#FFF;
background:#342B50;
text-decoration:none;
display:block;
text-align:center;
font-size:11px;
}
html>body #menu ul li a {
background-color: Red; /* visualisierung */
}
#menu ul li a:hover {
color:white;
width:109px;
background:#0066CC;
}
.firstmenu {
border-left:1px solid #FFF;
}
der child-selektor ist hier noch nichtmal nötig, einzig und allein folgende definition der breite:
Code:
#menu ul li {
display:block;
float:left;
text-align:center;
padding:0;
margin:0;
width: 109px;
}
der ie und mozilla stoßen sich nicht daran, und dem opera hilft es
das letzte problem, dass der opera 5 noch hat, ist, dass die einzelnen li-elemente den rahmen (weiß) nicht haben - dass musst du dir noch anschaun!
hier die entgültige lösung, das kannst getrost kopieren:
Code:
#menucontainer {
clear:left;
width:955px;
height:18px;
background-color:#342B50;
border-top: 2px solid #FFF;
}
#menu {
margin:0 143px 0 150px;
padding:0;
border-left: 1px solid #FFF;
}
#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menu ul li {
display:block;
float:left;
text-align:center;
padding:0;
margin:0;
width: 109px;
}
#menu ul li a {
width:109px;
height:16px;
border-right:1px solid #FFF;
border-bottom:none;
padding-top:2px;
color:#FFF;
background:#342B50;
text-decoration:none;
display:block;
text-align:center;
font-size:11px;
}
#menu ul li a:hover {
color:white;
width:109px;
background:#0066CC;
}
.firstmenu {
border-left:1px solid #FFF;
}
hier der
lebende beweis - schau dir das mit dem opera an!
*auf lösung gespannt bin*
