horizontales Menü und Opera 7.54

[Mel]

Hallo,

ich habe ein Problem mit Opera 7.54.

----------------------------------------------------------------
HTML:

<ul>
<li><a  href="#">beispiel</a></li>
<li><a  href="#">beispiel</a></li>
<li><a  href="#">beispiel</a></li>
<li><a  href="#">beispiel</a></li>
<li><a  href="#">beispiel</a></li>
</ul>

----------------------------------------------------------------

CSS:
ul {
list-style-type: none;
}

ul li {
display: inline;
}

ul li a {
border: #ccc 3px solid;
background: #004B88;
padding: 5px 12px;
float: left;
font-size: 0.8em;
color: #ccc;
text-decoration: none;
margin: 0 0 0 10px;
}

-->

Erzeugt wird ein horizontales Menü.
Der Opera jedoch bricht nach jedem gefloateten <a>-Element um.
Ich kann das nur unterbinden indem ich dem <ul> eine feste Breite zuweise. Äußerst ungünstig bei dynamischen Inhalten..

Kennt ihr diese Problematik?
Wäre sie irgendwie zu lösen?

Vielen Dank,
Melanie

[wahsaga]

hi,

ul li {
display: inline;

ul li a {
float: left;

Warum hast du die A gefloatet - und nicht die LI?

gruß,
wahsaga

[Mel]

hi,

ul li {
display: inline;

ul li a {
float: left;

Wegen den hover-effekten, die auch für den IE funktionieren sollen..die habe ich hier nicht extra gepostet also die hover und focus/active-Effekte.

Ausserdem..ich hab gerade die li´s gefloatet ..aber das ist dem Opera genauso egal ;(

[Ingo Turski]

Hi,

Wegen den hover-effekten, die auch für den IE funktionieren sollen..

und wieso sollten die nicht auch so funktionieren - ganz ohne float?
Alle Elemente sind doch inline und haben keine Breitenangabe, wozu dann noch float?

freundliche Grüße
Ingo

[Mel]

Alle Elemente sind doch inline und haben keine Breitenangabe, wozu dann noch float?

hmmm. Die IE´s (also 5.0.6.0) interpretieren dann halt padding-top und padding-bottom nicht mehr...

aber ok das könnte ich mit ensprechenden css ja wieder korrigieren speziell für die IE´s.

Danke Ingo ;)

[wahsaga]

hi,

Alle Elemente sind doch inline und haben keine Breitenangabe, wozu dann noch float?

hmmm. Die IE´s (also 5.0.6.0) interpretieren dann halt padding-top und padding-bottom nicht mehr...

height:1%; - sorgt für "hasLayout", und damit dürfte der IE auch das padding bei diesen Inline-Elemente wieder korrekt umsetzen.

aber ok das könnte ich mit ensprechenden css ja wieder korrigieren speziell für die IE´s.

Da sie inline sind, hat height in korrekten Browsern eh keine Auswirkung - kann also auch im "normalen" CSS verbleiben.

gruß,
wahsaga

[Mel]

height:1%; - sorgt für "hasLayout", und damit dürfte der IE auch das padding bei diesen Inline-Elemente wieder korrekt umsetzen.

aber ok das könnte ich mit ensprechenden css ja wieder korrigieren speziell für die IE´s.

Da sie inline sind, hat height in korrekten Browsern eh keine Auswirkung - kann also auch im "normalen" CSS verbleiben.

Wow. das habe ich noch gehört- und funktioniert im IE 5.0 tatsächlich klasse. Aber nicht im IE 6! Müsste der in den Quirksmodus versetzt werden? Das geht in meinem Projekt zwar nicht..

also werde ich wohl um special css doch nichht herumkommen ? Schade..

[wahsaga]

hi,

Wow. das habe ich noch gehört-

hasLayout ist eine ebenso faszinierende wie bescheuerte Microsoft-Erfindung :-)

und funktioniert im IE 5.0 tatsächlich klasse. Aber nicht im IE 6!

Für den IE 6 könntest du es noch mit zoom:1; probieren.
(Und es ggf. in Conditional Comments "vestecken", wenn du das Gemecker des Validators unterdrücken willst.)

gruß,
wahsaga

[Mel]

hasLayout ist eine ebenso faszinierende wie bescheuerte Microsoft-Erfindung :-)

aber löst tatsächlich diese padding-Probleme im IE 5.0. Hach. Das ist echt...cool. ;)

Für den IE 6 könntest du es noch mit zoom:1; probieren.
(Und es ggf. in Conditional Comments "vestecken", wenn du das Gemecker des Validators unterdrücken willst.)

zoom:1 funktioniert. Kommt in die CC und gut ist es ;)

Wieder viel wertvolles gelernt heute.

Vielen lieben Dank ;) !!!

Mel

[wahsaga]

hi,

zoom:1 funktioniert. Kommt in die CC und gut ist es ;)

Dann packe das height:1% für die 5er-IEs sicherheitshalber auch noch da mit rein - IIRC bekommt sonst der Mac-IE wieder Probleme, der height auch für inline-Elemente wörtlich interpretiert.

gruß,
wahsaga

[Mel]

hi,

zoom:1 funktioniert. Kommt in die CC und gut ist es ;)

Dann packe das height:1% für die 5er-IEs sicherheitshalber auch noch da mit rein - IIRC bekommt sonst der Mac-IE wieder Probleme, der height auch für inline-Elemente wörtlich interpretiert.

Also ich teste auch auf IE Mac und der schluckt  das anstandslos.

Aber ich werde es zur Sicherheit trotzdem verstecken.

Noch was zu dem height:1%.
Ich hab u.a. auch headlines mit links
also sowas:

<h2><a href="#">headline mit link</a></h2>

das css dazu:

h2 a {
text-decoration: none;
margin: 0 0 0 -10px;
background: url(/img/link.gif) 0 50% no-repeat;
padding: 0 0 0 12px;
}

h2 a:focus,
h2 a:active {
background: #eaeaea url(/img/link.gif) 0 50% no-repeat;
}

der IE 5 stellt das natürlich etwas unschön dar- wegen dem padding.
also hab ich mir gedacht löse das gleich mal mit dem tollen hashlayout ;)

also

h2 a {
text-decoration: none;
margin: 0 0 0 -10px;
background: url(/img/link.gif) 0 50% no-repeat;
padding: 0 0 0 12px;
height: 1%
}

Das klappt zwar mit den Innenabständen und die Hintergrundbilder sehen toll aus aber das gesamte h2 weitet sich aus mit (unerklärlichen Abständen nach unten).

Kann ich mir jetzt gerade nicht erklären warum das so ist?

[Mel]

Sorry, das hier hab ich vergessen, das css zu h2 sieht dann so aus:

h2 {
font-size: 1em;
font-weight: bold;
color: #036;
background: url(/img/headerh2.gif) 0 0 no-repeat;
margin: 20px 20px 15px 2px;
padding: 0 0 0 15px;
}