opaque: background position in IE und FF

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

  1. 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

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. 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

      1. 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

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes