finch: Opera/Firefox zeigt BgIMG nicht an

SELF-Forum

Opera/Firefox zeigt BgIMG nicht an

finch Homepage des Autors
– Informationen zu den Bewertungsregeln

Bei den Browser Firefox und Oper haben Probleme mit der Anzeige der Background-Images im Body und in der Navigation.

Das BG-Bild passt sich der grösse des Browserfensters an. Die Naviationsbilder, habe Transparente bereiche...

IE zeigt alles richtig an: Wo ist der Fehler drin?

html:

<body>
<img id="bgImg" src="templates\seaplanet\images/bg_seaplanet.jpg" width="100%" height="100%">
<div id="bodyDiv">
 <div class="header"><?php mosLoadComponent( "banners" );?> </div>
  <div class="navi"><?php mosLoadModules ( 'left' ); ?></div>
   <div class="main"><?php mosMainBody(); ?></div>
   <div class="log"><?php mosLoadModules ( 'right' ); ?></div>
  <div class="footer"><?php include_once('includes/footer.php'); ?></div>
</div>
</div>
</body>

css:

* { margin: 0;
    padding: 0;}

/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}

/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          overflow: auto;
          width: 100%;
          height: 100%;
          }

.navi {
 font-family: Arial, Helvetica, sans-serif;
         font-style: normal;
 font-weight: bold;
 font-variant: normal;
 color: #999999;
 left: 0%;
 top: 28%;
 height: 60%;
 width: 20%;
 border:none;
 padding-left:1.5em;
 padding-right:2em;
 position:absolute;
 vertical-align:middle;

}

.log {
         font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #FFFFFF;
         left: 2%;
 top: 95%;
 height: 5%;
 width: 5%;
         position:absolute;

}

.main {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 1em;
 color: #000066;
 height:70%;
 width:71%;
 top: 25%;
 left:25%;
 overflow:auto;
 border:none;
 position:absolute;
 padding-left:0.3em;
 padding-right:0.3em;
       scrollbar-base-color: #FFFFFF;
       scrollbar-arrow-color: FFFFFF ;
       scrollbar-DarkShadow-Color: #000066;
       scrollbar-Highlight-Color: #FFFFFF;
}

.header {
 font-family: Arial, Helvetica, sans-serif;
 height: 10%;
 width: 95%;
 top:2%;
 left:3%;
 border:none;
 position:absolute;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/banners/banner.png');

}

.footer {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000000;
 height: 2%;
 top:98%;
 width: 90%;
 position:absolute;
 border:none;
}

a.mainlevel:link {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1em;
         font-weight:bold;
         padding-top:18px;
 color:#FF00CC;
 text-decoration: none;
 text-align:center;
 vertical-align:middle;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/seaplanet2/images/button.png');
 background-image:none;
         height:56px;
 width:166px;
         display:block;
 background-repeat:no-repeat;
         text-shadow:black 3px 2px;

}

a.mainlevel:visited {
 font-family:Arial, Helvetica, sans-serif;
 font-size:1em;
         font-weight:bold;
         padding-top:18px;
 color:#FF00CC;
 text-decoration: none;
 text-align:center;
 vertical-align:middle;
         background-image:none;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='templates/seaplanet2/images/button.png');
         height:56px;
 width:166px;
 background-repeat:no-repeat;
 display:block;
         text-shadow:black 3px 2px;
}

a.mainlevel:hover {
 font-family:Arial, Helvetica, sans-serif;
         padding-top:18px;
 font-size:1em;
         font-weight:bold;
 color:#FF00CC;
 text-decoration: none;
 text-align:center;
 vertical-align:middle;
 background-image:none;
         filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/button_over.png');
 background-repeat:no-repeat;
 height:56px;
 width:166px;
         display:block;
         text-shadow:black 3px 2px;
}

