3 (!) Float-Probleme im IE6/7 (Float über die Grenzen eines Elements hinaus) @ tutorials.de: Tutorials, Forum & Hilfe

marco12 · 27.09.08 17:59

Gruß an alle CSS-Freunde!

Ich sitze seit nunmehr fünf Stunden an einem Problem, welches, bitte nicht überrascht sein, den Internet Explorer und seine Interpretation der CSS-Eigenschaft float bzw. clear umfasst.

Folgendes Beispiel:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

</head>
<body>

		<div style="position: relative; height: 100px; width: 1024px; margin: 0 auto; background-color: red; z-index: 3;">
			<div style="position: relative; float: right; width: 340px; height: 300px; margin-left: 15px; 
padding-bottom: 20px; background-color: green; z-index: 3;">
			 <p>rechts gefloatete box</p>

			</div>
			<p>TextTextText TextTextTextText TextTextText TextTextTextT extTextTextTe xtTextText TextTextText TextTextText TextTextTextTex tTextTextTe xtTextTextTextTe xtTextTextTextText</p>
		</div>
	<div style="position: relative; width: 1024px; margin: 5px auto; background-color: blue; z-index: 2;">
			<p>TextTextText TextTextTextText TextTextText TextTextTextT extTextTextTe xtTextText TextTextText TextTextText TextTextTextTex tTextTextTe xtTextTextTextTe xtTextTextTextText</p>
	</div>
	<div style="clear: both; width: 1024px; margin: 0 auto; background-color: yellow;">Footer mit clear: both;</div>
			
</body>
</html>

Sorry, dass das CSS einfach so in die Layer geknallt habe, schien mir aber zur Erklärung sinnvoll.

Die drei Probleme sind offensichtlich, wenn man sich die Seite im FF, IE6 bzw. IE7 anschaut: FF macht alles ohne Beanstandung: Das grüne floatende div überragt sein Elternelement und sorgt dafür, dass auch der inline-Inhalt des 2. darunter liegenden divs (blau) die grüne Box umfließt.

Problem 1 im IE6: Das rote Elternelement wird soweit ausgedehnt, dass die gefloatete Box erst gar nicht die Grenzen der selbigen überschreitet, was eine riesige "Lücke" verursacht. Gibt es eine Möglichkeit, den IE6 dazu zu zwingen, die Höhe einzuhalten und den float über das Element hinausgehen zu lassen?

Problem 2 im IE7: Die Grenzen der roten Box werden zwar überschritten, jedoch hat der float keine Wirkung mehr auf die blaue Box, deren Inhalt einfach unter der grünen weiter läuft. Nach CSS-Standard ist das falsch, oder irre ich mich da? Kennt jemand eine Lösung?

Problem 3 im IE7: Die clear-Funktion des Footers scheint komplett ignoriert zu werden, wahrscheinlich da es sich um einen eingebetteten float handelt.

Hat irgendjemand einen Lösungsansatz dafür? Ich habe irgendwo gelesen, dass Problem Nr. 2 gelöst werden kann, indem man auf feste Breitenangaben verzichtet. Das ist aber leider nicht so umsetzbar.

Anyway, ich wäre wirklich sehr erleichtert, wenn mir jemand bei dieser Sache unter die Arme greifen könnte.

MfG
Marco

Maik · 27.09.08 18:21

Hi,

hier liegt seitens des IE6 überhaupt keine Fehlinterpretation der float- und clear-Eigenschaft vor.

Firefox (und alle übrigen standardkonformen Browser) stellen das Konzept zwar so dar, wie du es dir vorstellst, was aber nur an dem Umstand liegt, dass diese Browser die height:100px-Deklaration der roten Box als fixe Höhe behandeln, und aus diesem Grund die darin eingebundene grüne Box mit ihrer 340px-Höhe den unteren Rand des Elternelements um 240px "überlappt".

