Menu und Content Problem im IE6

[Senseless]

Hallo ihr Lieben,

ich hoffe sehr das ihr mir helfen könnt. Google mein bester Freund konnte mir nicht helfen und meine Finger sind schon wund vom tippen.


Es geht hier um ein News-Script, was ich versuche einzubauen, ist mir auch im Firefox geglückt.
Nur der IE6 macht es zur grausamen Ansicht. Das Menü und die News sind übereinander. Weiß echt nicht mehr weiter, schnief.

Anbei poste ich die CSS:

PHP-Code:

body {
    margin:0 auto;
    padding:0px;
    width: 97%;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    background-color: #E7E5DD;
    font-size: 10px;
    color: #857052;
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/bg6.gif);
    background-repeat: repeat;
    border: 2px solid #C7B5A7;
    }

table {
    margin:0 auto;
    border: 0px;
    padding-left: 170px;
    width: 100%;
    padding-right: 10px;
}


table.content {
    border-width: 0px;
    margin:0 auto;
    margin-bottom: 5px;
    padding: 0px;
    background-color: #C7B5A7;
    margin-right: 5px;
}


table.head    {
    border-width: 0px;
    margin: 1px 0px 5px;
    padding: 0px;
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/td_head.gif);
    }
table.info    { border-width: 0px; margin: 1px 0px 5px; padding: 0px; background-color: #C7B5A7; }
table.panel   { width: 150px; background-color: #C7B5A7; border-color: #C7B5A7; margin-bottom: 5px; }

th { font-size: 13px; }
td { font-size: 12px; }

th.head {
   background-color: #C7B5A7;
   background-image: url(http://urmelchen.free-speicher1.de/tu/news/td_head.gif);
}
td.head {
    background-color: #C7B5A7;
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/td_head.gif);
    font-weight: bold;
}

th.info   { background-color: #C7B5A7; border: 1px solid #4583C0; background-image: url(http://urmelchen.free-speicher1.de/tu/news/td_head.gif);}
td.info   { background-color: #C7B5A7; background-image: url(http://urmelchen.free-speicher1.de/tu/news/td_head.gif);}

th.header {
    background-color: #EFE7DE;
    font-weight: bold;
}
td.header {
    background-color: #EFE7DE;
    font-size: 9px;
}

td.left   { background-color: #EFE7DE; }
td.right  { background-color: #EFE7DE; }

td.odd    { background-color: #EFE7DE; }
td.even   { background-color: #EFE7DE; }

td.center { background-color: #C6B5A5; }
td.top    { background-color: #C6B5A5; }
td.bottom { background-color: #C6B5A5; }

table.quote {
   background-color: #E6DB8E;
   border: 1px solid #4D4D62;
}

td.quote {
   padding: 3px;
   background-color: #E6DB8E;
   border-top: 1px dashed #4D4D62;
}

a:link {
    color: #857052;
    text-decoration: none;
}
a:visited {
    color: #857052;
    text-decoration: none;
}
a:active {
    color: #857052;
    text-decoration: none;
}
a:hover { text-decoration: underline ; color: #857052; background-color: #E8CF98; }

input       { border: 1px solid #857052; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #857052; }
input.send  { border: 1px solid #857052; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #857052; }
select      { border: 1px solid #857052; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #857052; }
textarea    { border: 1px solid #857052; background-color: #F8F5E4; font-family: Verdana,Helvetica; color: #857052; font-size: 12px; }
fieldset    { border: 1px solid #857052; background-color: #F8F5E4; padding-bottom: 5px; padding-left: 2px; padding-right: 2px; padding-top: 5px; }

legend {
   border: 1px solid #857052;
   background-color: #C6B5A5;
   font-family: Verdana, Arial, sans-serif;
   font-size: 15px;
   font-weight: bold;
   padding: 2px;
}

#Header {
    height:130px;
    line-height:11px;
    voice-family: "\"}\"";
    voice-family:inherit;
    height:130px;
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/bg.jpg);
    background-repeat: repeat-x;
    width: auto;
    }

#header2 .banner {
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/banner_tristan);
    float: none;
    height: 130px;
    background-repeat: no-repeat;
    width: auto;
    background-position: center;
    text-align: center;
}

#Menu {
    position:absolute;
    left:15px;
    top:90px;
    width:160px;
    line-height:20px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:160px;
    margin-top: 40px;
    font-size: 12px;
    color: #857052;
    padding-top: 15px;
    padding-right: 10px;
    padding-left: 10px;
    height: 719px;
            }
            

/* Again, "be nice to Opera 5". */
body>#Menu {width:auto;}
    #tabs {
    font-size:93%;
    line-height:normal;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: 700px;
      }


    #tabs ul {
    margin:0;
    list-style:none;
    height: 42px;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 10px;
    padding-top: 0px;
    text-align: center;
      }

#Menu h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: block;
    padding-left: 20px;
    color: #857052;
    font-weight: bold;
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/bg1.gif);
}
#Menu .subnav {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#Menu .subnav li {
    display: block;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #FFFFFF;
}
#Menu .subnav a {
    font-weight: normal;
    color: #857052;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#header2 {
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/bg.jpg);
    background-repeat: repeat-x;
    height: 130px;
    border: 1px solid #C7B5A7;
    width: 100%;
}
body>#Header2 {height:130px;}

#Menu .subnav a:visited,active {
    font-weight: normal;
    color: #857052;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#Menu .subnav a:hover {
    display: block;
    color: #857052;
    font-weight: normal;
    text-decoration: none;
    background-image: url(http://urmelchen.free-speicher1.de/tu/news/bg1.gif);
}
.footer {
    background-repeat: repeat;
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #857052;
    background-color: #C7B5A7;
}

.spacer {
    clear: both;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #857052;
    padding-top: 5px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
    position: static;
} 


http://urmelchen.free-speicher1.de/tu/news/index.php

[Senseless]

Schnief, hat niemand eine Idee woran es liegen könnte?
Wäre für jeden Hilfe oder Hinweis sehr dankbar......

[th2409]

EIgentlich ist unklar, warum es in manchen Browsern "richtig" aussieht...

Im Kern verwendest Du für das Menü ( #Menu) eine absolute Positionierung. Damit wird dieser Layer eben unter allen Umständen auf diese Position gedrückt und aus dem normalen Textfluss heraus genommen. Das Menü wird 90px von oben und 15px von links positioniert und ist 160px breit.

Die Tabelle setzt Du auf 100% Breite (per CSS, die Breitenangabe im <table>-Tag ist dann nutzlos...). Da die Tabelle im normalen Dokumentenfluss steht, nutzt sie eben auch die volle <body>-Breite aus. Im Grunde wird die Tabelle dargestellt und das Menü darüber gelegt.

Insgesamt finde ich das CSS ziemlich "aufgeblasen". Wenn ich persönlich mit einer meiner Seiten an einem solchen Punkt bin, schmeiße ich alles CSS weg und fang von vorne an, das ist meist einfacher und man lernt noch was dabei. Ist natürlich immer eine Zeitfrage.

Ich würde mich von dem absolut positionierten Menü trennen. Zwei divs (eins für das Menü, das andere für den Textinhalt) die mit Breite ausgestattet sind (also px oder % oder ems...), diese dann mit CSS float:left an die Seite gestellt.

Alternativ kannst Du auch den Inhalt (also bei Dir die Tabelle) über eine absolute oder relative Positionierung nach rechts schieben, damit sie einen Freiraum auf der linken Seite für das Menü hat. Also mit CSS position: absolute (oder relative) und left: 170px.

Nebenbemerkung, aus technischer Sicht OT: Natürlich liest man sich auch die Originalseite durch. Ich habe es getan und war ziemlich ergriffen. Meine Hochachtung, diese Seite ins Netz zu stellen! Alles andere mal "direkt"