background-image mozilla

[m.v.]

div#content{
position: absolute;
width: 682px;
height: 459px;
left: 239px;
top: 98px;
background-image: url(images/bg_05.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
overflow: auto;
}

die bg-images werden im ie und ff unterschiedlich dargestellt.
soweit ich gelesen habe, ergibt die gleichzeitige verwendung von

background-attachment: fixed;
background-repeat: no-repeat;

diese problem. tatsächlich ergibt jedoch auch das weglassen einer der beiden attribute unterschiedliche ergebnisse.

(die gepostete variante stellt im ie das bg-image korrekt dar und auch das scroll-verhalten ist so gewünscht)

vielleicht hat jemand eine lösung? (-moz-background-origin: bzw. background-position: ?)

[MudGuard]

Hi,

div#content{
position: absolute;
width: 682px;
height: 459px;
left: 239px;
top: 98px;
background-image: url(images/bg_05.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
overflow: auto;
}

die bg-images werden im ie und ff unterschiedlich dargestellt.

Klar. IE kann mit background-attachment:fixed nicht richtig umgehen.

soweit ich gelesen habe, ergibt die gleichzeitige verwendung von
background-attachment: fixed;
background-repeat: no-repeat;
diese problem.

Das background-repeat hat keinen Einfluß auf den Bug im IE.

(die gepostete variante stellt im ie das bg-image korrekt dar und auch das scroll-verhalten ist so gewünscht)

Korrekt im IE? Nein. Vielleicht "wie von Dir gewünscht".
Bei background-attachment:fixed bezieht sich die background-position auf den Viewport, nicht auf das Element.
Aber IE ist zu blöd dafür.

cu,
Andreas

[m.v.]

und wie genau soll mir deine antwort helfen?..
leider bringt mir die info, dass IE einfach zu blöd ist keine lösungsansätze.. ; )

[Maxx]

Hallo,

die bg-images werden im ie und ff unterschiedlich dargestellt.

wie MudGuard schon schrieb bezieht sich die Positionierung des Hintergrundbildes auf den Viewport (das Anzeigefensters deines Browsers) Es hängt im FF (und in anderen standardkonformen Browsern) also unsichtbar in der linken oberen Ecke des Browserfensters.

Daraus ergibt sich auch schon der Lösungsansatz: Für alle nicht IE muss die Position des Hintergrundbildes auf

div#content{
left: 239px;
top: 98px;

verschoben werden. Alles klar? Es könnte zum Beispiel so aussehen:

<!--[if !IE]>-->
  <style type="text/css">
    div#content {
      background-position:239px 98px;
      }
  </style>
<!--<![endif]-->

Grüße,

Jochen

[m.v.]

danke für deine antwort, erklärung und den lösungsansatz..

div#content{
 width: 682px;
 height: 459px;
 left: 239px;
 top: 98px;
 position: absolute;
 background-image: url(images/bg_05.jpg);
 background-attachment: fixed;
 background-repeat: no-repeat;
 overflow: auto;
}
[if !IE]
    div#content {
      background-position: 239px 98px;
      }
[endif]

greift leider nicht.. hast du ahnung wieso?.. (css -> externe .css-datei)

lg, m

[Jonathan]

Hallo m.v.,

[if !IE]
    div#content {
      background-position: 239px 98px;
      }
[endif]

Conditional Comments funktionieren innerhalb von HTML.

Jonathan

[m.v.]

hi,

hab ich schon versucht.. weder im "style" noch im "script" tag greift es.. weder im head bereich, noch im betreffenden <div>..
hm.. (ahnungsloses etwas, ich).. ^^

[Maxx]

Hallo,

hab ich schon versucht.. weder im "style" noch im "script" tag greift es.. weder im head bereich, noch im betreffenden <div>..

das *muss* funktionieren. Verwendung und Syntax ist unter Conditional Comment nochmal beschrieben.
Leider fehlt in der SELFHTML Doku ein Beispiel für !IE (nicht IE) Mit welcher IE Version testet du, und hast du etwas online zum angucken?

