IE7 entfernt position:relative

[felixpfeiffer]

Hallo,

also, ich habe folgendes Problem - leider liegt es noch auf meinem lokalen Entwicklungs-Server.

Also, ich habe im Container #main zwei zusätzliche Elemente eingesetzt, die die oben und unten abgerundete Ecken enthalten. Diese sind absolut positioniert. Um dieses umzusetzen habe ich #main position:relative mitgegeben.

Dieses Konstrukt funktioniert in allen Browsern - sgar der IE6 spielt mehr oder weniger mit.
Nur der IE7 ignoriert diese Anweisung komplett. Es geht sogar soweit, dass in der Developer-Toolbar position garnicht angezeigt wird.

Zur bessern Veranschaulichung mal eben mein Code dafür:

HTML-Code im Template

<div id="main">
<p id="maintop"></p><p id="mainbottom"></p>
<div class="inside">
<?php echo $this->main; ?> 
</div>
<?php echo $this->getCustomSections('main'); ?> 
<div id="clear"></div>
</div>

CSS-Code:

#main{position:relative;margin-top:10px;margin-bottom:10px;background: transparent url(tl_files/layout/background_container.png) left top repeat-y;}
#main .inside{padding:0 20px;}
#maintop{width:100%;height:61px;top:0;left:0;position:absolute;margin-top:-10px;z-index: 0;background: transparent url(tl_files/layout/background_main_top.png) left top no-repeat;}
#mainbottom{width:100%;height:10px;bottom:0;left:0;position:absolute;margin-bottom:-10px;z-index: 0;background: transparent url(tl_files/layout/background_main_bottom.png) left top no-repeat;}

Und hier noch ein Screenshot, was die Developer-Toolbar anzeigt:


Viellleicht kann mir ja jemand einen Tipp geben, welchem dämlichen Fehler des IE ich da aufsitze.

Danke,
Felix