Bittersuesz: Hintergrund in Box im Firefox nicht passgenau

Ich bin schon seit längerer Zeit immer mal wieder zum stillen Lesen hier gewesen, doch nun brauche ich auch mal Hilfe. ;)

Ich hatte meine Homepage (www.annteegen.de) bis heute in einem Pop-up-Fenster, doch nun habe ich auf eine CSS-Box umgestellt. Habe in Ulli Meybohms HTML-Editor Phase 5 fleißig alles zu meiner Zufriedenheit zurechtgebastelt, doch nach dem Hochladen ist mir jetzt aufgefallen, dass es überraschenderweise zwar im IE wie gedacht angezeigt wird, im Firefox jedoch nicht.

Hier mein (relevanter) CSS-Code:

  
html, body {  
text-align: center;  
margin: 30;  
}  
div#box {  
    text-align: left;  
    margin: 0 auto;  
    width: 700px;  
    height:525px;  
    border: 1px solid #ffffff;  
    padding:10px;  
    background-color:#000;  
    background-repeat: no-repeat;  
    background-image:url(hg03s.png);  
    background-position: center 30px;  
    background-attachment:fixed;  
    overflow:auto;  
  }

Würde mich über Hilfe sehr freuen!

  1. www.annteegen.de

    ... doch nach dem Hochladen ist mir jetzt aufgefallen, dass es überraschenderweise zwar im IE wie gedacht angezeigt wird, im Firefox jedoch nicht.

    Verwende den richtigen Doctype.
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    Das heisst mindestens transitional MIT Adresse oder strict mit Adresse

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Das heisst mindestens transitional MIT Adresse oder strict mit Adresse

      Meine Site ist aber nicht "strict" gehalten, deshalb ja die Angabe "transitional". & die Adresse MUSS doch nicht dabei stehen, soweit ich weiß, oder neuerdings doch?

      1. Das heisst mindestens transitional MIT Adresse oder strict mit Adresse

        Meine Site ist aber nicht "strict" gehalten, deshalb ja die Angabe "transitional". & die Adresse MUSS doch nicht dabei stehen, soweit ich weiß, oder neuerdings doch?

        Nicht das MUSS der Adresse, sondern Einstimmigkeit der Browser bezüglich Darstellung ist dein Thema.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Nicht das MUSS der Adresse, sondern Einstimmigkeit der Browser bezüglich Darstellung ist dein Thema.

          OK, danke, habe das jetzt für index.html mal geändert. Sogleich sind IE & Firefox sich einig, aber die Darstellung ist jetzt sozusagen noch falscher...

          1. Hi,

            Nicht das MUSS der Adresse, sondern Einstimmigkeit der Browser bezüglich Darstellung ist dein Thema.

            OK, danke, habe das jetzt für index.html mal geändert. Sogleich sind IE & Firefox sich einig, aber die Darstellung ist jetzt sozusagen noch falscher...

            Das liegt dann an deinem falschen Code.

            MfG ChrisB

            --
            “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
            1. Das liegt dann an deinem falschen Code.

              Ach nee. ;) Aber ich sehe nicht, was falsch ist...

              1. Das liegt dann an deinem falschen Code.
                Ach nee. ;) Aber ich sehe nicht, was falsch ist...

                So sehe ich nicht, was falsch sein könnte, da ein Soll, das verschieden vom Haben existiert, von dir gar nie verbal geäussert wurde.
                Dabei wäre doch ein anderes Soll relativ leicht zu formulieren:

                Dein HTML soll Linklisten als Listen auszeichen.
                Dein HTML soll <br> nicht zur Formatierung missbrauchen.
                Dein HTML soll keine deprecated Elemente wie <font> verwenden.
                Dein HTML soll keine deprecated Attribute wie link, alink, vlink verwenden.
                Dein HTML soll strukturierende Elemente wie h1..h6, ul, ol oder dl verwenden.
                Dein HTML soll keine &entities; verwenden, sondern gemäss dem Zeichen-encoding (gemeinhin charset) Zeichen verwenden.
                Dein HTML soll in Abwesenheit einer charset-Angabe im HTTP-Header eine <meta> Angabe für das Charset beinhalten.

                mfg Beat

                --
                ><o(((°>           ><o(((°>
                   <°)))o><                     ><o(((°>o
                Der Valigator leibt diese Fische
                1. Dein HTML soll [...]

                  Oh Gott, ja. Eigentlich weiß ich das inzwischen auch. Wird beizeiten auch alles aktualisiert. Danke für die vernichtende Auflistung. ;)

                  1. @@Bittersuesz:

                    nuqneH

                    Dein HTML soll [...]

                    Oh Gott, ja. Eigentlich weiß ich das inzwischen auch. Wird beizeiten auch alles aktualisiert.

                    Dass „beizeiten“ jetzt sein sollte,  weißt du inzwischen auch?

                    Erst wenn das Markup (HTML) ferig ist, sollte man sich der Dasrstellung (CSS) widmen.

                    Qapla'

                    --
                    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                    1. Erst wenn das Markup (HTML) ferig ist, sollte man sich der Dasrstellung (CSS) widmen.

                      Ich weiß. Trotzdem bin ich jetzt erst einmal froh, dass es so aussieht, wies aussehen sollte.

      2. @@Bittersuesz:

        nuqneH

        Meine Site ist aber nicht "strict" gehalten, deshalb ja die Angabe "transitional". & die Adresse MUSS doch nicht dabei stehen, soweit ich weiß, oder neuerdings doch?

        Bei Transitional ohne System Identifier (URI) schaltet IE 6 in den Quirkmode.

        Qapla'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
  2. Jetzt klappt es, wie ich es wollte. Der (relevante) Code sieht nun so aus:

    html, body {  
    scrollbar-face-color : 000000 ;  
    scrollbar-shadow-color : 000000 ;  
    scrollbar-highlight-color : 000000 ;  
    scrollbar-3dlight-color : 000000 ;  
    scrollbar-darkshadow-color : 000000 ;  
    scrollbar-track-color : 000000 ;  
    scrollbar-arrow-color : ffffff ;  
    text-align: center;  
    top: 15px;;  
    }  
    div#box {  
        text-align: left;  
        margin: 0 auto;  
        width: 690px;  
        height:515px;  
        border: 1px solid #ffffff;  
        padding:5px;  
        background-color:#000;  
        background-repeat: no-repeat;  
        background-image:url(hg03s.png);  
        background-position: center 9px;  
        background-attachment:fixed;  
        overflow:auto;  
      }
    
    1. Hi,

      scrollbar-face-color : 000000 ;
      scrollbar-shadow-color : 000000 ;
      scrollbar-highlight-color : 000000 ;
      scrollbar-3dlight-color : 000000 ;
      scrollbar-darkshadow-color : 000000 ;
      scrollbar-track-color : 000000 ;
      scrollbar-arrow-color : ffffff ;

      Das ist kein CSS. Und funktioniert in guten Browsern sowieso nicht - nicht nur wegen der ungültigen Werte.

      text-align: center;
      top: 15px;;

      Wozu top? Da Du nicht positionierst, hat das keine Auswirkung.

      background-position: center 9px;
          background-attachment:fixed;

      Bist Du Dir der Auswirkungen von background-attachment:fixed bewußt? Insbesondere der auf background-position?
      Da hat speziell der IE (bis mind. Version 6) extreme Schwierigkeiten, das korrekt darzustellen ...

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      1. Das ist kein CSS. Und funktioniert in guten Browsern sowieso nicht - nicht nur wegen der ungültigen Werte.

        *hust* Ich weiß. Das ist Jahre alt. Das wollte ich gar nicht mitposten. Ups.

        Wozu top? Da Du nicht positionierst, hat das keine Auswirkung.

        Hm, doch? Der Abstand von oben. Ohne geht es nicht.

        Bist Du Dir der Auswirkungen von background-attachment:fixed bewußt? Insbesondere der auf background-position?

        Möchte den Hintergrund halt fixiert haben...