|
|||
![]()
Hallo,
leider muss ich mal wieder die Hilfe der Profis anfordern.... Dies ist eigentlich ein altes Problem auf meiner Webseite, welches ich dachte gelöst zu haben. Ab leider scheint es nicht so! Der Eintrag im Stylesheet display: block; verschiebt mir alle Absätze unter die linke Spalte, welches mit display: inline; behoben werden kann, aber dann überlappen die Bilder wieder mit den ihnen folgenden Absätzen! .clearfix:after { content: "."; display: inline; height: 0; clear: both; visibility: hidden; } Das komische daran ist nur, dass dieses Problem "nur" (habe nur IE & MOZ) im Mozilla und nicht im IE sichtbar ist. Es scheint als die Ausnahme die Regel bestätigt, den bei den Problemen die ich bis jetzt hatte war es immer umgekehrt. Beispiel unter: http://www.tidakapapa.com/team.php Im voraus wie immer danke an alle die mir meistens mit Ihren guten Ratschlägen aus der Klemme geholfen haben und nicht unwesentlich zum gelingen meiner Webseite begetragen haben. MfG ![]() NB: Suche tauchenden & motivierten Webdesigner der meine Webseite resp. das Stylesheet umgestaltet und dafür GRATIS eine Woche im Komodo National Park tauchen möchte (Gegenwert 1120US$ ohne Flug) |
Sponsored Links |
|
|||
![]()
IE/Win versteht dieses :after nicht. Er erzeugt für jeden Container, der eine Dimension (haslayout) hat, sowieso etwas wie einen eigenen Clearing (oder Block Formatting -) Context. Das heißt, dass ein Float im IE durch das bloße Setzen einer Weite im Container schon eingeschlossen wird. Jedes Clear bleibt darüber hinaus auch nur innerhalb dieses Kontexts wirksam. Deswegen hast du auch kein Problem im IE.
In Browsern, die der Spezifikation folgen, wird ein solcher Block Formatting Context aber nur durch das Setzen von - float:left/right, - display:table-cell, - display:inline-block und - overflow:hidden/auto/scroll erzeugt. Das clear im clearfix wirkt also in deiner Seite auch auf die linke Sidebar, was völlig korrekt ist. Ein clear kann darüber hinaus nur von Elementen auf block level wirken , deswegen ist das Setzen auf display:inline grober Unfug; es wird nichts mehr gecleart. Also zurück auf block level damit. In deiner Seite ist die Lösung nicht ganz einfach, weil der mittlere Container pixelgenau auf die Sidebars treffen muss, border auf border. Ein neuer Block Formatting Context würde diese border aber nebeneinander stellen. Ich schlage vor, dass du eine Zwischenebene einziehst, einen inneren Wrapper #clearcontext, und die Ausrichtung #main-copy überlässt Code:
<div id="main-copy"> <div id="clearcontext"> ... - Firefox hat noch immer bugs mit overflow:hidden und versteht kein display:inline-block; - IE-Mac versteht display: table-cell nicht immer richtig, und benötigt für floats eine Weitenangabe, die wir in deinem Design aber nicht liefern können; - IE/Win versteht das alles nicht und macht Blödsinn, selbst float:left müssten wir in deinem Fall unsichtbar machen. Deshalb schlage ich vor, allen modernen Browsern Code:
#clearcontext {display: table-cell; } Code:
* html>body #clearcontext {display: inline-block; } (läuft in IE/Win, IE/Mac, Safari, Opera, Fx). </laber> |
Sponsored Links |
|
|||
![]() Zitat:
Hallo IChao, das habe ich jetzt richtig verstanden, der IEMac versteht den CHILD-Selector und natürlich den IE-STAR-Hack? Nun da Du es schreibst gehe ich davon aus dass dies der Interpretion des IEMac entspricht, dies ist ein HighLight für mich, da es mir bisher so nicht bekannt war. DANKE dafür...
__________________
</ulle> |
|
|||
![]()
Sowas macht mich immer unsicher. Also besser noch mal bei Philippe nachgeguckt: ja.
Wie zaubert man auf deekees Seite eigentlich in Opera die bullets wieder weg? Wahrscheinlich muss man vorher die animierten Gifs löschen ... ![]() |
|
|||
![]() Zitat:
Doch Vorsicht ![]() Eine Deklaration eines umschliessenden Containers mit der Eigenschaft [display: table-cell;] ist nicht Wertneutral, d.h. es verhindert auch evtl. gewünschte [margin] Values und [width: auto;]. So zumindest im FF1.5. 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" 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; /* Tabellen */ border-collapse:collapse; border-spacing: 0; } div { display: table-cell; margin: 5em ; border: 1px solid #000000; padding: 1em; background-color: #FFFFFF; font-size: .8em; } p { float: left; height: 5em; width: 20em; background-color: #FF0000; } /*]]>*/ </style> </head> <body> <div class="containing-float"> CSS [float: left;] </p> CSS [display: table-cell;] </div> </body> </html> Code:
.containing-float:after { /* Inhalt pseudo-Element :after; * somit [clear] moeglich */ content: "."; /* [content] verbergen; */ visibility: hidden; height: 0; /* Block-Level fuer [clear]; */ display: block; /* [float] clearing; * einbeziehen der Float-Container; */ clear: both; } .containing-float { /* nur IE-Mac; * wird folgend ueberschrieben */ display: inline-table; /* fuer alle Browser; * * verbergen IE-Mac \*/ display: block; /* ende verbergen IE-Mac */ /* fuer alle Browser; */ height: auto ! important; /* nur fuer IE-Win; * definierte groeße (height or witdh) * fuer automatisches einbeziehen * der Float-Container (auto-clearing); * * verbergen IE-Mac \*/ height: 1%; /* ende verbergen IE-Mac */ } Code:
<div class="containing-float"> CSS [float: left;] </p> CSS [/*display: table-cell;*/] </div>
__________________
</ulle> |
|
|||
![]()
Zuerst mal Danke an Alle die sich hierzu geäussert haben......
Leider habe ich keine Emails mehr gekriegt, dass ein neuer Eintrag eingegangen ist und darum habe ich eine prompte Antwort verpasst!! Warum weis ich leider nicht! Werde mich in nächster Zeit dieser Sache wieder einmal annehmen und mal alles durchlesen und pro"BIER"en es zu verstehen! Echt, taucht denn wirklich keiner von Euch? Nochmals vielen Dank, im speziellen an Ulle, welcher schon öfter ein Retter in der Not war.
__________________
MfG ![]() |
|
|||
![]()
Mein letzter Tauchversuch stammt von meiner Seepferdchenprüfung und gehörte da gar nicht rein. Also bin ich als Retter unbrauchbar.
Überhaupt frage ich ich, was ich hier eigentlich herumfasele und ob das, was ich schreibe, wirklich so schwer zu verstehen ist. Zitat:
|
|
|||
![]() Zitat:
Per :after klebt der clear am Gesäß des Containers und cleart nun mal jedes vorhergehende float von der Unterkante des Containers aus. http://www.satzansatz.de/xforum/clearfixproblem.html Aber eigentlich wollte man doch bloß den inneren float umschließen, und sich nicht auf die Länge der Umgebung beziehen. Vegleicht man nun IE6 mit Fx, Opera&Co, so ist das auch keine gute Simulation des Verhaltens vom IE6. Jeder Lösungsansatz hat seine Schwächen, wenn es darum geht, etwas so aussehen zu lassen, wie IE es tut. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <style type="text/css"> .containing-float:after { ... } .containing-float { ... } p {background: blue; float: left; height:50px; } .sidebar { float: left; width:150px; height:500px; background: yellow; } .containing-float {background: gray; border:1px solid fuchsia;} </style> </head> <body> <div class="sidebar">sidebar</div> <div class="containing-float">containing float contained float</p> </div> </body> </html> |
|
|||
![]()
@Ingo
In der Tat ![]() Ich muß zugegeben dass ich Deine Problemstellung erstmal gar nicht verstanden hatte. Ein "ungewolltes" CLEAR auf die Sidebar! Das diese CLEAR-Class in meinen Layout-Vorstellungen bisher alles hinbekommen hatte empfand ich sowieso verdächtig, deshalb propagiere ich diese ja bei jeder Gelegenheit um andere Blickwinkel zu erfassen. DANKE ________ Wie würdest Du denn Deine Problemstellung Cross-Browser auszeichnen? Table-Cell als Block Formatting Context wäre hier wohl auch nicht angemessen, da ja dann die volle Breite des BODY nicht genutzt wird.
__________________
</ulle> |
Sponsored Links |
|
|||
![]()
Ich weiß es nicht. Mein Ansatz mit der table-cell benötigte ja einen inneren wrapper, da table-cell auf den eigentlich in Frage stehenden Container ja die von dir beschriebenen Nebenwirkungen auf die Umgebung hat. Vielleicht gibt es keine ideale Lösung.
Vor einiger Zeit machte ja die overflow:hidden Methode Furore: einfach dem Container zuordnen und peng - alle floats sind drin eingesperrt. Bis dann die Nörgler kamen und sagten, dass der schöne Firefox immer dann, wenn andere Elemente von außerhalb solche overflown-Bereiche überlappen (z.B. ein Flyout oder Drop-Down-Menü), sehr unschöne Verschiebungen zeigt. Noch mehr Nörgler kamen und sagten, dass overflow:hidden vor IE5.xWin+Mac verborgen werden muss und man am Ende genauso viele Hacks braucht wie bei anderen Lösungen. Sicher wird es das Gleiche hin- und her geben bei display:table-cell. Dies nur als ein Beispiel. Die clearfix-Methoden mit dem clear:after sind das Beste, was wir haben, denke ich auch, aber auch sie haben offensichtlich Nebenwirkungen. Georg und Philippe haben sich mal die Mühe gemacht und einige Techniken unter dem Gesichtspunkt untersucht, inwieweit sie geeignet sind, das Verhalten von IE zu simulieren. http://www.gunlaug.no/contents/wd_example_01.html http://dev.l-c-n.com/IEW/simulations.php Nicht das ich die Details alle verstehen würde. Georg kommt zudem am Ende zu einem interessanten Vorschlag, den ich noch gar nicht ausprobiert habe: http://www.gunlaug.no/contents/wd_example_01_06.html Ed: ein wirklich sehr interessanter Vorschlag... |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navi funzt micht richtig | Miso | CSS | 21 | 28.04.2009 15:57 |
background-image mit Annimation funzt nur im IE richtig ? | arnibe | CSS | 1 | 03.11.2005 09:38 |
boxmodell funzt nicht richtig | chrimp | CSS | 4 | 27.06.2005 08:52 |
padding funzt net so richtig im Firefox | big-a | CSS | 12 | 25.05.2005 14:32 |
Mittig ausrichten. Funzt weder im IE noch im Moz richtig | Nils | CSS | 10 | 04.02.2005 18:56 |