nicht angemeldet
Problem mit floating und height im IE
0 0 0 
MudGuard
Problem mit floating und height im IE
Hallo,
bei einer Kombination von float mit height stellt der Internet-Explorer meine Seite falsch dar. Das ist zumindest meine Vermutung. Im Firefox (2.0.0.11) und im Opera (9..02) ist das Ergebnis so wie gewünscht.
Mein Beispiel:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Floating bug im Internet-Explorer?</title>
</head>
<body>
<h1>Beispiel 1</h1>
<div style="float:right; background-color: yellow;">
<h1 style="height:100px; margin:0; padding:0;">rechts</h1>
</div>
<div style="background-color: red;">
<h1 style="height:100px; margin:0; padding:0;">links</h1>
</div>
<br style="clear:both;" />
<h1>Beispiel 2</h1>
<div style="float:right; height:100px; background-color: yellow;">
<h1 style="margin:0; padding:0;">rechts</h1>
</div>
<div style="height:100px; background-color: red;">
<h1 style="margin:0; padding:0;">links</h1>
</div>
</body>
</html>
Ich erwarte für beide Beispiele eine rote Box "links" und rechts daneben eine gelbe Box "rechts".
Der Internet-Explorer generiert für Beispiel 1 zwei Zeilen, zuerst eine Gelbe, dann die Rote. Für Beispiel 2 werden die rote und die gelbe Box zwar nebeneinander dargestellt, dazwischen entsteht aber ein Spalt.
Wo ist hier der Fehler? Wie kann man ihn umgehen?
Viele Grüße und vielen Dank
Daniel N.
-
Mahlzeit,
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[...] > Wo ist hier der Fehler? Wie kann man ihn umgehen? <http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=Quirks-Modus>? MfG, EKKi -- sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Hi,
»http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=Quirks-Modus?
Guter Hinweis, hilft aber beim geschilderten Problem leider nicht.Viele Grüße
Daniel
-
-
Hi,
bei einer Kombination von float mit height stellt der Internet-Explorer meine Seite falsch dar. Das ist zumindest meine Vermutung.
der IE hat sowohl mit Floating als auch mit der height-Eigenschaft Probleme, das ist richtig. Zunächst aber solltest Du ...
<?xml version="1.0" encoding="ISO-8859-1" ?>
... den Quirks-Mode verlassen. Cheatah -- X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:| X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html X-Will-Answer-Email: No X-Please-Search-Archive-First: Absolutely Yes-
der IE hat sowohl mit Floating als auch mit der height-Eigenschaft Probleme, das ist richtig.
Gibt es eine Seite, wo diese Probleme beschrieben sind und wo man möglicherweise Lösungsmöglichkeiten findet. Mir ist noch nicht klar, wann genau dieses Problem auftritt.
... den Quirks-Mode verlassen.
Ok, guter Hinweise. Hat allerdings in diesem Fall keine Auswirkung auf die Darstellung im IE.
Viele Grüße
Daniel-
Hi,
der IE hat sowohl mit Floating als auch mit der height-Eigenschaft Probleme, das ist richtig.
Gibt es eine Seite, wo diese Probleme beschrieben sindum all diese typischen Probleme des IE auf einer einzigen Seite unterzubringen, müsste diese so groß sein, dass ein einziger Ausdruck davon ganzen Regionen des tropischen Regenwaldes den Garaus macht. Für den Anfang seien Dir drei Seiten ans Herz gelegt:
Position Is Everything
Über hasLayout
quirksmode.org (etwas allgemeiner, aber oft recht nützlich)Ok, guter Hinweise. Hat allerdings in diesem Fall keine Auswirkung auf die Darstellung im IE.
Hast Du die Seite irgendwo online?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Danke erstmal für die Links.
Hast Du die Seite irgendwo online?
Nein, leider nicht. Ich habe hier gerade keine Möglichkeit, kann ich später (heute abend) nachreichen.
Daniel
-
Hi,
» Über hasLayout
Das ist ein super Artikel, das "hasLayout" war mir bisher noch nicht bekannt.Bei meinem Beispiel haben im ersten Beispiel sowohl die <div>s als auch die <h1> hasLayout=true (=-1 in der Internetdeveloper Toolbar). Im zweiten Beispiel haben nur die <div>s "hasLayout", die Überschriften nicht.
Auf der Seite steht eingangs "Viele Darstellungsprobleme des Internet Explorer lassen sich beheben, indem man einem Element »Layout« gibt.". Das scheint in meinem Beispiel genau anders herum zu sein?!
Noch eine Idee? Ein Anti-Holly-Hack oder sowas ähnliches?
Viele Grüße
Daniel
-
-
-
-
Hi,
<div style="float:right; background-color: yellow;">
<h1 style="height:100px; margin:0; padding:0;">rechts</h1>
</div>
<div style="background-color: red;">
<h1 style="height:100px; margin:0; padding:0;">links</h1>
</div>Welchem Zweck dienen hier die div-Elemente, die Du um die h1 rumpackst?
<div style="float:right; height:100px; background-color: yellow;">
<h1 style="margin:0; padding:0;">rechts</h1>
</div>
<div style="height:100px; background-color: red;">
<h1 style="margin:0; padding:0;">links</h1>
</div>Hier das gleiche, wozu die divs?
Der Internet-Explorer generiert für Beispiel 1 zwei Zeilen, zuerst eine Gelbe, dann die Rote. Für Beispiel 2 werden die rote und die gelbe Box zwar nebeneinander dargestellt, dazwischen entsteht aber ein Spalt.
Der Spalt könnte margin/padding der divs sein.
Daher nochmal die Frage: wozu die divs?cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo,
Welchem Zweck dienen hier die div-Elemente, die Du um die h1 rumpackst?
Ich habe mich bemüht, mein Problem auf das Wesentliche zu beschränken! Daher ergibt das HTML nicht hier unbedingt eine vernünftige Semantik. Das soll es auch gar nicht!
» Der Spalt könnte margin/padding der divs sein.
Mit margin oder padding hat das Problem (leider) nichts zu tun.Viele Grüße
Daniel
-