Der IE6 hingegen behandelt die Höhenangabe als Mindesthöhe, und erweitert die rote Box in der Vertikalen seinem Kindelement entsprechend.

Folglicherweise rutscht die blaue Box in den modernen Browsern nach oben, und im IE6 nach unten.

mfg Maik

marco12 · 27.09.08 18:39

sorry aber das ist so nicht richtig. klar, die blau Box selbst umfließt die grüne nicht. ich sagte "der Inhalt" tut das. Im IE7 ist das nicht der Fall!

Sieh dir doch bitte mal folgende Seite an: http://www.css-technik.de/css-exampl..._beispiel.html Ist das nicht exakt die Situation, die ich beschreibe, bloß dass jenes Beispiel keine festen Breiten verwendet?

2. Ich musste für die erste Box eine Höhe vergeben, da ansonsten selbst der IE7 diese ausdehnen würde. ABER: Laut Definition sollte ein Float, wie übrigens ein absolut positioniertes Element auch, aus dem Textfluss genommen werden. D.h auf Deutsch, dass es für das Elternelement schnurzegal sein sollte, welche Höhe der Float hat. Am Ende des "normalen" Textes sollte daher Schluss sein! Berichtige mich, wenn ich diesen W3C Standard falsch interpretiere.

Meines Erachtens ist das durchaus eine Fehlinterpretation des IE, wenn, wie du selbst sagtest, "standard-konforme Browser sie richtig darstellen".

Wie auch immer, siehst du irgendeinen Weg, das von mir erdachte Layout so umzusetzen und alle Browser mit ins Boot zu holen?

lg, marco

Maik · 27.09.08 18:54

Mit ein paar Umstellungen im Markup und dem dazugehörigen Stylesheet ist die browserübergreifende Umsetzung des Layouts überhaupt kein Problem:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
<style type="text/css">
<!--
#wrapper {
width:1024px;
margin:0 auto;
}
 
#green {
float:right;
width:340px;
height:300px;
padding-bottom:20px;
background:green;
}
 
#red {
margin-right:340px;
background:red;
}
 
#blue {
margin-right:340px;
background:blue;
}
 
#yellow {
clear:both;
width:1024px;
background:yellow;
}
-->
</style>
 
<head>
 
</head>
<body>
 
<div id="wrapper">
     <div id="green">green</div>
     <div id="red">red</div>
     <div id="blue">blue</div>
     <div id="yellow">yellow</div>
</div>
 
</body>
</html>

mfg Maik

marco12 · 27.09.08 19:12

ja das klingt auf den ersten Blick nach einer guten Lösung. Auf den zweiten Blick ist es allerdings nicht machbar. Grund: Mein Layout umfasst nicht nur diese Boxen, die mittig zentriert wurden, sondern auch "Hintergrundstreifen", deren Farben jeweils um 30% der im Vordergrund befindlichen Boxen dunkler sind und somit eine schlichte "ich floate rechts und setze links einen margin-right"-Praxis nicht funktioniert! Ich weiß, die Beschreibung ist äußerst mangelhaft. Deshalb findet sich im Anhang auch ein Screenshot...

Etwas komplizierter, nicht war...die einzige Variante die mir noch einfällt wäre, die rechts floatende Box absolut zu positionieren. Da gebe es dann aber Probleme mit dem Footer. Ist echt verzwickt!

Über einen weiteren Rat würde ich mich freuen!

Gruß
Marco

Maik · 27.09.08 19:45

Ist das der Firefox-Screenshot, der das eingangs vorgestellte Layout in seinem vollständigen Umfang präsentiert?

Ist die Seite irgendwo erreichbar?

mfg Maik

marco12 · 27.09.08 20:01

ja das ist der FF Screenshot. die Seite ist aber bisher nur auf meinem XAMPP Server. Was meinst du? Ist das mit dem IE machbar, ohne zuviel am Markup rumzufummeln?
ach, komplett ist der Ausschnitt nicht. Es gibt drüber noch einen Abschnitt sowie einen Footer, die aber beider hier nicht von Relevanz sind.

