K
kollmann84
Einen schönen Wochenstart euch allen,
bei mir ist nun ein neues Problem aufgetaucht und zwar ist der rechte Rahmen meines Inhaltsbereichs im IE 1px weiter links. Durch die Verwendung eines Hintergrundbildes verdoppelt sich in der Höhe des Inhaltsbereichs der Rahmen im IE. FF und Opera machen das wunderbar.
Ist das ein Box-Modell-Fehler?
Um noch ein bisschen Licht in die Sache zu bringen, ich habe vor ein 3-spaltiges Layout mit jeweils unterschiedlichen Hintergrundfarben zu erstellen. Die Spalten sollen jeweils auf einer Höhe mit dem Fußbereich sein unabhängig von der Größe des Inhalts in den Spalten.
Dann mal zum Code:
------------------------------
Vorweg das Hintergrundbild findet ihr im Anhang
HTML-Datei:
Stylesheet:
bei mir ist nun ein neues Problem aufgetaucht und zwar ist der rechte Rahmen meines Inhaltsbereichs im IE 1px weiter links. Durch die Verwendung eines Hintergrundbildes verdoppelt sich in der Höhe des Inhaltsbereichs der Rahmen im IE. FF und Opera machen das wunderbar.
Ist das ein Box-Modell-Fehler?
Um noch ein bisschen Licht in die Sache zu bringen, ich habe vor ein 3-spaltiges Layout mit jeweils unterschiedlichen Hintergrundfarben zu erstellen. Die Spalten sollen jeweils auf einer Höhe mit dem Fußbereich sein unabhängig von der Größe des Inhalts in den Spalten.
Dann mal zum Code:
------------------------------
Vorweg das Hintergrundbild findet ihr im Anhang
HTML-Datei:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="css/layout.css" />
<title>Test</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="l_sidebar">links</div>
<div id="r_sidebar">rechts<br><br></div>
<div id="content">Inhalt</div>
<div id="footer">Fußzeile</div>
<div id=""></div>
</div>
</body>
</html>Stylesheet:
Code:
@charset "ISO-8859-1";
body {
text-align: center;
}
#wrapper {
border: 1px solid #000;
background-color: #FFF;
background: #000 url(../images/bg.png) repeat-y;
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 10pt auto; /* standardkonforme horizontale Zentrierung */
width: 850px;
}
#header {
background-color: #FFF;
border-bottom: 1px solid #000;
height: 130px;
}
#l_sidebar {
float: left;
overflow: hidden;
width: 20%;
}
#r_sidebar {
float:right;
overflow: hidden;
width: 35%;
}
#content {
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 0 !important; /* Für Firefox, Opera & Co. */
margin: 0 35% 0 20%; /* Für IE */
overflow: hidden;
}
#footer {
background-color: #FFF;
border-top: 1px solid #000;
clear: both;
}
