FF3 Problem mit <ul> Hintergrund und <li>
byti
- css
Hallo Leute
Entweder hab ich einen Denkfehler oder ich kapierst halt wider mal ned. Ich hab hier ein Desing mit UL und LI zum darstellen von Forumsbeiträgen. Das Problem ist.. beim IE6 zb... wirds korrekt angezeigt. Beim FF3 siehts so aus als währen die LI undurchsichtig. Es sind aber keine Farben oder ähnliches angegeben. Habs schon auf ein minimum reduziert.. aber ich bekomms ned weg. Das ganze is eigentlich eine fauxcolums konstruktion. Das eingebundene gif is ein 2000px mal 1px, die ersten 300px transparent, der rest ein Farbverlauf. Kann jemand zufällig auf den ersten Blick sehen was da faul sein könnte? Bin mittlerweile CSS-Blind. ;)
Danke...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>Sans Titre</title>
</head>
<style type="text/css">
<!--
ul.Line {
position: relative; height: 100%;
margin: 0px 0px 0px 0px; border-top: 1px solid #9c9d9c; padding: 0px 0px 2px 0px;
clear: left;
background: url(row_bg_board.gif) repeat-y 15% 0;
font-size: 11px;
}
li.LineLeftBoard {
width: 15%; min-height: 16px; z-index: 10;
margin: 0px 0px 0px 0px; padding: 4px 1% 4px 1%;
float: left;
list-style: none;
vertical-align: middle;
}
li.LineRightBoard {
width:80%;
min-height: 16px; z-index: 11;
margin: 0px 0px 0px 0px; padding: 4px 1% 4px 1%;
list-style: none;
float: left;
}
-->
</style>
<body>
<ul class="Line">
<li class="LineLeftBoard">
10.07.2008 17:36
<br /><b>ADMIN
</b>
<br />Superadmin
<br />
<br />Beiträge: <a href="index.php?mod=board&action=ranking">2</a>
<br />Rang: <a href="index.php?mod=board&action=ranking">Junior Member</a>
</li>
<li class="LineRightBoard" id="">
asdfasdfa
</li>
</ul>
</body>
</html>
Hat wohl auch nicht direkt was mit den LI zu tun... hab mal alles als div gemacht, das gleiche Problem. Ja spinn ich jetzt? :) Man sieht nur die 4px oben vom padding die grafik.... der rest ist weis. ?!!?
Hi byti!
Ja spinn ich jetzt? :)
Weiß ich nicht.
Aber du solltest wissen, dass ein von "none" abweichender float-Wert das Element aus dem Fluss nimmt. Logischerweise wird das ul dann auf seine Minimalhöhe reduziert.
Ein Lösungsansatz wäre einem letzten Kindelement von ul ein clear:both; mitzugeben.
Du könntest dem ul auch eine definierte Höhe geben. 100% ist in diesem Kontext wirkungslos.
Überdenke und validiere bitte auch deinen Quellcode.
Wozu sind z. B. die Zeilenumbrüche da?
MfG H☼psel
Ja spinn ich jetzt? :)
Weiß ich nicht.
Meine Frau sagt ja. :)))
Aber du solltest wissen, dass ein von "none" abweichender float-Wert das Element aus dem Fluss nimmt. Logischerweise wird das ul dann auf seine Minimalhöhe reduziert.
Spitze.. das war schon mal der Kick in die richtige Richtung.. jetzt passiert auch was. Komisch nur das der IE6 und FF2 richtig anzeigen.
Überdenke und validiere bitte auch deinen Quellcode.
Wozu sind z. B. die Zeilenumbrüche da?
Also ich muss zu meiner Entschuldigung sagen, normal mach ich eher die PHP-Logik. Design hab ich früher viel gemacht (da waren tabellen noch chic). Der grundsätliche Code kommt aus der Lansuite (lansuite.orgapage.net) Ich.. bzw. wir sind grad dabei das Teil generalzuüberholen. (u.a. Lanunabhängiges Framework machen) Ein rießiges Projekt mit allen typischen Opensource-Krankheiten aber auch ziemliche Stärken. Ua. is das Design ziemlich im A****. Das Codefragment hier kommt aus dem Board (Beitrag). Siehe lansuite.orgapage.net. wobei da immer noch der ganz alte code drauf is. Ein paar sachen hab ich schon gefixt. Die Zeilenumbrüche sind einfach nur dafür da, das Admin, Datum, etc links untereinander angezeigt werden. Leider is das grundsätlich ned besonders ausgegoren.. aber erstmal versuche ich grundlegende Fehler zu fixen, das die User eine Benutzbare Oberfläche bekommen. Dann wirds noch mal komplett saniert.
Also falls einem Designer langweilig is..... von der Sorte (also einen richtig Standfesten) hamma leider keinen im Team. :) Danke nochmal für den Wink.. bringt mich schon weiter.