nicht angemeldet
Hallo zusammen,
ich stehe momentan richtig auf dem Schlauch!
Das ist ein vereinfachtes Beispiel:
Mein CSS:
* {
margin: 0;
padding: 0;
font-family: arial, tahoma, helvetica, verdana, sans-serif;
color: #666;
}
body {
height: 100%;
width: 100%;
}
#wrapper_header {
width: 100%;
border-top: 1px solid #979797;
border-bottom: 1px solid #979797;
background: #fff url(../images/header_bgr.jpg) 0px 0px repeat-x;
height: 80px;
text-align: center;
}
#header {
width: 960px;
border: 1px solid red; /*nur zum testen*/
display: block;
margin: auto;
}
.spacer {
height: 60px;
}
Mein HTML:
<!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="de-de" lang="de-de" >
<head>
<title>test</title>
<link rel="stylesheet" href="elements/css/layout.css" type="text/css" />
</head>
<body>
<div class="spacer"></div>
<div id="wrapper_header">
<div id="header"></div>
</div>
</body>
</html>
Mein Problem:
Wenn das Browserfenster kleiner als 960px breit gezogen wird, wird ein waagerechter Scrollbalken angezeigt. OK. Scrollt man nach rechts, so werden die beiden Border und die Hintergrundgrafik des wrapper_header abgeschnitten (sie hören an der Breite des Fensters auf).
Der IE 6 macht keine Problme, aber eben Firefox 3.0.1.
Wo steckt mein Fehler - was übersehe ich?
Vielen Dank für Eure Hilfe!
Schöne Grüße
Robert