Holger24: Darstellungsfehler im IE7

SELF-Forum

Darstellungsfehler im IE7

Holger24
– Informationen zu den Bewertungsregeln

Hallo,

ich bastel zurzeit an einer Internetseite...d.h. eigentlich stehe ich ziemlich am Anfang und bin gerade dabei ein passendes HTML-MarkUp zu schreiben...

Mein Problem: Was im Firefox passt wird im IE7 falsch dargestellt. Okay, das Problem IE ist nicht neu, aber irgendwie bekomme ich keine richtige Darstellunf hin.

Für jeden Tipp bin ich sehr dankbar, auch wenns jetzt etwas länger wird!

Also, mein geplantes Template soll einen Header, einen Inhaltsteil, eine Sidebar (unterteilt in zwei Spalten) und einen Footer haben. Im Firefox sieht das ganze so aus(den Footer sieht man nicht, passt aber):

Verkleinern des Fensters ist kein Problem, beide Seitenleisten bleiben nebeneinander.

Im IE (ich hab die VErsion 7) hab ich bei gleicher auflösung folgendes Bild:

Mein HTML-Code sieht so aus:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
  
  <head>  
    <title>Markup</title>  
    <meta **********="Content-Type" content="text/html; charset=UTF-8"/>  
    <style type="text/css" media="screen">  
		@import url( css/style.css);  
	</style>  
  </head>  
  
  <body>  
     <div id="wrapper">  
  
         <div id="header">  
            Header  
         </div> <!-- header -->  
  
  
         <div id="sidebar">  
  
             <div class="halfsize left">  
                <h2>Sidebar1</h2>Zwei flinke Boxer ...  
             </div> <!-- sidebar1 -->  
  
             <div class="halfsize right">  
                <h2>Sidebar2</h2>Zwei flinke Boxer ...  
             </div> <!-- sidebar2 -->  
  
          </div> <!-- sidebar -->  
  
          <div id="content">  
             <h2>Überall</h2> dieselbe alte Leier. ...  
          </div> <!-- content -->  
  
          <div id="footer">  
              Footer  
          </div>  
  
     </div> <!-- wrapper -->  
  
  </body>  
</html>

und meine CSS-Datei:

  
/******  General  ******/  
* {  
   margin: 0;  
   padding: 0;  
}  
  
html {  
  min-height:101%;  
}  
  
body {  
  font-family: Verdana, sans-derif;  
  font-size: small;  
  background: #fff;  
}  
  
.fullsize {  
   width: 100%;  
}  
  
.halfsize {  
   width: 43%;  
}  
  
.right {  
   float: right;  
}  
  
.left {  
   float: left;  
}  
  
.common {  
   clear: both;  
}  
  
/****** Wrapper ******/  
#wrapper {  
   width: 100%;  
   min-width: 760px;  
   max-width: 1990px;  
   margin: 0 auto;  
   background: #ff99ff;  
   text-align: left;  
  
  
}  
  
/****** Content ******/  
#content {  
   width: 56%;  
   background: orange;  
   padding: 10px;  
  
}  
/****** Sidebar (Container)******/  
#sidebar {  
   float: right;  
   width: 36%;  
   background: yellow;  
   padding: 10px;  
  
  
}  
  
  
/****** Header ******/  
#header {  
   background: fuchsia;  
}  
  
/****** Footer ******/  
#footer {  
   clear: both;  
   background: green;  
}

Hab schon verschiedene DOCTYPES für den Herrn Internet-Explorer versucht, Ergebnis ist immer das gleiche. Warum wird mein Content-Block nicht wie im CSS mit einer Breite von 56% angezeigt? Und warum "springt" die zweite Spalte in der Seitenleiste unter die erste?

Eigentlich habe ich schon öfter an Seiten rumgebastelt, aber was jetzt hier falsch ist...?

Danke für jede Hilfe!
Gruß Holger

Beitrag melden
–
Informationen zu den Bewertungsregeln