✔ Scrollbarproblem im IE

selle1 · 7. Februar 2008

Hallo zusammen,

ich habe das Modell von stu nichols angewandt und habe nun noch ein kleines Problem.
Im FF reicht der Scrollbalken bis zum Textende, im IE leider nicht. Habe schon mit padding und margin versucht aber leider kein Erfolg. Die letzte Möglichkeit wäre aus meiner Sicht ein paar Lerrzeilen einzufügen, ist aber eine Notlösung.

HTML:

<!-- 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">
<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:4;
	top:200px;
	bottom:40px;
	width:900px;
	margin-left:-451px;
	left:50%;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#fff;
	background-color: #E1DAB3;
	padding-bottom: 10px;
	}

* html #content {
	top:0;
	bottom:0;
	height:100%;
	width:900px;
	border-top:200px solid #fff;
	border-bottom:45px;
	}

#head {
	position:absolute;
	margin-left:-451px;
	left:50%;
	top:0;
	width:900px;
	min-width:900px;
	height:200px;
	background:#fff;
	font-size:1em;
	z-index:5;
	border:1px solid #000;
	background-color: #D6CC94;
	}

* html #head {
	top:0px; width:900px; height:200px;
	}

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:-451px;
	left:50%;
	bottom:0;
	width:900px;
	min-width:900px;
	height:40px;
	font-size:1em;
	z-index:5;
	border:;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
	color:#000;
	background-color: #D6CC94;
	margin-bottom: 0px;
	}

* html #foot {
	bottom:0px;
	width:900px;
	height:40px;
	}


#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/5/6 Stuart Nicholls</p>

</div>

</body>
</html>

Maik · 7. Februar 2008

Hi,

du hast im Selektor * html #content den unteren Rahmen nicht vollständig definiert:

Code:

* html #content {
        top:0;
        bottom:0;
        height:100%;
        width:900px;
        border-top:200px solid #fff;
        border-bottom:45px solid #fff;
        }

selle1 · 7. Februar 2008

Hallo Maik,

mein Code sieht nun so aus, aber der Rahmen um den Footer wird nun im FF nicht angezeigt. Warum?

HTML:

* html #content {
	top:0;
	height:100%;
	width:900px;
	border-top:200px solid #fff;
	border-bottom:40px solid #fff;
	border-bottom-color: #E1DAB3;
	}

Außerdem habe ich den Rahmen des Footers bearbeitet:

HTML:

* html #foot {
	bottom:0px;
	width:900px;
	height:40px;
	border:solid 1px #000;
	}

Sorry, hat sich erledigt. Habe nun noch folgendes gemacht:

HTML:

#foot {
	text-align:center;
	position:absolute;
	margin-left:-451px;
	left:50%;
	bottom:0;
	width:900px;
	min-width:900px;
	height:40px;
	font-size:1em;
	z-index:5;
	border:;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:normal;
	color:#000;
	background-color: #D6CC94;
	margin-bottom: 0px;
	border: solid 1px #000;
	}

Trotzdem vielen Dank

Maik · 7. Februar 2008

Der "Star-HTML-Hack" (* html #foot) wird nur vom IE (Win) gelesen, und im Selektor #foot hast du keine Angaben zur border-Eigenschaft festgelegt:

Code:

#foot {
	text-align:center;
	position:absolute;
	margin-left:-451px;
	left:50%;
	bottom:0;
	width:900px;
	min-width:900px;
	height:40px;
	font-size:1em;
	z-index:5;
	border:;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
	color:#000;
	background-color: #D6CC94;
	margin-bottom: 0px;
	}

selle1 · 7. Februar 2008

Siehst Du,

wieder etwas gelernt. Man muss das ja erst einmal wissen, bevor man verzweifelt.

Dank Dir

✔ Scrollbarproblem im IE

selle1

Erfahrenes Mitglied

Maik

selle1

Erfahrenes Mitglied

Maik

selle1

Erfahrenes Mitglied

Neue Beiträge