glg

Maik · 27.09.08 20:07

Vielleicht kommt dir ja dieses Markup entgegen:

Code :

<div style="width:1024px;margin:0 auto;">
     <div style="position: relative;  background-color: red; z-index: 3;">
          <div style="position: relative; float: right; width: 340px; height: 300px; padding-bottom: 20px; background-color: green; z-index: 3;">
                <p>rechts gefloatete box</p>
          </div>
          <p>TextTextText TextTextTextText TextTextText TextTextTextT extTextTextTe xtTextText TextTextText TextTextText TextTextTextTex tTextTextTe xtTextTextTextTe xtTextTextTextText</p>
     </div>
     <div style="position: relative; background-color: blue; z-index: 2;">
          <p>TextTextText TextTextTextText TextTextText TextTextTextT extTextTextTe xtTextText TextTextText TextTextText TextTextTextTex tTextTextTe xtTextTextTextTe xtTextTextTextText</p>
     </div>
</div>
<div style="clear:both; width: 1024px; margin: 0 auto; background-color: yellow;">Footer mit clear: both;</div>

Wenn nicht, und dir kein Webserver zur Verfügung steht, um dort alles hochzuladen, schlage ich vor, dass du alle erforderlichen Dateien zur vollständigen Darstellung der Seite (HTML, CSS, JS, Grafiken, u.ä) in einem ZIP-Archiv hier hochlädst, damit ich mir das erstmal näher anschauen kann.

mfg Maik

marco12 · 27.09.08 20:19

ok ich kanns versuchen. problem ist dass das eine auf php-basierende Seite ist, die ihre Inhalte aus einer Datenbank bezieht und ich das erstmal in rein-html umbauen muss. gib mir ein paar minuten, ok...danke

Maik · 27.09.08 20:23

Wenn du das auf das Erstellen eines ZIP-Archivs beziehst, lautet mein Tipp: Die Seite, wie bisher gewohnt, auf dem XAMPP-Server im Browser aufrufen, damit die Inhalte aus der DB ins Dokument geladen werden, anschliessend im Menü Ansicht -> Seitenquelltext anzeigen wählen (geht auch mit einem Rechtsklick im Kontextmenü), und diesen dann als HTML-Dokument abspeichern - fertig

mfg Maik

marco12 · 27.09.08 20:41

sorry dass das so lange gedauert hat. aber ich kann daten von meinem kunden nicht so einfach online stellen. deshalb habe ich auch alles, was darauf zurückzuführen ist, löschen müssen.
so, hoffe du kannst hiermit mehr anfangen...

danke für die unterstützung!

lg

Maik · 28.09.08 00:25

Sorry, meine Antwort hat ein wenig länger auf sich warten lassen, da ich zwischendurch Besuch bekommen habe, aber den IEs hab ich nun gezeigt, wer hier der Herr im Hause ist

Das Markup innerhalb der beiden Boxen #intro_out und #main stellt sich nun so dar:

Code :

<div id="intro_out">
        <div id="intro">
                <div id='rightbox'>
                     <h1>Referenzen und Projekte</h1>
                     <p>Unserer jahrzehntelangen Erfahrung kommt Ihnen zu Gute! Lassen Sie sich von unseren umfangreichen Referenzen überzeugen:</p>
                     <ul class="ref_start">
                                ...
                     </ul>
                     <ul class="ref_start">
                                ...
                     </ul>
                     <ul class="ref_start">
                                ...
                     </ul>
                     <ul class="ref_start">
                                ...
                     </ul>
                     <h3>Beispielprojekte</h3>
                     <p>...</p>
                </div>
                [B]<div class="leftBox">[/B]
                     <h1><a href="/profil/">Ihr Bauplanungsbüro</a></h1>
                     <hr />
                     <p>...</p>
                [b]</div>[/b]
                [b]<!--<div class='clear_l'></div>--><!-- auskommentiert, da nicht mehr erforderlich -->[/b]
        </div>
