• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

falsche darstellung im IE, aber im firefox richtig

cssnoob

Neues Mitglied
Hey Leute, ich hab ein Layout realisiert, was im Firefox auch richtig angezeigt wird. Aber im Internet Explorer leider falsch. Das "menüFoot"-Div ist im IE rechts unten, obwohl es unter das "menüContent"-Div soll. Könnt ihr mir helfen, dass es auch im IE richtig angezeigt wird?? Ich hab schon viel versucht, nur leider hab ich noch zu wenig Erfahrung. Hier mein Code...

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style2.css"> 
</head> 
<body>
<div id="center" >
    
    <div class="head"></div>
    <div class="menuHead">menü head</div>
    <div class="mainHead">content head</div>
    <div class="menuContent">menü content</div>
    <div class="mainContent">
        main content<br>
    
    </div>
    <div class="menuFoot">menü foot</div>

    <div class="mainFoot">main foot</div>
    
<div style="clear: both;"></div>
    
</div>

</body>
</html>
Code:
body{
    margin:0px; 
    padding:0px;
}

#center
{
    width: 1000px;
      min-height: 500px;
    margin: 0px auto;
    border: 1px black solid;
} 

DIV.head
{
    width: 1000px;
    height: 200px;
    border: 1px black solid;
        
}

DIV.menuHead
{
    width: 185px;
    height: 60px;
    border: 1px black solid;
    float: left;
}

DIV.mainHead
{
    width: 810px;
    height: 60px;
    border: 1px black solid;
    float: left;

}

DIV.menuContent
{
    width: 185px;
    border: 1px black solid;
    float: left;
    min-height: 300px;

}

DIV.mainContent
{
    width: 810px;
    border: 1px black solid;
    float: left;

}

DIV.menuFoot
{
    width: 185px;
    height: 60px;
    border: 1px black solid;
    float: left;
    position: absolute;
    margin-top: 300px;
}

DIV.mainFoot
{
    height: 80px;
    width: 1000px;
    border: 1px black solid;
    float: left;
}
 
Zuletzt bearbeitet:
Moin,

kannst Du das [*HTML]-Tag gegen ein [*code] austauschen? Das HTML spinnt hier im Forum etwas.

Und beim nächsten Mal postest Du vielleicht lieber einen Link, dann kann man sich das sofort ansehen und mit diversen Webdeveloper-Plugins auch besser analysieren (ich empfehle Firebug).

Und zu Deiner Frage: .menuFoot hat sowohl "position:absolute" als auch "float:left". Eine Kombination aus den beiden macht keinen Sinn. Entferne am besten das position, das ist eher was für Fortgeschrittene. Im Regelfall kann man mit float und margin/padding alles ausreichend positionieren.
 
Moin,

kannst Du das [*HTML]-Tag gegen ein [*code] austauschen? Das HTML spinnt hier im Forum etwas.

Entferne am besten das position, das ist eher was für Fortgeschrittene. Im Regelfall kann man mit float und margin/padding alles ausreichend positionieren.

hab es in code geändert. ok ich versuche mal das position weg zu lassen, ich hoffe mal es zerschmeißt mir da nicht mein ganzes layout.

ansonsten, falls jemand eine lösung mit entsprechenden code hat... bin ich dafür sehr dankbar.
 
Da stimmt aber noch was anderes nicht...Du versuchst, Elemente mit einer Gesamtbreite von 3187px nebeneinander zu stellen. Also alle nebeneinander.

Richtigerweise werden nicht alle nebeneinander passen und sich dann untereinander anordnen, aber da sind entschieden zu viele floats drin.
 
Zurück
Oben