MagDragon: Seite im IE falsch dargestellt bei width auto od. right 0

Beitrag lesen

Hallo!

Dies ist mein erster Post, bitte verzeiht, falls jemand schon mit diesem Problem einen Thread erstellt hat, bei der Forensuche konnte ich jedenfalls nichts entsprechendes finden.

Mein Problem ist folgendes:

Ich habe eine Seite in ASP (imho irrelevant) geschrieben, die eine zweite ASP-Seite inkludiert und ein externes CSS-File läd - diese wird im Firefox korrekt dargestellt, im Internet Explorer jedoch nicht - als würde er sich weigern das Stylesheet korrekt zu interpretieren. Es sollte eigentlich, wie im Firefox, ein Overflow gegeben sein, so dass am Div selbst Scrollbalken erscheinen - jedoch ist das dem Internetexplorer egal, er spannt, trotz width / height auf auto stehend UND bottom / right auf 0px das div nicht in der richtigen Größe auf, sondern lässt rechts eine Spalte von ~40px frei, unten jedoch sprengt er den sichtbaren Bereich der Seite, so dass die gesamte Seite scrollen kann, und nicht nur, wie gewünscht, das div. Außerdem ermöglicht er im div horizontales Scrollen und stellt es immer zur Verfügung - obwohl dies auch nicht der Fall sein sollte, da sich die Breite des Inhalts automatisch anpassen müsste.

Ich habe schon mehrere Sachen ausprobiert in CSS, bin jetzt jedoch mit meinem Latein am Ende und hoffe, dass die potentiellen Leser dieses Threads mir weiterhelfen können.

Als folgendes paste ich noch den gekürzten, relevanten Code der Seiten, verbleibe hoffend auf eine nützliche Antwort und bedanke mich selbstverständlich im voraus,

MagDragon.

Code:

index.asp

<html>
<head>
<noscript>
<link rel='stylesheet' href='styles/style1024.css' type='text/css'></link>
</noscript>
</head>
<body>
   <div class="Main">
    <div class="headSpaceLeft">
          &nbsp;
        </div>
        <div class="headLogoLeft">
          <img src="./images/headerlogo.gif" height="85" alt="">
        </div>
        <div class="header">
          Headertext
        </div>
        <div class="headLogoRight">
          <img src="./images/headerlogo.gif" height="85" alt="">
        </div>
        <div class="headSpaceRight">
          &nbsp;
        </div>
        <hr class="header">
    <div class="menue">
          Ganz tolle Men&uuml;punkte!
        </div>
        <div class="Werbung">
          Ganz tolle Werbung!
        </div<
    <div class="Ueberschrift">
   Links
    </div>
    <div class="Satzung">
          Endlich der Text des Inhalts!
   </div>
   </div>
</body>
</html>

styles/style1024.css

a:active
{
 color:#FCF9F4;
 background-color:#404040;
 text-decoration:none;
}

a:focus
{
 color:#EEEEEE !important;
 background-color:#404040;
 text-decoration:none;
}

a:hover
{
 background-color:#404040;
 color:#EEEEEE !important;
 text-decoration:none;
}

a:link
{
 text-decoration:none;
 color:#404040;
}

a:visited
{
 text-decoration:none;
 color:#404040;
}

body
{
 background-image:url(../images/tatankaNeu300.gif);
 color:#404040;
 margin-left:0;
 background-position:center;
 background-attachment:fixed;
 background-repeat:no-repeat;
 font-family:Verdana,Arial,Helvetica,Sans-Serif;
 margin-top:0;
 background-color:#FCF9F4;
 font-size:9pt;
}

div.header
{
 font-family:Verdana,Arial,Helvetica,Sans-Serif;
 font-size:36pt;
 position:absolute;
 left:210px;
 width:570px;
 float:right;
 margin-top:20px;
 height:90px;
}

div.headLogoLeft
{
 width:60px;
 position:absolute;
 margin-top:3px;
 left:150px;
 height:90px;
}

div.headLogoRight
{
 margin-top:3px;
 left:780;
 height:90px;
 position:absolute;
 width:60px;
}

div.headSpaceLeft
{
 left:0;
 width:150px;
 height:90px;
 top:0;
 position:absolute;
}

div.headSpaceRight
{
 left:840px;
 position:absolute;
 height:90px;
 width:auto;
}

div.Main
{
 bottom:0px;
 top:0px;
 right:0px;
 left:0px;
}

div.menue
{
 left:0px;
 height:auto;
 line-height:20px;
 width:200px;
 top:60px;
 position:absolute;
 padding-top:30px;
 padding-left:40px;
}

div.Satzung
{
 overflow:scroll;
 left:200px;
 position:absolute;
 top:160px;
 padding-left:30px;
 scrollbar-arrow-color:solid gray;
 padding-right:20px;
 right:0px;
 line-height:16px;
 text-align:justify;
 width:auto;
 bottom:0px;
 height:auto;
 scrollbar-highlight-color:solid gray;
}

div.Ueberschrift
{
 position:absolute;
 left:200px;
 font-family:Verdana,Arial,Helvetica,Sans-Serif;
 font-size:14pt;
 padding-top:20px;
 width:auto;
 height:70px;
 top:90px;
}

div.Werbung
{
 left:0px;
 padding-left:50px;
 bottom:0px;
 position:absolute;
 padding-bottom:18px;
}

^-- dazu gibt es noch ein paar font-Elemente und auch ein paar table- und td-Elemente, die auch im div "Satzung" vorkommen, die sollten jedoch für die Darstellung bzw. Größe der divs unwichtig sein, da sie ja nur in einem befindlich sind - oder irre ich?

Falls noch mehr Informationen benötigt werden, einfach schreien! ;)