IE + CSS = ARGHHH

[Pro2k]

Ich dreh gleich durch, hab ein ziemlich komplexes Layout auf CSS basierend erstellt und wer verdirbt mir den Erfolg? Der Internet Explorer!

Also hier mal mein HTML und CSS Code an der betreffenden Stelle:
<div id="contentpic"><img src="graphic/estate_banner.jpg" width="825" height="152" /></div>

<!-- Content Start -->

<div id="left_frame">
<div id="menu2">
<ul>
<li><a href="#nogo">Harvest 2006</a></li>
<li><a href="#nogo">Grape Varieties</a>
<ul>
<li><a href="#nogo">Riesling</a></li>
<li><a href="#nogo">Scheurebe</a></li>
<li><a href="#nogo">Sp&auml;tburgunder</a></li>
<li><a href="#nogo">Dornfelder</a></li>
<li><a href="#nogo">...</a></li>
</ul>
</li>
<li><a href="#nogo">Work in the Vineyards</a></li>
<li><a href="#nogo">Harvest Work</a></li>
</ul>
</div>
<div id="left_bottom_bg"></div>
</div>


#contentpic {
position: absolute;
z-index: 2;
margin: 0px;
padding: 0px;
}

/* Left Frame */
#left_frame {
width:200px;
background-image: url(graphic/menu_bg.gif);
margin-left: 10px;
}

#left_bottom_bg {
height: 8px;
background-image: url(graphic/left_bottom_bg.gif);
background-repeat: no-repeat;
}

#menu2 {
width: 185px;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
z-index: 3;
position: relative;
margin-top: 90px;
list-style-type: none;
padding: 3px;
}
#menu2 ul {
padding:0;
list-style-type:none;
margin: 0;
}
#menu2 li a {
height: 20px;
text-decoration: none;
background-color: #B92845;
}

#menu2 li a:link, #menu2 li a:visited {
color: #FFFFFF;
font-size:12px;
display: block;
padding: 8px 0 0 25px;
margin-bottom: 1px;
}

#menu2 li a:hover {
color: #fc0;
background: #5d2c00;
padding: 8px 0 0 27px;
margin-bottom: 1px;
}

#menu2 ul ul{
margin-left: 5px;
}

#menu2 ul ul li a{
height: 16px;
background-color: #C2853A;
margin-bottom: 1px;
}
Im Firefox und in Opera ist alles so wie es sein soll, nur nicht im IE. Hier noch Screenshots um das ganze zu veranschaulichen:
http://img104.imageshack.us/img104/1231/unbenannt2bp6.th.jpg (http://img104.imageshack.us/my.php?image=unbenannt2bp6.jpg)
http://img242.imageshack.us/img242/7961/unbenannt3bc0.th.jpg (http://img242.imageshack.us/my.php?image=unbenannt3bc0.jpg)
http://img110.imageshack.us/img110/30/unbenannt4wy4.th.jpg (http://img110.imageshack.us/my.php?image=unbenannt4wy4.jpg)

[Gast]

hi ich tipp mal auf padding schaus mir nachher nochmal genauer an mfg

[Pro2k]

Woran es liegt weiß ich bereits, habe aber noch keinen Weg gefunden es zu umgehen. Wie gesagt das layout ist sehr komplex, damit es so aussieht, wie es aussieht. Ich versuch es hier mal zu erklären.

ich habe einen div container (left_frame), der unterhalb 8y-achse) des mainmenüs anfängt und margin-left 10px hat und den hintergrund mit dem schatten rechts hat. Darüber (z-achse) liegt wiederum direkt unter dem mainmenu (y-achse) das panorama bild (nur zu testzwecken so verzerrt). Dieses bild ist absolut positioniert. damit es eben einen teil des left_frame überdeckt. im left frame ist dann menu2 das relativ positioniert ist und wiederum über (z-achse) dem panorama liegt. Es muss darin sein damit sich der left_frame bei längerem menu2 nach unten ausdehnt.

IE hat ein problem mit dem margin-left 10px des left_frame. nehme ich das raus rückt auch das panorama nach links. Wenn jemand ne ganz andere lösung hat um ddas Layout zu erstellen, nur her damit. Aber ansich bin ich der Meinung, dass ich alles richtig gemacht habe, da Firefox und Opera genau das zeigen was ich haben will.

[darph]

im body padding auf 0px; gesetzt? Ist ja Unsinn. ;(

Was immer das Bild enthält, das darüber liegende Containerelement - bei dem Padding auf 0 gesetzt? Also das, was leftframe als auch contentpic enthält.


<div id="menu2">
<ul>
<li><a href="#nogo">Harvest 2006</a></li>
[...]
</ul>
</div>
Warum so kompliziert? Mußt du die Liste selbst nochmal in ein div packen? Warum nicht <ul id="menu2"> und auf das Containerdiv verzichten? So machst du es dir nur unnötig kompliziert, weil du tausende von neuen paddings, borders und margins einführst.