.contentheading {
 font-family:Arial, Helvetica, sans-serif;
 font-size:2em;
 font-weight: bold;
 color: #000066;

}

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Opera/Firefox zeigt BgIMG nicht an

    Glory
    – Informationen zu den Bewertungsregeln

    Nur mal kurz drübergeschaut:

    src="templates\seaplanet\images/bg_seaplanet.jpg"

    Ist dieser Backslash "" im Pfad wirklich richtig?

    #bgImg{ position: absolute;

    Dann scrollt das Bild aber nicht mit. Ist das gewollt?

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Opera/Firefox zeigt BgIMG nicht an

      finch
      – Informationen zu den Bewertungsregeln

      Nur mal kurz drübergeschaut:

      src="templates\seaplanet\images/bg_seaplanet.jpg"
      Ist dieser Backslash "" im Pfad wirklich richtig?

      Der pfad sollte funktionieren, habe ihn jetzt auch noch kurz angepasst, bild läd sich trotzdem nicht...

      #bgImg{ position: absolute;
      Dann scrollt das Bild aber nicht mit. Ist das gewollt?

      Da sich das Bild immer der Browser-Fenster anpasst, muss iches nicht scrolle da der .main über ein eigenen scrollbalken verfügt...

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Opera/Firefox zeigt BgIMG nicht an

        Cheatah
        – Informationen zu den Bewertungsregeln

        Hi,

        src="templates\seaplanet\images/bg_seaplanet.jpg"
        Ist dieser Backslash "" im Pfad wirklich richtig?
        Der pfad sollte funktionieren,

        der IE besitzt den Bug, in URLs Backslashes zu Slashes zu konvertieren. Andere Browser haben eine sehr viel logischere Fehlerkorrektur: Sie kodieren das Zeichen als %5C. Tatsache ist jedoch, dass der Backslash überhaupt nicht in der URL vorkommen _darf_.

        habe ihn jetzt auch noch kurz angepasst, bild läd sich trotzdem nicht...

        Kannst Du bitte die Problemseite verlinken?

        #bgImg{ position: absolute;

        Übrigens ist <img> als Kind von <body> nicht erlaubt. Es muss in einem Block-Level-Element stehen, beispielsweise in <div>, <p> oder <h1>. Was davon hier sinnvoll ist, vermag ich nicht zu sagen; offenbar geht es nicht um die Vermittlung eines Inhaltes, sondern um eine Verzierung, die ergo Sache von CSS ist und sich nicht auf den HTML-Code auswirken dürfte.

        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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Opera/Firefox zeigt BgIMG nicht an

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hello out there!

          Übrigens ist <img> als Kind von <body> nicht erlaubt.

          Übrigens ist es das doch [XHTML1 §A.1.2]:

          <!ENTITY % special.extra
             "object | applet | img | map | iframe">

          <!ENTITY % special
             "%special.basic; | %special.extra;">

          <!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">

          <!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

          <!ELEMENT body %Flow;>

          [</archiv/2005/10/t116275/#m743757>] ;-)

          offenbar geht es nicht um die Vermittlung eines Inhaltes, sondern um eine Verzierung, die ergo Sache von CSS ist und sich nicht auf den HTML-Code auswirken dürfte.

          In der Tat ein Hintergrundbild, aber auf volle Viewportgröße skaliert. Mit heutigem CSS nicht machbar.

          See ya up the road,
          Gunnar

          --
          „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Opera/Firefox zeigt BgIMG nicht an

            Cheatah
            – Informationen zu den Bewertungsregeln

            Hi,

            Übrigens ist <img> als Kind von <body> nicht erlaubt.
            Übrigens ist es das doch [XHTML1 §A.1.2]:

            dann muss das <img/>-Element aber geschlossen werden. Wir haben nur entweder HTML oder XHTML, nicht aber beides mit der freien Auswahl der jeweils benötigten einfachsten Features.

            In der Tat ein Hintergrundbild, aber auf volle Viewportgröße skaliert. Mit heutigem CSS nicht machbar.

            In der Tat. Das ändert aber nichts daran, dass ich kein HTML-Element empfehlen kann, welches hier passend sein könnte.

            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
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Opera/Firefox zeigt BgIMG nicht an

              finch
              – Informationen zu den Bewertungsregeln

              Vielen Dank für die unterstützung, habe es mehr oder weniger hingekriegt...

              habe einige Sachen im css umgeschrieben und jetzt hats geklappt

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

        2. Opera/Firefox zeigt BgIMG nicht an

          MudGuard Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hi,

          Übrigens ist <img> als Kind von <body> nicht erlaubt.

          Doch, es ist ggf. erlaubt:

          <!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- document body -->
          <!ENTITY % flow "%block; | %inline;">
          <!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
          <!ENTITY % special
             "A | IMG | APPLET | OBJECT | FONT | BASEFONT | BR | SCRIPT |
              MAP | Q | SUB | SUP | SPAN | BDO | IFRAME">

          qee (quod erat expectandum).

          Die Zitate stammen übrigens aus http://www.w3.org/TR/html4/sgml/loosedtd.html

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Opera/Firefox zeigt BgIMG nicht an

            Cheatah
            – Informationen zu den Bewertungsregeln

            Hi,

            Übrigens ist <img> als Kind von <body> nicht erlaubt.
            Doch, es ist ggf. erlaubt:

            erstaunlich. Interessanterweise finde ich in http://www.w3.org/TR/html401/struct/global.html#edef-BODY nirgendwo einen Hinweis darauf, dass es derlei Unterschiede geben könnte. Auch scheint das Dokument allgemeingültig gemeint zu sein, unabhängig von der Wahl der HTML-4.01-Variante. Ist das ein Bug, oder übersehe ich etwas Wesentliches?

            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
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

          2. Opera/Firefox zeigt BgIMG nicht an

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hello out there!

            Die Zitate stammen übrigens aus http://www.w3.org/TR/html4/sgml/loosedtd.html

            Was hier wenig Relevanz hat, da der OP XHTML 1.0 Transitional schreibt. Du musst aber nicht noch aus der XHTML-1.0-Transitional-DTD zitieren, das hab ich schon längst. ;-)

            See ya up the road,
            Gunnar

            --
            „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. Opera/Firefox zeigt BgIMG nicht an

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    html:

    Nein, was du da als Quelltext verkaufst, ist kein HTML, sondern serverseitiger PHP-Code. Dieser ist bei clientseitigen Problemen irrelevant; poste also bitte das nächste Mal den HTML-Code, der im Browser ankommt.

    <img id="bgImg" src="templates\seaplanet\images/bg_seaplanet.jpg" width="100%" height="100%">

    Zu den falschen '' siehe Glorys Antwort.

    Das 'alt'-Attribut (Pflicht!!) fehlt. Wenn in speziellen Fällen wie diesem kein Alternativtext angegeben werden soll, darf es auch 'alt=""' sein.

    Die Skalierung von Bildern im Browser ist selten eine gute Idee: Browser verfügen nicht über so gute Bildskalierungsalgorithmen wie Bildverarbeitungsprogramme und die Qualität der Bilder kann bei Sklalierung im Browser deutlich leiden.

    „[…] lässt Sea Planet keine Wünsche offen“?? Doch!! Eine benutzbare Website! Im Firefox ist kein Navigieren und kein Scrollen möglich.

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Opera/Firefox zeigt BgIMG nicht an

    Antipitch
    – Informationen zu den Bewertungsregeln

    Moin finch,

    wer weiß, was dein PHP Code erzeugt.... Ansonsten hat kein einziges Element in deinem code ein Hintergrundbild.

    Oder meinst du, dass irgendein nicht-Microsoft Browser jemals diese Angabe interpretieren wird?)

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader

    Gruß
    Antipitch

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln