layout ohne table

[neuroleptika]

das wichtigste habe ich vergessen: :???:

ul:after {
display: block; /*nicht none*/
content: ".";
[COLOR="DarkRed"][B]clear: both;[/B][/COLOR]
height: 0;
visibility: hidden;
}

 

[Junny]

Wenn das zu viel OT ist, könnte ein Moderator das bitte splitten? Ist ja ein wichtiges Thema.

Hehe, so ist das manchmal.
Habs mal probiert und überraschend festgestellt, dass es tatsächlich ul:after und nicht ul li:last-child:after heißen muss. Bei der Kombination :after/content wird der jeweilige Inhalt also ans Ende des entsprechenden Elements, aber in dieses hinein eingefügt. Denn ein clearendes Blockelement nach der Liste würde diesen Effekt ja nicht erzeugen.
Trotzdem geht das Ganze leider nicht im IE - weder bei Version 6 noch bei Version 7. Da das Clearen unter Umständen sehr wichtig sein kann, um Inhalte lesbar zu halten, kommt ein Javascript-Workaround wohl nur in Frage, wenn bei deaktiviertem Javascript das ganze Layoutstylesheet versteckt wird.

Gruß
Junny

 

[neuroleptika]

IE7 kennt :after nicht.

Für den IE muß die <ul> nur Layout haben.
Die Floats werden dann eingeschlossen und <ul> spannt sich auf. Als ob es ein clear geben würde.
Nur für IE bis Vers.7:

ul {
zoom: 1;
}

Nur für IE5:

ul {
height: 1px;
}

 

[Junny]

*zonk*

Habe versucht, mit display: block; Layout zu geben, das hat nicht geklappt.

Vielen Dank für diese Infos!

Gruß
Junny

 

[neuroleptika]

display: block löst kein layout aus.
http://onhavinglayout.fwpf-webdesign.de#prop

id="liste" ist ul:

  #liste {
background-color: #5B5B5B;
}

  #liste:after {
display: block;
content: ".";
clear: left;
height: 0;
visibility: hidden;
}

#liste li {
float: left;
}

/*IE7 layout*/
* +html #liste {
min-height: 0;
}
/*IE5 - 6 layout*/
* html #liste {
height: 1px;
}

 

[Bit2_Gosu]

mein hauptproblem war wohl, dass ich von clear gar nichts wusste..