Grüße,

Jochen

[Maxx]

das *muss* funktionieren.

nur nicht im IE7. Dieser wiederum verhält sich (zumindest im Standard Compliance Mode) wie der FF.

Demnach ist die Prüfung auf !IE Käse.
Im CSS sollte das Hintergrundbild für einen standardkonformen Browser positioniert werden. Also background-position: left und top des Containers, und für IE 5-6 die Korrektur background-position:0px 0px;

So etwa: http://www.electric-lemon.de/self/backgroundpos.html

HTH

Jochen

P.S. liest du noch mit m.v. oder schon aufgegeben? oder gelöst?

[m.v.]

hallo,

ich lese noch - und ich habe bisher noch keine funktionierende lösung gefunden.. etwas dumm, wenn man unter zeitdruck steht..

ich erlaube mir einmal, dir ein mail mit gesamten code zu schicken.. ^^

lg, m

[m.v.]

achja.. und ich kanns mir nicht verkneifen:
das war mein erstes "tabellenfreies, w3c konformes layout".. (weil vom auftraggeber so erwünscht) ich könnte weinen.. schlüssigkeit durch konformität? -ein scherz..
meine tabellenlayouts haben immer funktioniert.. nicht genug, dass ie und ff unterschiedlich interpretieren.. wenn ich dann auch noch in "jeder" arbeit ie VERSIONEN überprüfen muss wird das ganze redlich witzlos..

[m.v.]

ha!

<!--[if lt IE 7.0]>
<style type="text/css">
div#content {
  background-position:0px 0px;
  }
</style>
<![endif]-->

hat funktioniert.. zumindest in den versionen von ff und ie, die ich installiert habe.. der code is von vorn bis hinten ein ziemlicher pfusch geworden, aber es scheint zu funktionieren..

http://www.friseurtiptop.at

(bitte seht euch den quellcode nicht an.. ^^)

[Patrick Andrieu]

Hallo m.v.!

http://www.friseurtiptop.at

Bitte lies mal, wie man hier Verweise einbindet...

Also, sieht gar nicht so schlecht aus!

(bitte seht euch den quellcode nicht an.. ^^)

Es gibt schlimmere!

Zwei Anmerkungen:
mit <?xml version="1.0" encoding="iso-8859-1"?> wird der unfähige IE 6 in den Quirksmode geschickt. Ob es so gewollt wird?

Der Validator meldet noch 2 fehlenden, notwendigen alt-Attribute bei zwei Bildern. Wenn der Grund für Dein weglassen von »alt="..."« der sein sollte, dass der IE dann ein Tooltip anzeigt, wenn man mit der Maus über dem Bild ist, dann wisse, dass es ein Fehlinterpretation des alt-Attributs durch den IE ist. Wenn Du nicht willst, dass ein Tooltip erscheint, dann notiere dazu ein leeres title-Attribut:

<img src="images/trends_02.gif" alt="irgendeine Bildbeschreibung oder angabe für Browser/Benutzer, die Bilder nicht anzeigen" title="">

Ob du für diese zwei »Frisur-Bilder« je ein eigenes div-Element brauchst? Du kannst den Bildern direkt je eine ID verpassen und sie ganz ohne div-Element positionieren.

Aber wenn es Deine erste tabellenlose Arbeit ist, ist es, wie gesagt, schon mal nicht schlecht. Weiter in diese Richtung!

Viele Grüße aus Frankfurt/Main,
Patrick

[m.v.]

hallo und danke für dein feedback!

stichwirt alttext: ja.. hab ich einfach nicht daran gedacht.. (war auch was höhe und breite-angaben angeht etwas schleissig.. ^^)
stichwort "id" für images: wußte von der möglichkeit nichts.. vielen dank für den tip!
stichwort "Quirksmode": danke auf für diesen hinweis.. tag entfernt.. (ist soweit ich erlesen konnte auch ohne w3c valid)
stichwort verweise einbinden: auch danke für den tip.. ; )

lg, m