Falsche Margin/Padding (?) im MSIE 6
Konrad L. M. Rudolph
- css
Hallo Forum,
auf der folgenden Seite werden im MSIE 6 die <h2>s falsch positioniert: margin ist auf 25px gesetzt, padding sowohl vom <h2> als auch vom Parent auf 0. Trotzdem ist der linke Abstand zwischen Aussenelement und <h2> größer als 25px (=> vergleichen mit z.B. Mozilla).
Woran liegt das? (Box Model Bug schließt aus: im Quelltext ist ein XHTML-DTD angegeben)
Gruß,
KonRad -
Hi,
(Box Model Bug schließt aus: im Quelltext ist ein XHTML-DTD angegeben)
aber nicht in der ersten Zeile des Dokuments, wo der IE ihn erwartet.
alert('Strict Mode: ' + (document.compatMode == 'CSS1Compat'));
Cheatah
(Box Model Bug schließt aus: im Quelltext ist ein XHTML-DTD angegeben)
aber nicht in der ersten Zeile des Dokuments, wo der IE ihn erwartet.
doch: es werden unterschiedliche Seiten an MSIE/Rest ausgeliefert: im MSIE ist kein XML-Kopf vorhanden, das DTD steht in der ersten Zeile.
Gruß,
KonRad -
Hi,
doch: es werden unterschiedliche Seiten an MSIE/Rest ausgeliefert: im MSIE ist kein XML-Kopf vorhanden, das DTD steht in der ersten Zeile.
argl. Wie funktioniert diese Unterscheidung? Hast Du mal sinnvolle borders angegeben?
Cheatah
argl. Wie funktioniert diese Unterscheidung?
per severseitigem Script: das Script prüft, ob der Browser den Typ "application/xhtml+xml" akzeptiert und gibt dementsprechend den XML-Header aus oder auch nicht.
Hast Du mal sinnvolle borders angegeben?
was meinst Du damit? Im Moment haben die <h2>s keinen Border. Allerdings kann man ihnen auch einen Border verpassen, der zeigt nur deutlich, dass die <h2>s wirklich falsch positioniert sind.
Gruß,
KonRad -
Hi,
Hast Du mal sinnvolle borders angegeben?
was meinst Du damit? Im Moment haben die <h2>s keinen Border. Allerdings kann man ihnen auch einen Border verpassen, der zeigt nur deutlich, dass die <h2>s wirklich falsch positioniert sind.
versuch's auch mit den anderen Elementen. Durch solche Dinge wie border und background-color kann man recht gut sehen, ob es sich um ein padding, ein margin oder was auch immer handelt.
Cheatah
versuch's auch mit den anderen Elementen. Durch solche Dinge wie border und background-color kann man recht gut sehen, ob es sich um ein padding, ein margin oder was auch immer handelt.
ok. In diesem Fall: es ist die Margin des Innenelements.
Ich habe diese Margin jetzt einmal probeweise varriert und dabei herausgefunden: die angezeigte Margin ist immer 2* die angegebene!
D.h. wenn ich z.B. 1px angebe, werden 2 genommen. Gebe ich 10px an, werden 20 genommen.
Was soll das? Fehlverhalten oder beachte ich etwas nicht? Kann man das Verhalten unterbinden?
Gruß,
KonRad -
Hallo,
D.h. wenn ich z.B. 1px angebe, werden 2 genommen. Gebe ich 10px an, werden 20 genommen.
Was soll das? Fehlverhalten oder beachte ich etwas nicht? Kann man das Verhalten unterbinden?
Das ist ein allgemein bekannter Bug vom IE, dass er bei gefloateten Elementen den margin verdoppelt. Dem kannst du einfach entgegenwirken, indem du die gefloateten Elemente zusätzlich mit einem display:inline versiehst, was zu keinerlei Problemen mit anderen Browsern führen wird, da gefloatete Elemente _grundsätzlich_ als Block-Elemente behandelt werden.
MfG Mülli
Hallo,
D.h. wenn ich z.B. 1px angebe, werden 2 genommen. Gebe ich 10px an, werden 20 genommen.
Das ist ein allgemein bekannter Bug vom IE, dass er bei gefloateten Elementen den margin verdoppelt. Dem kannst du einfach entgegenwirken, indem du die gefloateten Elemente zusätzlich mit einem display:inline versiehst,
Ja, oder den Margin bei gefloateten Elementen grundsätzlich nicht änderst, sondern den der Elemente in ihnen.
Beispiele:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Floating Margins</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<div style="width:400px; margin:0 auto; border:1px solid black; padding:0;">
<h1>Überschrift1</h1>
<h2 style="float:left; width:150px; margin-left:20px; padding:0; border:1px solid black;">Überschrift2</h2>
<p style="width:200px; border:1px solid black; margin-left:180px; padding:0;">Text<br>Text<br>Text</p>
<h1>Überschrift1</h1>
<h2 style="float:left; width:150px; margin-left:20px; display:inline; padding:0; border:1px solid black;">Überschrift2</h2>
<p style="width:200px; border:1px solid black; margin-left:180px; padding:0;">Text<br>Text<br>Text</p>
<h1 style="clear:left;">Überschrift1</h1>
<h2 style="float:left; width:150px; padding:0; border:1px solid black;"><span style="margin-left:20px; padding:0;">Überschrift2</span></h2>
<p style="width:200px; border:1px solid black; margin-left:180px; padding:0;">Text<br>Text<br>Text</p>
</div>
</body>
</html>
viele Grüße
Axel
Hi,
Woran liegt das? (Box Model Bug schließt aus: im Quelltext ist ein XHTML-DTD angegeben
Falsch, Du schaltest mit
<?xml version="1.0" encoding="iso-8859-1"?>
in den Quirks-Modus und damit den Box-Model-Bug ein.
Der IE erwartet den Doctype als Erstes.
cu,
Andreas
Falsch, Du schaltest mit
<?xml version="1.0" encoding="iso-8859-1"?>
in den Quirks-Modus und damit den Box-Model-Bug ein.
Der IE erwartet den Doctype als Erstes.
Ja, bekommt er, siehe Antwort auf Cheatahs Posting. Den XML-Kopf bekommt der MSIE gar nicht erst zu sehen.
Gruß,
KonRad -
Hi,
Der IE erwartet den Doctype als Erstes.
Ja, bekommt er, siehe Antwort auf Cheatahs Posting. Den XML-Kopf bekommt der MSIE gar nicht erst zu sehen.
Nein, bekommt er nicht.
Es kommt zuerst die XML-Deklaration.
Ich hab ausnahmsweise mal meinen IE ins Internet gelassen, und ich bekam dort die XML-Deklaration.
Wie funktioniert denn Deine (unmögliche) serverseitige Erkennung des Browsers?
cu,
Andreas
Nein, bekommt er nicht.
Es kommt zuerst die XML-Deklaration.Ich hab ausnahmsweise mal meinen IE ins Internet gelassen, und ich bekam dort die XML-Deklaration.
Hmm. Das ist aber dann eine /sehr/ komische Version des MSIE.
Wie funktioniert denn Deine (unmögliche) serverseitige Erkennung des Browsers?
Wieso unmöglich? Ganz einfache Weiche beim Ausliefern der Datei:
\\
<?php
if (stristr($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')) {
header('Content-type: application/xhtml+xml');
echo("<?xml version="1.0" encoding="iso-8859-1"?>\r\n");
}
else {
header('Content-type: text/html');
}
?>
///
Gruß,
KonRad -
Hi,
Hmm. Das ist aber dann eine /sehr/ komische Version des MSIE.
Ganz normaler IE 6.
Wie funktioniert denn Deine (unmögliche) serverseitige Erkennung des Browsers?
Wieso unmöglich? Ganz einfache Weiche beim Ausliefern der Datei:
Weil alle nicht-notwendigen Angaben im HTTP-Request gefälscht sein können.
cu,
Andreas
Weil alle nicht-notwendigen Angaben im HTTP-Request gefälscht sein können.
Ja, und? Ich glaube, ein Flamewar bringt mich bei dem Problem nicht weiter und Dir auch nichts, außer eventuell einer kurzzeitigen Befriedigung.
Auf jeden Fall hat dies rein gar nichts mit dem Problem zu tun.
Gruß,
KonRad -
Hi,
Ja, und? Ich glaube, ein Flamewar bringt mich bei dem Problem nicht weiter und Dir auch nichts, außer eventuell einer kurzzeitigen Befriedigung.
???
cu,
Andreas