✔ CSS-Layout; IE hat Probleme

Eagle-PsyX-

Eagle-PsyX-

Erfahrenes Mitglied
Hi,

ich habe ein kleines Problem mit diesem Layout von mir. Im Internet Explorer (6) ist das Design vollkommen zerschoßen, hab es mit paar 'Tricks' probiert, hat aber nichts gebracht. Hat jemand eine Idee? Sollte eigentlich recht einfach zu lösen sein...

Oder hier anschauen: http://eaglepsyx.dyndns.org/Engelhardt/

CSS: 
* {
  padding: 0;
  margin: 0;
  border: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #EEE;
  overflow: hidden;
}

#content  {
  position: absolute;
  top: 135px;
  left: 0;
  right: 0;
  bottom: 75px;
  overflow: auto;
  text-align: center;
  vertical-align: middle;
  background-color: #FEF;
  z-index: 1;
}

#head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 135px;
  line-height: 135px;
  text-align: center;
  vertical-align: middle;  
  background-color: #0F0;
  z-index: 2;
}

#foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75px;
  line-height: 75px;
  vertical-align: middle;
  text-align: center;
  background-color: #00F;
  z-index: 3;
}

und der HTML-Code:
HTML: 
<div id="head">
HEADER
</div>

<div id="foot">
FOOTER
</div>

<div id="content">
Inhalt <br />
</div>

PS: Habe das Beispiel von Stu Nichlolls probiert, obwohl ich den Quelltext nur kopiert habe, gab es da Probleme mit der "Overflow"/Scrollbalken.

MfG
Eagle
 
Hab den Quelltext 1:1 vom <Style> Bereich und den <Body> Bereich übernommen.
Siehe hier:
http://eaglepsyx.dyndns.org/Engelhardt/index.php?template=test

Und:
CSS: 
html {
	height:100%; 
	max-height:100%; 
	padding:0; 
	margin:0; 
	border:0; 
	background:rgb(209,205,193);
	font-size:76%; 
	font-family:georgia, palatino linotype, times new roman, serif;
	/* hide overflow:hidden from IE5/Mac */ 
	/* \*/ 
	overflow: hidden; 
	/* */ 
	}
ist auch übernommen :-/?
 
*hüstel*

Auszug aus Stu Nicholls' Quellcode zu http://www.cssplay.co.uk/layouts/bodyfix.html:
Code: 
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


Ansonsten tausch mal diese Zeile
Code: 
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="Template/Engelhardt/StyleIE.css" /><![endif]-->

gegen diese aus, damit sich der IE6 wie der IE7 verhält:
Code: 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
Quelle: http://code.google.com/p/ie7-js/

mfg Maik
 
Vielen Dank!

Hm ok, ich sag ja, er benutzte Strict ich Transitional.
Hätte nicht gedacht dass danach der Code immer noch Valide ist, nungut, ist jetzt auch nur 9 Zeilen lang (HTML^^).
 
Eagle-PsyX- hat gesagt.:
Hm ok, ich sag ja, er benutzte Strict ich Transitional.
Zum Vergrößern anklicken....
Na und? Funktioniert mit beidem.

Code: 
<!-- Put IE into quirks mode -->
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout </title>
<style type="text/css">

html {
        height:100%;
        max-height:100%;
        padding:0;
        margin:0;
        border:0;
        background:rgb(209,205,193);
        font-size:76%;
        font-family:georgia, palatino linotype, times new roman, serif;
        /* hide overflow:hidden from IE5/Mac */
        /* \*/
        overflow: hidden;
        /* */
        }

body {
        height:100%;
        max-height:100%;
        overflow:hidden;
        padding:0;
        margin:0;
        border:0;
        background:rgb(209,205,193);
        }

#content {
        display:block;
        overflow:auto;
        position:absolute;
        z-index:3;
        top:150px;
        bottom:52px;
        width:640px;
        margin-left:-321px;
        left:50%;
        border-left:1px solid #000;
        border-right:1px solid #000;
        background:#fff;
        }

* html #content {
        top:0;
        bottom:0;
        height:100%;
        width:642px;
        border-top:154px solid #fff;
        border-bottom:50px solid #fff;
        }

#head {
        position:absolute;
        margin-left:-321px;
        left:50%;
        top:0;
        width:640px;
        min-width:640px;
        height:150px;
        background:#fff;
        font-size:1em;
        z-index:5;
        border:1px solid #000;
        }

* html #head {
        top:2px; width:642px; height:148px;
        }