</div>
 
<div id="main">
        <div id='main_space'></div>
        [B]<div class="leftBox">[/B]
             <h1><a href="/leistungen/">Unsere Service-Leistungen</a></h1>
             <hr />
             <p>...</p><br />
             <ul class="leist">
                 ...
             </ul>
             <ul class="leist">
                 ...
             </ul>
             <div class="clear"></div>
        [B]</div>[/B]<!-- ENDE .leftBox -->
</div>

Im Stylesheet habe ich folgende Ergänzungen und Änderungen vorgenommen:

Code :

[b]* html #wrapper {[/b] /* Mindesthöhe in IE6 einrichten */
[b]height:100%;
}[/b]
 
#rightbox {
[B]position:absolute;
right:0;[/B]
[b]/*float: right;*/[/b] /* auskommentiert */
width: 340px;
margin-left: 15px;
min-height: 350px;
padding-bottom: 20px;
background: #dbb541;
z-index: 3;
}
 
[b].leftBox {
margin-right:355px;
}[/b]

mfg Maik

marco12 · 28.09.08 08:30

Hi Maik!

Danke erst einmal für deine Mühen! Leider scheinst auch du keinen anderen Weg gefunden zu haben, als die rechte Box absolut zu positionieren (wie ich das auch bereits in meinem ersten Post festgestellt habe) und damit scheinbar alles gelöst zu haben. Doch angenommen, die nun absolute rechte Box ist länger als die Inhalte der beiden linken, dann "bahnt" sich diese ihren Weg über den Footer hinaus und kein "clear: both" auf der Welt wird helfen, dies in den Griff zu bekommen...

Nun ja, ich nehme an du hast partout keinen Weg gefunden, den float auch noch für den IE lauffähig zu machen. Vermutlich gibt es dieses Mal ja auch einfach keinen Hack. Man das ist schon wieder sowas von frustrierend

Gut, dann versuche ich mal irgendwie das Footer Problem zu lösen...danke für deinen Einsatz Maik!

glg
Marco

Maik · 28.09.08 10:51

Moin,

grundsätzlich würde es schon mit dem Float hinhauen, so wie es dein verlinktes Beispiel veranschaulicht, und ich in meinem gestrigen Vorschlag zuvor in Post #8 auf deinen eingangs gezeigten Code-Snippet umgesetzt habe.

Demnach dürfen die DIVs #intro und #main keine Angabe zur Breite besitzen, und beide Boxen müssen sich mit der zu umfliessenden rechten Box in einem übergeordneten DIV befinden (bei dir #intro_out), damit deren Inhalte in beiden IE-Versionen die rechte Box umfliessen.

Diese einzige funktionstüchtige Float-Technik scheitert aber in deinem vollständigen Seitenkonzept an dem orangefarbenen Streifen, der als Hintergrundbild von #intro_out über die gesamte Fensterbreite die beiden Boxen #intro und #main voneinander trennen soll, diese sich aber wie gesagt in ihm befinden müssten.

mfg Maik

marco12 · 28.09.08 11:00

moin zurück

Ja du hast natürlich Recht. Das Layout erlaubt nun mal nicht die Zentrierung mit nur einem Wrapper, da ansonsten die Hintergründe nicht mehr mit den Vordergründen harmonieren würden. Aber so ist das nun einmal und solange der IE das Floating nicht "richtig" beherrscht, werden wir wohl noch lange darauf warten müssen, bis auch derartig komplexe Layouts ohne Kniffe von allen großen Browserfamilien dargestellt werden können...

Einen schönen Sonntag wünsch ich noch!

Gruß
Marco

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

float:right und float:left Probleme

64bit Hex Float in Dezimal Float

Float-Element ragt über Text hinaus

Problem bei float:left und float:right im FF

Convert CString Typ -> int,Float und int,float -> String

E-Mail:

Abonnieren Abbestellen