Philippé: Firebird zeigt Hintergrundbild nicht an

Hallo,

ich habe ein kleines Problem. Der Mozilla Firefox 1.0 zeigt das Hintergrundbild eines div-Containers nicht an.

Aufbau der XHTML-Seite (gekürzt):
<body>

<div id="framework">

<div id="main">

</div>

<div id="column">

</div>

</div>

</body>

"main" und "column" liegen jeweils nebeneinander (float: left bzw. right).

Das Framework:
#framework {
    background-image: url('./images/50feet.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    height: 100%;
    margin: 0;
    overflow: visible;
    padding: 0;
    width: 100%;
}

Opera und IE zeigen alles korrekt an, nur der Firefox will eine statische, feste Höhe haben, sonst fehlt das Hintergrundbild (das Bild soll durch "column" durchschauen, zwecks "Faux Columns").
Kennt jemand eine Alternative?

Danke schon einmal.

MfG

  1. Hi,

    background-image: url('./images/50feet.png');

    die '' solltest Du ein paar Browsern zuliebe weglassen.

    Opera und IE zeigen alles korrekt an,

    nein, falsch.

    nur der Firefox will eine statische, feste Höhe haben,

    nein, eine real existierende Höhe.

    freundliche Grüße
    Ingo

    1. Hi,

      Hi,

      background-image: url('./images/50feet.png');
      die '' solltest Du ein paar Browsern zuliebe weglassen.

      Welche z.B.?

      Opera und IE zeigen alles korrekt an,
      nein, falsch.

      Ähm, ich habe im Vergleich zum IE oder Opera keine Fehler feststellen können. Wie bereits gesagt, es waren nur Code-Ausschnitte. Normaler Weise ist es der IE, der rumzickt, komischer Weise diesmal der FF.

      nur der Firefox will eine statische, feste Höhe haben,
      nein, eine real existierende Höhe.

      Habe ich gemeint... *rolleyes*

      1. Hi,

        background-image: url('./images/50feet.png');
        die '' solltest Du ein paar Browsern zuliebe weglassen.
        Welche z.B.?

        kann ich Dir jetzt leider nicht mehr sagen. Wohl aber keine aktuellen. Dennoch sind die '' nur optional und daher nicht erforderlich, weshalb ein Weglassen auch noch 2 Byte einspart. ;-)

        Ähm, ich habe im Vergleich zum IE oder Opera keine Fehler feststellen können. Wie bereits gesagt, es waren nur Code-Ausschnitte. Normaler Weise ist es der IE, der rumzickt, komischer Weise diesmal der FF.

        Opera orientiert sich in vielen Fällen an der fehlerhaften Interpretation des IE. Und dieser "zickt" nur bei Unvermögen bzw. Bugs des Browsers rum, während Firefox eher bei fehlerhaften Definitionen streikt.

        nur der Firefox will eine statische, feste Höhe haben,
        nein, eine real existierende Höhe.
        Habe ich gemeint... *rolleyes*

        aber nicht geschrieben. %-Werte sind für mein Verständnis weder statisch noch fest.

        freundliche Grüße
        Ingo

        1. Hi,

          kann ich Dir jetzt leider nicht mehr sagen. Wohl aber keine aktuellen. Dennoch sind die '' nur optional und daher nicht erforderlich, weshalb ein Weglassen auch noch 2 Byte einspart. ;-)

          Ich kann Dir versichern, dass macht sich bei meinem exessiven Gebrauch von Leerzeichen im Design nicht bemerkbar. ;)

          Opera orientiert sich in vielen Fällen an der fehlerhaften Interpretation des IE. Und dieser "zickt" nur bei Unvermögen bzw. Bugs des Browsers rum, während Firefox eher bei fehlerhaften Definitionen streikt.

          Hmm, ich habe die Erfahrung gemacht, dass Opera fast alles "richtig" darstellt und der MFF erst danach kommt. Strange.

          aber nicht geschrieben. %-Werte sind für mein Verständnis weder statisch noch fest.

          Unter statisch und fest verstehe ich z.B. 500px.

          MfG Philippé

          1. Hi,

            Hmm, ich habe die Erfahrung gemacht, dass Opera fast alles "richtig" darstellt und der MFF erst danach kommt. Strange.

            Tja, da hast Du ihn noch nicht genug herausgefordert. ;-)
            Ich habe schön öfter festgestellt, daß sich Opera viel lieber am IE als den Specs orieniert und darüber hinaus auch schon in Einzelfällen Fehldarstellungen erlebt, die eindeutig Browserbugs waren.

            freundliche Grüße
            Ingo

  2. Hi,

    <div id="framework">
            <div id="main">
            </div>
            <div id="column">
            </div>
        </div>
    "main" und "column" liegen jeweils nebeneinander (float: left bzw. right).
    #framework {
        background-image: url('./images/50feet.png');
        height: 100%;

    Opera und IE zeigen alles korrekt an, nur der Firefox will eine statische, feste Höhe haben, sonst fehlt das Hintergrundbild (das Bild soll durch "column" durchschauen, zwecks "Faux Columns").

    height:100% läuft auf height:auto raus, falls nicht das Elternelement eine festgelegte Höhe hat.
    Die Höhe des div richtet sich also nach dem Inhalt.
    Die beiden div innerhalb des framework nimmst Du per float aus dem framework raus.
    Bleibt kein Inhalt mehr übrig, die Höhe ist also 0.

    Abhilfen:

    • für height ungleich auto sorgen
    • für Inhalt im framework sorgen, der unterhalb von main und column angezeigt wird (clear!)

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hi,

      Hi,

      height:100% läuft auf height:auto raus, falls nicht das Elternelement eine festgelegte Höhe hat.
      Die Höhe des div richtet sich also nach dem Inhalt.
      Die beiden div innerhalb des framework nimmst Du per float aus dem framework raus.
      Bleibt kein Inhalt mehr übrig, die Höhe ist also 0.

      Danke, klasse Erklärung. Ist einleuchtend.

      Abhilfen:

      • für height ungleich auto sorgen
      • für Inhalt im framework sorgen, der unterhalb von main und column angezeigt wird (clear!)

      Stimmt. Hab den Footer mit reingepackt, jetzt klappt es.

      Danke!

      cu,
      Andreas

      cu2 Philippé