a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7, a.nav8 {width:80px; height:150px; display:block; float:left; background:url(heading.jpg); text-align:center; font-size:1em; font-weight:bold; color:#000; text-decoration:none; font-family:verdana, arial, sans-serif; line-height:25px; overflow:hidden;}
#head a .pad {display:block; width:80px; height:125px;background:transparent; border-bottom:1px solid #000;}

a.nav1 {background-position:0 150px;}
a.nav2 {background-position:-80px 150px;}
a.nav3 {background-position:-160px 150px;}
a.nav4 {background-position:-240px 150px;}
a.nav5 {background-position:-320px 150px;}
a.nav6 {background-position:-400px 150px;}
a.nav7 {background-position:-480px 150px;}
a.nav8 {background-position:-560px 150px;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {background:#f80; color:#fff; cursor:pointer; display:block; width:80px; height:25px; cursor:hand;}
a.nav2:hover {background-position:-80px 0;}
a.nav2:hover .button {display:block; width:80px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}
a.nav3:hover {background-position:-160px 0;}
a.nav3:hover .button {display:block; width:80px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}
a.nav4:hover {background-position:-240px 0;}
a.nav4:hover .button {display:block; width:80px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}
a.nav5:hover {background-position:-320px 0;}
a.nav5:hover .button {display:block; width:80px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}
a.nav6:hover {background-position:-400px 0;}
a.nav6:hover .button {display:block; width:80px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}
a.nav7:hover {background-position:-480px 0;}
a.nav7:hover .button {display:block; width:80px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}
a.nav8:hover {background-position:-560px 0;}
a.nav8:hover .button {display:block; width:80px; height:25px; background:#f80; color:#fff; cursor:pointer; cursor:hand;}


#foot {
        text-align:center;
        position:absolute;
        margin-left:-321px;
        left:50%;
        bottom:0;
        width:640px;
        min-width:640px;
        height:50px;
        background:url(heading.jpg); background-position:0 100px;
        font-size:1em;
        z-index:5;
        border:1px solid #000;
        font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
        font-weight:bold;
        color:#000;
        }

* html #foot {
        bottom:2px; width:642px; height:48px;
        }


#content p {
        padding:5px; text-align:justify;
        }
.boldhead {
        font-size:1.5em;
        font-weight:bold;
        }
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}

* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}

</style>
</head>

<body>
<div id="head"><a class="nav1" href="index.html" title="Layouts"><span class="pad"></span><span class="button">Back</span></a><a class="nav2" href="body2.html" title="Layout version 1"><span class="pad"></span><span class="button">Layout 2</span></a><a class="nav3" href="body4.html" title="Layout version 2"><span class="pad"></span><span class="button">Layout 3</span></a><a class="nav4" href="body5.html" title="Layout version 3"><span class="pad"></span><span class="button">Layout 4</span></a><a class="nav5" href="http://www.cssplay.co.uk/index.html" title="Home"><span class="pad"></span><span class="button">Home</span></a><a class="nav6" href="#"><span class="pad"></span><span class="button">Page #</span></a><a class="nav7" href="#"><span class="pad"></span><span class="button">Page #</span></a><a class="nav8" href="http://www.cssplay.co.uk/comments/comments.php?comment_id=fixit mk4" title="Your comments"><span class="pad"></span><span class="button">Comments</span></a></div>
<div id="foot">&copy; 2004/5/6 Stuart A Nicholls ~ All rights reserved.</div>

<div id="content">
<p class="boldhead">Model boxes ~ how to fix them in position.</p>
<p>A layout with a fixed width, a fixed header and a fixed footer that stays on the bottom. The content area fits between the header and footer and scrolls if necessary. Plus the bonus of a CSS navigation menu that works in all browsers.</p>
<p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox.</p>
<p>NN7 displays correctly but an absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
<p class="bold"><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=fixit mk4" title="Your comments">Comments</a></p>
<img class="left" src="box.jpg" title="little boxes" alt="little boxes" />
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<img class="right" src="box2.jpg" title="little boxes" alt="little boxes" />
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p class="lefttext">
  <img class="right" src="box.jpg" title="little boxes" alt="little boxes" />

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

<p class="righttext">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p class="lefttext">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
  ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
  ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
  in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
  facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
  luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p class="righttext">
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
  eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
  qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>&copy; 2004-2008 Stuart Nicholls</p>
<a href="http://web.top.org/css/" title="CSS (Design) - TOP.ORG"><img style="border:none;" src="http://img1.top.org/toporg_1667.gif" alt="CSS (Design) - TOP.ORG" /></a>

</div>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück