Hallo HTML-Forum-Mitglieder,
ich habe ein Problem mit margin-Angaben. Diese werden auf den gängigen Browsern bei meinem Beispiel vollkommen ignoriert. Obwohl im Browser von Phase 5 alles OK scheint.
Das CSS habe ich zur Vereinfachung als Inline-CSS eingesetzt, um auszuschließen, dass die Browser auf eine falsche externe CSS-Datei zugreifen.
Ich habe die Szene vereinfacht um das Problem einzugrenzen. Es handelt sich um 3 HTML-Elemente, in diesem Fall Divs mit Höhe und Breite, also um 3 Boxen (blau, rot, gelb), die zueinander und zum Rand des umgebenden Div-Elements (grün) Mindestabstände durch margin-Angaben einhalten sollen. Ich habe die Szene auch schon mit 2 img-Elementen und einer H1-Überschrift getestet.
HTML + Inline-CSS:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="description" content="Test">
<meta name="author" content="Test">
<meta name="keywords" content="Test">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="index, follow">
</head>
<body style="width: auto; height: auto; font: 12px/16px Helvetica, Arial, sans-serif;">
<div> style="margin: 20px; width: auto; min-width: 280px; background: green;">
<div style="margin-right: 25px; width: 100px; height: 100px; background: blue; float: left;">LOGO</div>
<div style="width: 155px; height: 75px; background: red; margin-top: 25px;">FIRMENNAME</div>
<div style="width: auto; height: 150px; background: yellow; margin-top: 25px;">PHOTO</div>
</div>
</body>
</html>
Im Browser von Phase 5 klappt das auch alles prima.
Wenn ich die Datei aber mit den gängigen Browsern (Chrome, Opera, Safari, Firefox und IE) öffne, gibt es keine margin-Abstände mehr (und zwar bei allen Browsern gleiches Bild):
Ich habe eine W3C-Validation durchgeführt um einen groben HTML-Fehler aufzudecken: (Leider) ist der Code valide.
Ich habe die div-Elemente in den Google Developper Tools gecheckt. Man sieht, dass das margin z.B. der blauen Box erkannt und übermittelt wird, aber warum wird es nicht korrekt gerendert?
Wenn Ihr einen Tipp für mein Problem habt, wäre ich sehr dankbar.
Viele Grüße!!!
ich habe ein Problem mit margin-Angaben. Diese werden auf den gängigen Browsern bei meinem Beispiel vollkommen ignoriert. Obwohl im Browser von Phase 5 alles OK scheint.
Das CSS habe ich zur Vereinfachung als Inline-CSS eingesetzt, um auszuschließen, dass die Browser auf eine falsche externe CSS-Datei zugreifen.
Ich habe die Szene vereinfacht um das Problem einzugrenzen. Es handelt sich um 3 HTML-Elemente, in diesem Fall Divs mit Höhe und Breite, also um 3 Boxen (blau, rot, gelb), die zueinander und zum Rand des umgebenden Div-Elements (grün) Mindestabstände durch margin-Angaben einhalten sollen. Ich habe die Szene auch schon mit 2 img-Elementen und einer H1-Überschrift getestet.
HTML + Inline-CSS:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="description" content="Test">
<meta name="author" content="Test">
<meta name="keywords" content="Test">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="index, follow">
</head>
<body style="width: auto; height: auto; font: 12px/16px Helvetica, Arial, sans-serif;">
<div> style="margin: 20px; width: auto; min-width: 280px; background: green;">
<div style="margin-right: 25px; width: 100px; height: 100px; background: blue; float: left;">LOGO</div>
<div style="width: 155px; height: 75px; background: red; margin-top: 25px;">FIRMENNAME</div>
<div style="width: auto; height: 150px; background: yellow; margin-top: 25px;">PHOTO</div>
</div>
</body>
</html>
Im Browser von Phase 5 klappt das auch alles prima.
Wenn ich die Datei aber mit den gängigen Browsern (Chrome, Opera, Safari, Firefox und IE) öffne, gibt es keine margin-Abstände mehr (und zwar bei allen Browsern gleiches Bild):
Ich habe eine W3C-Validation durchgeführt um einen groben HTML-Fehler aufzudecken: (Leider) ist der Code valide.
Ich habe die div-Elemente in den Google Developper Tools gecheckt. Man sieht, dass das margin z.B. der blauen Box erkannt und übermittelt wird, aber warum wird es nicht korrekt gerendert?
Wenn Ihr einen Tipp für mein Problem habt, wäre ich sehr dankbar.
Viele Grüße!!!
