background position in IE und FF
opaque
- css
Hallo Forum
Ich habe ein CSS Problem und komme nicht dahinter:
im body hab ich einen Verlauf mit 1 px breite (repeat-x) und im ersten <div> einen Schatten und ich schaffe es nicht den backround im div so zu platzieren das es im IE und FF deckungsgleich ist.
Entweder es geht im FF oder im IE.
Der FF beginnt nicht bei 0px da muss ich
background-position: center -10px;
eingeben das es wirklich oben steht. Der IE interpretiert das richtig und verschiebt es.
Wenn ich background-attachment: scroll; verwende passt die Position in beiden browsern nur will ich das nicht bzw wenn dann gescrollt wird stimmt es im IE nicht mehr.
Hier der Code der Seite:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="shadow">
<div id="main">
<div id="header"></div>
<div id="breadcrumb">breadcrumb</div>
</div>
</div>
</body>
</html>
und hier der Code des CSS:
* {
margin: 0px;
padding: 0px;
}
html{
height: 100%;
}
body {
background-color: #000000;
background-image: url(../images/hg_verlauf.gif);
background-repeat: repeat-x;
height: 100%;
margin: 0px;
background-attachment: scroll;
background-position: center top;
}
#shadow {
background-repeat: no-repeat;
background-image: url(../images/shadow.gif);
width: 1015px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
padding: 0px;
background-attachment: scroll;
background-position: center top;
}
#main {
width: 955px;
margin: 10px 30px 0px;
height: 650px;
}
#header {
height: 140px;
width: 955px;
color: #CCCCCC;
background-image: url(../images/hg_header_allgemein.gif);
background-repeat: no-repeat;
background-position: center top;
}
#breadcrumb {
padding-right: 20px;
padding-left: 20px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
Mit dank im vorraus
Hi,
Der IE interpretiert das richtig
genau wie der IE hast Du Collapsing Margins nicht verstanden. Ein Tipp: Wenn der IE etwas anders macht als Firefox, ist die Wahrscheinlichkeit, dass der IE richtig liegt, bei annähernd 0%.
Cheatah
aber von der logik her sehe ich das so:
wenn Body margin-top: 0 px
Erstes <div> margin-top: 0px hat müsste doch der hintergrund auch oben bei null beginnen tut er aber nicht in FF/Safari.
walter
Hi,
Der IE interpretiert das richtig
genau wie der IE hast Du Collapsing Margins nicht verstanden. Ein Tipp: Wenn der IE etwas anders macht als Firefox, ist die Wahrscheinlichkeit, dass der IE richtig liegt, bei annähernd 0%.
Cheatah
Hi,
aber von der logik her sehe ich das so:
Deiner Logik mangelt es an Kenntnissen über Collapsing Margins. Firefox verhält sich völlig korrekt.
Cheatah