IE7 Positionsprobleme

Status
Nicht offen für weitere Antworten.

RaRu

Mitglied
Guten spät-Abend!

Ich bin noch sehr unerfahren was Css angeht. Zum ersten Mal versuchte ich ein Floatlayout zu erstellen und war auch sehr glücklich damit im Firefox. Doch als ich die Page dann im IE7 testen wollte - völlig falsche Positionierung! Was mache ich falsch!?

Habe die Page hier mal hochgeladen:
http://default11.de.funpic.de/test.html

Hier der Css Code
Code:
/* CSS von Gerda Dellbrügge */

body {
    font-family: Arial, Helvetica, sans-serif;;
    font-size: 11px;
    background-color: #FFFFFF;
    margin-top: 20;
    margin-bottom: 20;
    text-decoration: none;
    }

div.container {
    width: 800px;
    height: 500px;
    margin: auto;
    }

div.banner {
    width: 779px;
    height: 129px;
    background-image: url(../img/banner.png);
    }

div.inhalt {
    width: 559px;
    height: 375px;
    background-image: url(../img/bg.png);
    float: left;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #E2AF00;
    }
    
div.nav {
    width: 160px;
    height: 354px;
    background-image: url(../img/nav_bg.png);
    float: left;
    padding-top: 80px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    }

div.nav a {
    color: #FFFFFF;
    text-decoration: none;
    }

div.nav a:hover {
    color: #FFFF00;
    text-decoration: none;
    }

Hier die test.html
Code:
<html>

 <head>

   <title>Gerda Dellbrügge : Beratung . Coaching . Training</title>

   <!-- Styles extern -->
   <link rel="stylesheet" type="text/css" href="css/style.css">
   
 </head>

 <body>

   <div class="container">
   <div class="banner">
   </div>
   
   <div class="inhalt">

   </div>
   
   <div class="nav">
     <a href="">Willkommen</a><br><br>
     <a href="">&Uuml;ber mich</a><br><br>
     <a href="">Einzelgespr&auml;che</a><br><br>
     <a href="">Gespr&auml;chsgruppe</a><br><br>
     <a href="">Kontakt</a><br><br>
     <a href="">Links</a><br><br>
     <a href="">Impressum</a>
   </div>
   </div>
 </body>

</html>

Auch für Hinweise auf unsauberen und sinnlosen Code bin ich sehr dankbar. Ich würde mich freuen, wenn mir jemand weiterhelfen könnte!

Bis dahin,
Grüße RaRu
 
Hi und herzlich Willkommen im Forum :)

Du hast für das HTML-Dokument keinen Dokumenttyp deklariert, weshalb die Browser im "Quirksmode" laufen, und in diesem Darstellungsmodus unterstützt der IE das CSS-Boxmodell nicht.

Mit

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
hat der IE (6 + 7) in deinem CSS-Layout keine Positionsprobleme.
 
Status
Nicht offen für weitere Antworten.
Zurück