Hallo,
ich habe diesen Code zum Kennenlernen von Css aus dem Netz. Habe den text etwas angepasst von den von den Maßen her.
In Firefox 2.0.0.1 und Opera 9.10 werden die DIV korrekt dargestellt.
Nur der IE7 schafft es irgendwie nicht. Ich habe auch eine positive XHTML 1.0 Validierung erhalten.
Der IE scheint sich nicht so ganz an die Regeln zu halten oder täusche ich mich ?
Könnte mir hier jmd weiterhelfen, wie ich im IE das gleiche Ergebnis erziehle wie im Firefox und Opera ?
ich habe diesen Code zum Kennenlernen von Css aus dem Netz. Habe den text etwas angepasst von den von den Maßen her.
In Firefox 2.0.0.1 und Opera 9.10 werden die DIV korrekt dargestellt.
Nur der IE7 schafft es irgendwie nicht. Ich habe auch eine positive XHTML 1.0 Validierung erhalten.
Der IE scheint sich nicht so ganz an die Regeln zu halten oder täusche ich mich ?
Könnte mir hier jmd weiterhelfen, wie ich im IE das gleiche Ergebnis erziehle wie im Firefox und Opera ?
Code:
<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left, Top and Bottom Frames Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontentLeft{
position: absolute;
top: 110px;
left: 0;
bottom: 20px;
width: 200px; /*Width of left frame div*/
overflow: auto; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#framecontentTop{
position: absolute;
top: 0;
left: 0; /*Set left value to WidthOfLeftFrameDiv*/
right: 0px;
width: 100%;
height: 110px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: gray;
color: white;
}
#framecontentBottom{
position: absolute;
top: auto;
left: 0; /*Set left value to WidthOfLeftFrameDiv*/
bottom: 0;
right: 0;
height: 20px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: red;
color: white;
width: 100%;
}
#maincontent{
position: absolute;
top: 110px; /*Set top value to HeightOfTopFrameDiv*/
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
bottom: 20px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html #maincontent{ /*IE6 hack*/
}
* html #framecontentTop, * html #framecontentBottom{ /*IE6 hack*/
}
* html #framecontentLeft{ /*IE6 hack*/
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="framecontentTop">
<div class="innertube">
<h1>CSS Left, Top and Bottom Frames Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
<div id="framecontentLeft">
<div class="innertube">
<h1>CSS Left, Top and Bottom Frames Layout</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
</div>
</div>
<div id="framecontentBottom">
<div class="innertube">
<h3>Sample text here</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Dynamic Drive CSS Library</h1>
<p><script type="text/javascript">filltext(255)</script></p>
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
</div>
</div>
</body>
</html>
