|
|||
![]() Zitat:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic"> /*<![CDATA[*/ * { margin: 0; padding: 0; } .containing-float-particular { /* fuer alle Browser; * Block Formatting Context (~auto-clearing) * * 9prev1, Safari & IE/Mac */ display: inline-table; /* fuer alle Browser; * Block Formatting Context (~auto-clearing) * * Moz/Firefox, Opera 8.50 & Safari */ overflow: auto; } * html .containing-float-particular { /* nur fuer IE-Win; * Dimension (~ auto-clearing); * * verbergen IE-Mac \*/ height: 0; /* ende verbergen IE-Mac */ /* nur fuer IE; */ overflow: visible; } /*---------------------------------------*/ .floater { float: left; background-color: #99CCFF; } #sidebar { float: left; width: 10em; height: auto !important; height: 30em; min-height: 30em; background-color: #FFFF00; } #main { background-color: #FFCC99; } #wrap { background-color: #DDDDDD; } #column { float: right; width: 10em; height: auto !important; height: 15em; min-height: 15em; background-color: #33CC33; } /*]]>*/ </style> </head><body> <div id="sidebar" class="containing-float-particular"> [#sidebar] <p class="floater"> [.floater] </p> </div> <div id="wrap" class="containing-float-particular"> <div id="column" class="containing-float-particular"> [#column] . . . . . . . . . . . . . . <p class="floater"> [.floater] </p> </div> <div id="main" class="containing-float-particular"> [#main] <p class="floater"> [.floater] </p> </div> [#wrap] after floating elements <p class="floater"> [.floater] </p> </div> <p class="floater"> [.floater] </p> </body></html>
__________________
</ulle> |
Sponsored Links |
|
|||
![]()
Irgendwer hat diesen Thread verschoben...
Ulle, ich habe deinen Test mal genommen und Georgs Original-Vorschlag eingesetzt. Ging nicht gut in Safari, Opera und IEMac. Das Problem war: - nur IEMac wollte das inline-table sehen, die anderen bis auf Fx konnten es nicht gut ab. - IEMac wollte die Einträge "[#sidebar]" usw. in </p> gestellt wissen - IEMac mochte height: auto !important; in #sidebar nicht und ließ den Sidebar kollabieren. Habe ich jetzt mal ganz rausgenommen, was den Test natürlich verändert. - IE6 zeigt den 3px text jog zu beiden Seiten des #main Containers wie erwartet. Habe ich nicht angefasst, sollte aber mit negativen -3px korrespondierenden margins für #sidebar und dir rechte #column gehen. live: http://www.satzansatz.de/xforum/cleartest2.html Sieht gleich aus hier in Safari2.02 / IEMac5.2.3 / Fx1.5 / Opera8.01-Opera9TP1 /IE6 Andere nicht getestet. Ed: Toll, aber eigentlich ist das jetzt auch nur ein overflow:auto für alle und was anderes für die IE's. Ich glaube einfach nicht, dass es den ultimativen floatcontainer oder floatclearer gibt. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>cleartest2</title> <style type="text/css" media="screen,projection"> /*<![CDATA[*/ * { margin: 0; padding: 0; } .contain { overflow: auto; } * html .contain { height: 0; overflow: visible; } /*\*//*/ * html .contain { display: inline-table; height: auto; } /**/ /*---------------------------------------*/ .floater { float: left; background-color: #99CCFF; } #sidebar { float: left; width: 10em; height: 30em; min-height: 30em; background-color: #FFFF00; } #main { background-color: #FFCC99; } #wrap { background-color: #DDDDDD; } #column { float: right; width: 10em; height: auto !important; height: 15em; min-height: 15em; background-color: #33CC33; } /*]]>*/ </style> </head><body> <div id="sidebar" class="contain"> [#sidebar left]</p> <p class="floater">[.floater1]</p> </div> <div id="wrap" class="contain"> <div id="column" class="contain"> [#column right]</p> . . . . . . . . . . . . . . <p class="floater">[.floater2]</p> </div> <div id="main" class="contain"> [#main center]</p> <p class="floater">[.floater3]</p> </div> [#wrap] after floating elements</p> <p class="floater">[.floater4]</p> </div> <p class="floater">[.floater5]</p> </body></html> |
Sponsored Links |
|
|||
![]() Zitat:
Zitat:
![]() Ich denke das ist der Moment den IE-Mac mit dem Netscape 4 auf eine Stufe zu stellen, d. h. für mich kein CSS mehr. Kennt jemand eine Möglichkeit dem IE-Mac das CSS vorzuenthalten? Oder ist Folgendes die einzige Möglichkeit. Gibt es zu dieser radikalen Haltung einwende? Code:
<style type="text/css" media="screen,projection" title="standard-style"> /*<![CDATA[*/ /* fuer alle Browser die * die @import verstehen; * * verbergen IE-Mac \*/ @import url("style.css"); /* ende verbergen IE-Mac */ /*]]>*/ </style> Code:
.containing-float-particular { /* fuer alle Browser; * Block Formatting Context (~auto-clearing) * * Bedingt in eingesetzen Containern * das die Eigenschaft [height] durch * [min-height] ersetzt wird!! */ overflow: auto; } * html .containing-float-particular { /* nur fuer IE; */ height: 0; overflow: visible; } Zitat:
__________________
</ulle> |
|
|||
![]() Zitat:
__________________
</ulle> |
|
|||
![]() Zitat:
__________________
</ulle> |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navi funzt micht richtig | Miso | CSS | 21 | 28.04.2009 16:57 |
background-image mit Annimation funzt nur im IE richtig ? | arnibe | CSS | 1 | 03.11.2005 10:38 |
boxmodell funzt nicht richtig | chrimp | CSS | 4 | 27.06.2005 09:52 |
padding funzt net so richtig im Firefox | big-a | CSS | 12 | 25.05.2005 15:32 |
Mittig ausrichten. Funzt weder im IE noch im Moz richtig | Nils | CSS | 10 | 04.02.2005 19:56 |