Emanuel: Layoutprobleme im IE7

Beitrag lesen

SELF-Forum

Layoutprobleme im IE7

Emanuel
– Informationen zu den Bewertungsregeln

Hallo Leute!
Ich habe ein  Layout bestehend aus Header, Main (left, content, right) und Footer. Grundidee von dieser Seite (ist vermutlich bekannt): 'http://www.alistapart.com/articles/holygrail' und noch auf meine "Bedürfnisse" angepasst.
Das Layout passt im aktuellsten FF, IE6(!) u.a. aber nicht im IE7. Auf den ersten schnellen Blick sieht es auch im IE7 normal aus, allerdings erblickt man recht schnell die horizontale Scrollbar, mit der man auf eine weiße Spalte scrollen kann - sehr unnnötig. Hier der Code, copy - paste und man kann es sich ansehen (wenn es nicht allzugroße Umstände macht).
Ansonsten hier noch Links zu Bildern:
1.) FF 'http://s7.directupload.net/images/080222/5ldxti58.png'
2.) IE7_1 'http://s7.directupload.net/images/080222/z2omgsu7.png'
3.) IE7_2 http://s7.directupload.net/images/080222/nl9ayv2u.png' (rechts weiße Spalte)

Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<style type="text/css">  
*  
{  
 margin:0;  
}  
  
html, body  
{  
 font-size: 100.1%;  
 height:100%;  
 margin:0em;  
 padding:0em;  
 width:100%;  
 min-width:60em;  
}  
  
.outer  
{  
 min-height:100%;  
 margin-bottom:-3em;  
 height:auto;  
}  
  
* html .outer  
{  
 height:100%;  
}  
  
/* commented backslash hack \*/  
html, body{height:100%;}  
/* end hack */  
  
/* REDHEADER */  
div.redheader  
{  
 background:#8d2132;  
 height:4em;  
}  
  
/* WHITEHEADER */  
div.whiteheader  
{  
 background:#f9fbed;  
 height:5.3125em;  
}  
  
/* BLUEHEADER */  
div.blueheader  
{  
 background:#66808c;  
 height:1.25em;  
}  
  
/* MAIN */  
  
.main{  
 padding-left:9em;  
 padding-right:13em;  
}  
  
.left{  
 background:red;  
 position:relative;  
 float:left;  
 width:7em;  
 margin-left:-9em;  
 padding:1em 1em;  
}  
  
/*** IE6 Fix ***/  
* html .left {  
 left:9em;  
}  
  
.content{  
 background:brown;  
 position:relative;  
 float:left;  
 width:100%;  
 padding:1em 2em;  
}  
  
.right{  
 background:yellow;  
 position:relative;  
 float:left;  
 width:7em;  
 margin-right:-9em;  
 padding:1em 1em;  
}  
  
/* FOOTER */  
  
.footer{  
 background:blue;  
 clear:both;  
 height:3em;  
}  
</style>  
</head>  
<body>  
<div class="outer">  
 <div class="redheader">  
  Redheader  
 </div>  
 <div class="whiteheader">  
  Whiteheader  
 </div>  
 <div class="blueheader">  
  blueheader  
 </div>  
 <div class="main">  
  <div class="left">  
   left  
  </div>  
  <div class="content">  
   content  
  </div>  
  <div class="right">  
   right  
  </div>  
 </div>  
</div>  
<div class="footer">  
 footer  
</div>  
</body>  
</html>

Ich hoffe ihr findet den Hund!

MfG Emanuel

Beitrag melden
–
Informationen zu den Bewertungsregeln