Opera und floats...

[Der fette Mo]

Guten Tag allerseits,

ich habe ein etwas komisches Problem mit Opera.

HTML:

<ul>
<li><a href="..." rel="author">Impressum</a></li>
<li><a href="..." rel="copyright">Copyright</a></li>
<li><a href="..." rel="contents">Sitemap</a></li>
<li><a href="...">Datenschutz</a></li>
<li><a href="..." rel="help">Kontaktformular</a></li>
</ul>

...und CSS:

#footer ul {
 margin-left: -15px;
 padding: 6px 0;
 background: url(../images/links.png);
}

#footer li {
 border-left: 4px #FC3C3B solid;
 float: left;
 width: 129px;
 list-style: none;
 text-align: center;
}

#footer li:first-child {
 border-left: none;
 width: 127px;
}

#footer li+li+li+li+li {
 float: none;
}

Herauskommen sollte dabei so etwas:

Impressum | Copyright | Sitemap | Datenschutz | Kontaktformular

Obwohl genügend Platz wäre, da die Liste 660px breit ist, wird das letzte Listenelement von Opera in die nächste Zeile geschoben. FF und IE stellen die Liste korrekt dar.

Hat jemand von euch eine Lösung?

Gruß,
Der fette Mo

[doni]

Hallo fetter Mo

Obwohl genügend Platz wäre, da die Liste 660px breit ist, wird das letzte Listenelement von Opera in die nächste Zeile geschoben.

Ich habe das ganze nicht ausprobiert aber mit einer simplen Kalkulation schaut es ganz so aus, ob 660px nicht genug breit wären:

5x 129px = 645px
5x 4px   =  20px
----------------
           665px

Dann kann man nochmals 4px abziehen, da first-child ja keinen Rahmen links hat, dann hast du aber immernoch 1px zuviel, wenn ich das richtig sehe.

Aber so wies aussieht (habs jetzt doch schnell ausprobiert) liegt das Problem bei der letzten CSS-Angabe:

#footer li+li+li+li+li {
 float: none;
}

Wenn ich die auskommentiere funktionierts super in Opera + FF.

Gruss
doni

[yetanotheruser]

Da ist noch ein negatives Margin von 15px. Damit sollte der Platz reichen.

Gruß Ben

[Der fette Mo]

Hallo doni,

Ich habe das ganze nicht ausprobiert aber mit einer simplen Kalkulation schaut es ganz so aus, ob 660px nicht genug breit wären:

5x 129px = 645px
5x 4px   =  20px

665px

Dann kann man nochmals 4px abziehen, da first-child ja keinen Rahmen links hat, dann hast du aber immernoch 1px zuviel, wenn ich das richtig sehe.

:first-child hat eine kleinere Breite (127px) zugewiesen bekommen. Es ist also sogar noch ein Pixel übrig.

Aber so wies aussieht (habs jetzt doch schnell ausprobiert) liegt das Problem bei der letzten CSS-Angabe:

#footer li+li+li+li+li {
float: none;
}

Wenn ich die auskommentiere funktionierts super in Opera + FF.

Ich weiß. Diese Angabe brauche ich aber wegen der Hintergrundgrafik der Liste. (Sonst ist die Liste nämlich nur so hoch wie der padding-Wert und die sich wiederholende Hintergrundgrafik bricht bei der Hälfte ab.) Der Liste eine feste Höhe zuzuweisen geht in diesem Fall leider auch nicht, weil einerseits der Text skalierbar sein soll, ich aber andererseits den padding-Wert in Pixeln und nicht in em angeben will.

Gruß,
Der fette Mo

[yetanotheruser]

Hoi,

ich würde mal sagen, das ist eine wilde Kombination aus mehreren Faktoren.

Du gibst dem letzten li ein float: none, damit wird es wieder blockartig behandelt ( zumindest im Opera) und erzeugt damit auch eine neue Zeile.

Wozu brauchst du denn überhaupt das float:none für den letzten li Eintrag? Hau den raus und die Liste wird deinen Wünschen entsprechend angezeigt, ob korrekt oder nicht ist eine andere Frage.

Gruß Ben

[Der fette Mo]

Hi,

Du gibst dem letzten li ein float: none, damit wird es wieder blockartig behandelt ( zumindest im Opera) und erzeugt damit auch eine neue Zeile.

Danke für den Tipp. Leider bringt mich ein display:inline aber auch nicht weiter, weil dann der Rand nicht richtig angezeigt wird.

Wozu brauchst du denn überhaupt das float:none für den letzten li Eintrag? Hau den raus und die Liste wird deinen Wünschen entsprechend angezeigt, ob korrekt oder nicht ist eine andere Frage.

sh. meine Antwort auf donis Beitrag

Gruß,
Der fette Mo

[yetanotheruser]

Wozu brauchst du denn überhaupt das float:none für den letzten li Eintrag? Hau den raus und die Liste wird deinen Wünschen entsprechend angezeigt, ob korrekt oder nicht ist eine andere Frage.

sh. meine Antwort auf donis Beitrag

Dann verpass dem ul ein overflow:hidden, wenn du das unbedingt so brauchst.

Gruß Ben