Frage stellen
Bin auf der Suche nach einer Lösung für folgendes Problem:
Im IE7 wird angezeigt (richtig):
Der IE8 hingegen zeigt es so an (falsch):
Der HTML Code sieht so aus:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">
<div id="c_main">
<div id="c_hdl_bg">
Title
</div>
<div id="c_main_bg">
<p>Text</p>
</div>
<div id="c_main_footer"></div>
</div>
</div>
</body>
</html>
Beachte:
Der "Text" befindet sich innerhalb vom <div id="c_main_bg">.
Wenn der "Text" nicht innerhalb der <p>-Tags ist, dann zeigt der IE8
auch keine Abstände an.
Die Frage ist:
Warum versetzt der IE8 die beiden div Tags "c_hdl_bg" und "c_main_bg",
wenn sich INNERHALB vom div Tag "c_main_bg" ein "<p>" (Paragraph) befindet?
Das main.css sieht so aus:
- Code: Alles auswählen
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: verdana, arial, helvetica, sans-serif;
color: #666;
}
#content {
position: absolute;
top: 150px;
left: 200px;
}
#c_main {
position: relative;
width: 570px;
top: -60px;
padding: 0px 15px;
margin: 0px;
z-index: 3;
background-color: #0f0; /*DEL*/
}
#c_hdl_bg {
position: relative;
top: 0;
left: 0;
width: 545px;
z-index: 3;
padding: 50px 10px 10px 15px;
background: url(../img/c_main_bg.gif) no-repeat left top;
}
html>body #c_main_bg {
position: relative;
top: 0;
left: 0;
width: 545px;
padding: 0 10px 0 15px;
margin: 0;
z-index: 2;
background-color: #e6e6e6;
}
#c_main_footer {
position: relative;
left: 0;
top: 0;
width: 570px;
height: 8px;
z-index: 0;
background: url(../img/c_main_footer.gif) no-repeat left top;
}
Ich habe das ganze mal als ZIP Datei attacht:
Testseite.zip- (3.85 KiB) 49-mal heruntergeladen
Bin für Hinweise jeder Art dankbar...
Gruss,
Supertramp
