Hallo,
ich habe ein Menü mit 'Tabs' gebastelt, welches in Firefox und IE korrekt dargestellt wird, aber in Opera gibt es ein Problem. Die Tabbutton-Reihe ist in einem Div(buttonframe) mit overflow:visible.
Der aktive tab-button verlängert seine Fläche nach unten, bis er auf den Rahmen des Tabs stößt. Aber Opera vergrößert die Höhe des Buttonframes einfach mit, sodass dann das ganze layout verschoben wird und aktiver button + tab nicht mehr zusammentreffen.
wie das aussieht, könnt ihr auf dem bild im Anhang sehen.
Hier folgt jetzt noch der CSS-Code für buttons und buttonframe (frame ist ein div, buttons sind div mit a drinnen):
Im Prinzip scheint mein Problem ungefähr das zu sein, was auf http://css-tricks.com/the-css-overflow-property/ unter 'float clearing' beschrieben wird. Allerdings nutze ich gar kein Float an der stelle...
Kann mir bitte jemand von euch helfen?
ich habe ein Menü mit 'Tabs' gebastelt, welches in Firefox und IE korrekt dargestellt wird, aber in Opera gibt es ein Problem. Die Tabbutton-Reihe ist in einem Div(buttonframe) mit overflow:visible.
Der aktive tab-button verlängert seine Fläche nach unten, bis er auf den Rahmen des Tabs stößt. Aber Opera vergrößert die Höhe des Buttonframes einfach mit, sodass dann das ganze layout verschoben wird und aktiver button + tab nicht mehr zusammentreffen.
wie das aussieht, könnt ihr auf dem bild im Anhang sehen.
Hier folgt jetzt noch der CSS-Code für buttons und buttonframe (frame ist ein div, buttons sind div mit a drinnen):
HTML:
<div class="buttonframe">
<div class="button"><a>login</a></div>
<div class="button"><a>register</a></div>
<div class="button"><a>help</a></div>
</div>
Code:
.buttonframe{
margin-left:65px;
height:20px;
width:1085px;
padding:7px 5px 4px 40px;
background-color:#000;
z-index:9600;
border:1px solid #47c;
border-bottom:none;
overflow:visible;
border-radius:7px 7px 0 0;
-moz-border-radius:7px 7px 0 0;
}
.button{
display:inline-block;
}
.button a{
display:block;
margin:0 5px;
border:1px solid #47c;
z-index:9750;
padding:7px 8px 5px 8px;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}Im Prinzip scheint mein Problem ungefähr das zu sein, was auf http://css-tricks.com/the-css-overflow-property/ unter 'float clearing' beschrieben wird. Allerdings nutze ich gar kein Float an der stelle...
Kann mir bitte jemand von euch helfen?
