Oliver Dzierzon: CSS Hintergrund Possitionierung im Mozilla1.4

Hallo,

hoffe, dass mir hier jemand weiter helfen kann.
Mein Problem: Ich habe einen Div - Bereich als
Box zur Ausgabe von Fließtext. Als Hintergrund
habe ich ein Image mit genau den Abmessungen des
Div - Bereichs. Zusätzlich habe ich den Div -
ueber top und left Eigenschaft absolut positioniert.

Ueber "overflow:auto" will ich außerdem sicherstellen,
dass auch bei anderer Browsereinstellung mein Fließtext
nicht über die Grenzen des Div- Bereichs läuft.

Funktioniert mit IE6.0 auch einwandfrei. Beim Mozilla1.4
habe ich jedoch das Problem, das das Hintergrundbild um
den Betrag der Positionierung des Div - Elements versetzt
ist. Versuche ich das über die Hintergrund Possitionierung
auszugleiche, stimmt das ganze natürlich nicht mehr im IE.

Warum eigentlich possitioniert der Mozilla Hintergrund-
bilder nicht in Bezug auf das betreffende Element, sondern
wie  in meinem Fall in Bezug auf den Body.

Hier noch mal mein Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Verzweiflungstest</title>
<style>

#karte {
position:relative;
top: 100px;
left: 100px;
width: 250px;
height: 338px;
background: url("images/1.jpg") fixed;
overflow: auto;
}

.content {
color: #eeeeee;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
</head>

<body>
<div id="karte">
<p class="content">
test tset test test test tset tset
test tset test test test tset tset

.... (bis zum Überlauf)
</p>
</div>

</body>
</html>

Vielen Dank und viele Gruesse

Oliver

  1. Hi Oliver,

    quick 'n dirty:

    Wenn ich Moz eine andere Formatierung als IE aufzwingen will mache ich folgendes:

    IE:

    h1 {
       font-size: 1.2em;
    }

    für Moz schreibe ich:

    html > body h1 {
       font-size: 1.3em;
    }

    jetzt wird die Schrift im IE mit 1.2 im MOz mit 1.3em angezeigt.
    Wie gesagt Quick 'n dirty.

    HTH

    Rene

  2. Warum eigentlich possitioniert der Mozilla Hintergrund-
    bilder nicht in Bezug auf das betreffende Element, sondern
    wie  in meinem Fall in Bezug auf den Body.

    Wenn ich dich richtig verstanden habe, geht es dir einfach nur darum, eine box im Fließtext mit einem hintergrund auszustatten.
    Mit der angabe fixed in der background-definition aber setzt du fest, dass das hintergrundbild beim scrollen immer an der gleichen stelle bleibt.
    mozilla interpretiert das aber in bezug auf die gesamte seite und lässt das bild beim scrollen an der gleichen stelle in bezug auf das anzeigefenster stehen, der ie hingegen interpretiert die angabe so, dass der bsackground in bezug aucf das element, für das er definiert ist, festseteht, das heisst, wenn das element einen scrollbalken erhält bleibnt der background beim benutzen selbigens im dezg auf das elemnt stehen.
    da du aber offenbar den Hintergrund gar nicht feststehend haben willst, genügt es, einfahc die angabe fixed entweder durch scoll zu ersetzten oder wegzulassen.
    siehe auch untenstehenden link.

    1. da du aber offenbar den Hintergrund gar nicht feststehend haben willst, genügt es, einfahc die angabe fixed entweder durch scoll zu ersetzten oder wegzulassen.
      siehe auch untenstehenden link.

      Leider doch, ich will das beim scrollen das Hintergrundbild stehen bleibt.
      Es ist scheinbar doch ein mehr oder weniger zermürbendes Unterfangen CSS basierte Weblayouts zu entwerfen, die dann auch zumindest auf den gängigen Browsern einigermaßen anschaulich aussehen.

      Gruss

      Olli