3 (!) Float-Probleme im IE6/7 (Float über die Grenzen eines Elements hinaus)

Status
Nicht offen für weitere Antworten.
M

marco12

Grünschnabel
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: 
<!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. :confused:

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
 
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
 
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-examples/219_9/beispiele/zweites_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
 
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
 
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
 
Zuletzt bearbeitet:
Ist das der Firefox-Screenshot, der das eingangs vorgestellte Layout in seinem vollständigen Umfang präsentiert?

Ist die Seite irgendwo erreichbar?

mfg Maik
 
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
 
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
 
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
 
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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück