DIV-Konstrukt mit horizontalen Scrollbalken im IE?

1 Lkwjoe

Hallo zusammen,

mein erster Besuch in diesem Forum hat mit einem Problem zu tun, mit welchem ich mich seit einiger Zeit beschäftige.

Ich verwende schon seit einiger Zeit das nachfolgende DIV-Konstrukt zur Darstellung eines festen Headers, Footers und einer Navigation.

Nun habe ich aber das Problem, das im Element "content" eine Grafik eingebunden werden soll, welche breiter sein kann als die aktuelle Browsergrösse. Bei allen "normalen" Browsern (Moz, NS, FF) wird dann die horizontale Scrollleiste angezeigt (dies ist auch erwünscht) jedoch mal wieder nicht so beim IE (6.0).

Hat dafür jemand eine Lösung / Lösungsansatz?

Hier der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Feststehende Kopf- und Fu&szlig;zeile</title>
<style type="text/css">
body { 
	position:absolute;
	background:#ffffff;
}
html, body { 
	top:0; left:0; right:0;
	min-height:100%;
	margin:0;
	padding:0;
	width:100%;
}
#header_container {
	position:fixed;
	top:0; left:0; right:0;
	text-align:center;
	margin:0;
	height:3em;
	z-index:3;
}
#header {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	height:100%;
	background:#efefef;
	z-index:3;
	margin:0;
	padding:0.2em;
}
#menu {
	position:fixed;
	top:4em;
	left:.5em;
	width:9em;
	border: 3px dotted #dedede;
	padding:.5em;
}
#content {
	margin:0;
	padding-top:4.85em;
	padding-left:12em;
	padding-bottom:3em;
	z-index:2;
}
#footer_container {
	position:fixed;
	bottom:0; left:0; right:0;
	text-align:center;
	margin:0;
	height:2em;
	z-index:3;
}
#footer {
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	background:#efefef;
	z-index:3;
}
		
/* Nun f&uuml;r den MSIE */
* html, * html body {
	overflow:hidden;
	bottom:0;
	height:100%;
}
* html #header_container, * html #footer_container {
	position:absolute;
	width:100%;
	padding-right:16px;
}
* html #menu {
	position:absolute;
}
* html #header,* html #footer {
	height:100%;
	position:static;
}
* html #content {
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	height:100%;
	width:100%;
	overflow:auto;
	margin:0;
}

#menu li {
	list-style: none;
	margin:0;
	padding:0.3em;
}
#menu li#active {
	padding:0.5em;
	text-decoration:underline;
}
#menu a:link, #menu a:visited {
	display:block;
	background:#eeeeee;
	color:black;
	text-decoration:none;
	margin:0;
	padding:0.2em;;
}
#menu a:hover {
	background:#4f4f4f;
	color:#ffffff;
	text-decoration:underline;
}
* html #menu {
	margin:0;
	width:10.5em;    
/* Der IE soll das Element breiter darstellen, da margin und padding hier von 
    der Breite abgezogen wird! */
}
</style>
</head>
<body>
	
<div id="header_container">
	<h1 id="header">Seite mit Header und Footer (2)</h1>
</div>
	
<ul id="menu">
	<li><a href="beispiel1.htm">Einfacher Footer</a></li>
	<li><a href="beispiel2.htm">Feststehender Footer</a></li>
	<li><a href="beispiel3.htm">Feststehender Footer f&uuml;r den Internet Explorer</a></li>
	<li><a href="beispiel4.htm">Kombination: Ein Footer f&uuml;r alle</a></li>
	<li><a href="beispiel5.htm">Feststehende Kopf- und Fu&szlig;zeile</a></li>
	<li id="active">Alternative Positionierung, feste Navigation</li>
	<li><a href="index.htm#fixierte_navigation_bsp">Zum Artikel</a></li>
</ul>
	
<div id="content">
		
          <p><img src="div_test.jpg" width="800" height="200"></p>
	
</div>
	
<div id="footer_container">
  <div id="footer">
	<b>Und hier ist der endg&uuml;ltige Footer!</b>
  </div>
</div>

</body>
</html>

Vielen Dank schon mal vorab für Euere Unterstützung!

Gruss,
Joe :)

2 Jörg Kruse

Hallo Joe,

der horizontale Scrollbalken ist auch im IE da, wird allerdings vom Footer verdeckt - er lässt sich sehen, wenn du die Hintergrundfarbe von #footer entfernst.

Als Lösungsansatz fiele mir spontan nur ein, (zumindest) einen unteren Abschnitt des Footers transparent zu halten, bzw. den bottom Wert zu vergrößern, so dass der Scrollbalken noch Platz hat

mfG Jörg

3 Lkwjoe

Hi Jörg,

Rot werd, rot werd... :O

Super, vielen Dank!

Da hab ich jetzt tagelang herumgesucht und die einfachste Lösung hab ich nicht gesehen...

Jetzt komme ich weiter, kann die Seite endlich so bauen wie sie sein soll :))

Vielen Dank und Gruss,

Joe

DIV-Konstrukt mit horizontalen Scrollbalken im IE?

Beitrag schreiben (als Gast)