nicht angemeldet
CSS-Layout, doppelter Platz-Verbrauch eines div-tags im IE
Hallo ihr,
ich stehe vor einem IE-Problem und komme partou nicht weiter.
Hier der Quelltext - danach das Problem:
/* ---------------------------------------- */
<!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" xml:lang="de" lang="de">
<head>
<title>Handelsvertretungen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="5 days" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
/*<![CDATA[*/
body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, li, input, textarea {
font-family: Arial;
}
body, div, p, ul, ol, a, table, td, form, li, input, textarea {
font-size: 12px;
color: #000000;
}
body {
margin: 0px;
background-color: #FDD679;
text-align: center;
}
#hauptbereich {
width: 770px;
height: 380px;
text-align: left;
background-image: url(/images/background.jpg);
margin: 0px auto;
margin-top: 50px;
}
/*]]>*/
</style>
</head>
<body>
<div id="hauptbereich">
<img src="/images/logo.jpg" width="275" height="95" border="0" alt="Barth Handelsvertretungen CDH" title="Barth Handelsvertretungen CDH" style="position: relative; top: -36px; left: 0px;" />
<img src="/images/headerimage.jpg" width="152" height="85" border="0" alt="" title="" style="position: relative; top: -10px; left: 320px;" />
<div style="position: static; top: -87px; left: 0px;">
<img src="/images/image_left.jpg" width="134" height="266" border="0" alt="" title="" />
</div>
<div style="width: 596px; height: 246px; position: relative; top: -266px; left: 134px; padding: 10px; background-color: #FEF2D8;">
Huhu
<br />hellgelber Kasten
</div>
</div>
</body>
</html>
/* ---------------------------------------- */
Der hellgelbe Bereich soll neben dem linken Bild positioniert werden. Im IE wird die Positionierung um 3 Pixel nach unten verschoben, im Firefox und Netscape passt das Layout astrein. Zu allem Überfluss behält sich IE ebenfalls noch das Recht vor, den benötigten Platz für den hellgelben Bereich (letztes div-tag) nochmal unten dran zu hängen, so dass der umschließende div-Bereich nun nicht mehr 380px hoch ist, sondern 266 mehr. Verändert man nun die Größe (testweise), verändert sich im IE nichts, im Firefox hingegen wird die Größe verändert und die Anzeige erfolgt so, wie sie gedanklich auch nachvollziehbar ist.
Was kann man nun tun, um dem IE beizubringen, dass er ebenfalls entsprechend damit umgeht. Ich habe eine Browserweiche, wodurch ich die Angaben nötigenfalls für den IE extra schreiben könnte, allerdings bringt dies ja nichts, da der entsprechende Höhen-Test nichts bringt.
Getestete Browser sind übrigens:
IE 6.0
Firefox 1.0.3
Netscape 7.2
Bin für jeden Tipp, Rat etc. dankbar!
Gruß Patrick
-
Moinsen,
vielleicht hilft ja (ohne den Code genauer anzugucken) ein
*{padding:0; margin;:0;}
global für alles. Browser haben unterschiedliche Defaultwerte für margin und padding. Gewünschte Abstände kannst Du dann für das entsprechende Element definieren,.
--
cu,
Maz