Problem mit IE 7.0 und Grafik

[Susi]

Hallo zusammen,

ich arbeite an einer Internetseite der Firma Amarre.
Jetzt möchte ich gern ein Bild im Hintergrund haben, welches an dieser Stelle stehen bleibt und der Text (in diesem Fall Produkte)sich im Vordergrund scrollen lässt.

Dieses funktioniert auch in Opera und Firefox, nur im IE 7.0 nicht.
Was muss ich tun?

Hier ist der Quellcode:
<div id="frame" style="background-position: right bottom; background-image: url(&#39;http://amarre.de/images/bilder/Fond_NAE.jpg&#39;); line-height: 140%; background-repeat: no-repeat; background-color: #ffffff"><br />

Das die Seite:
http://www.amarre.de/index.php?option=com_content&task=view&id=37

Kann mir einer helfen?

Viele Grüße
Susi

[ChrisB]

Hi,

Jetzt möchte ich gern ein Bild im Hintergrund haben, welches an dieser Stelle stehen bleibt und der Text (in diesem Fall Produkte)sich im Vordergrund scrollen lässt.

Dieses funktioniert auch in Opera und Firefox, nur im IE 7.0 nicht.

Interessant, war mir gar nicht bewusst, dass der IE 7 das immer noch versaubeutelt.

Kann mir einer helfen?

M.E. einfachster Workaround: Um das Div-Element noch ein weiteres herumschachteln, und diesem das Hintergrundbild verpassen.

MfG ChrisB

[Joachim]

Hi,

Jetzt möchte ich gern ein Bild im Hintergrund haben, welches an dieser Stelle stehen bleibt und der Text (in diesem Fall Produkte)sich im Vordergrund scrollen lässt.

Für IE musst Du das quasi nachbauen, hier mal das Schema:

html,body {height:100%}

#background-div {
   height: 100%;
}

#content-div {
   height: 100%;
   overflow: auto;
   background: transparent url(dein(bg/image.jpg) no-repeat left top;
}

<div id="#background-div">
    <div id="#content-div">
         ....
    </div>
</div>

Der Scrollbalken wird also nun nicht vom body, sondern vom #content-div erzeugt. Ich würde aber die gesonderten IE-Angaben in ConditionalComments packen, dann kannst Du den fähigen Browsern die saubere Konstruktion anbieten.

Gruesse, Joachim

[Malcolm Beck´s]

hi,

<div id="frame" style="background-position: right bottom; background-image: url(&#39;http://amarre.de/images/bilder/Fond_NAE.jpg&#39;); line-height: 140%; background-repeat: no-repeat; background-color: #ffffff"><br />

Bei mir Funktioniert auch folgendes Konstrukt:

background: #010000 url(bilder/bg2.jpg) fixed right bottom no-repeat;

Browsersupport (Win XP):

• FF 2.0.0.17 - 3.0.3
• IE 7
• Opera 9.6
• Chrome
• K-Meleon

Nur die IE 6 und kleiner kriegen es nicht gebacken.

holla holla

[Susi]

Vielen Dank erstmal, ich probiers aus!

Gruß Susi

[Susi]

Hallo noch mal!

Also, das mit dem Bild und Scrollen bekomme ich nicht hin.

Anbei nun der gesamte Quellcode, da ich vermute das es an dem inneren Fenster liegt?!

Wer kann da weiter helfen? Es ist nur das IE 7.0 Problem!!!!

Bin Euch sehr dankbar für jede Hilfe!

Liebe Grüße
Susi

<div id="frame_mitarbeit_menu">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div><div><div id="frame" style="background-position: right bottom; background-image: url(&#39;http://amarre.de/images/bilder/Fond_produkte.jpg&#39;); line-height: 140%; background-repeat: no-repeat; background-color: #ffffff"><br /><h1>

<em>&nbsp;&nbsp;&nbsp; Produkt&uuml;bersicht Gesichts- und K&ouml;rperpflege</em></h1><br />

<table border="0"><tbody><tr><td width="20">&nbsp;</td><td width="160"><img src="http://www.amarre.de/images/Produktbilder/klein/24h-ultra-rich_klein.jpg" border="1" alt="24h Ultra Rich Cream" width="150" height="143" align="middle" /></td><td width="300" valign="top"><font color="#b30215">24h Ultra Rich Cream</font><br /><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=28">WEITERE INFORMATIONEN</a></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="http://www.amarre.de/images/Produktbilder/klein/Bio-Active_klein.jpg" border="1" alt="bioactive" width="150" height="147" align="middle" /></td><td valign="top" style="width: 300px"><font color="#b30215">Bio Active Balance Cream</font><br /><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=30">WEITERE INFORMATIONEN</a></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="http://www.amarre.de/images/Produktbilder/klein/Day-Moisture_klein.jpg" border="1" alt="Daymoisture" width="150" height="146" align="middle" /></td><td valign="top" style="width: 300px"><font color="#b30215">Day Moisturizer&nbsp;Cream</font><br /><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=31">WEITERE INFORMATIONEN</a></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="http://www.amarre.de/images/Produktbilder/klein/Night-Repair_klein.jpg" border="1" alt="nightrpair" width="150" height="139" align="middle" /></td><td valign="top" style="width: 300px"><font color="#b30215">Night Repair Cream<br /></font><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=32">WEITERE INFORMATIONEN</a></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="http://www.amarre.de/images/Produktbilder/klein/Flasche_Spring_klein.jpg" border="1" alt="TonicWater" width="150" height="260" align="middle" /></td><td valign="top" style="width: 300px"><font color="#b30215">Spring Tonic Water<br /></font><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=33">WEITERE INFORMATIONEN</a></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="http://www.amarre.de/images/Produktbilder/klein/Flasche_Cleansing_klein.jpg" border="1" alt="CleaningMilk" width="150" height="260" align="middle" />&nbsp;</td><td valign="top" style="width: 300px"><font color="#b30215">Enriched Cleansing Milk<br /></font><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=34">WEITERE INFORMATIONEN</a></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="http://www.amarre.de/images/Produktbilder/klein/Tube_Scrubklein.jpg" border="1" alt="HandBodyCream" width="150" height="276" align="middle" /></td><td valign="top" style="width: 300px"><font color="#b30215">Hand &amp; Body Scrub<br /></font><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=35">WEITERE INFORMATIONEN</a>&nbsp;</td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img src="http://www.amarre.de/images/Produktbilder/klein/Tube_4natures_klein.jpg" border="1" alt="4Natures Hand Cream" width="150" height="276" align="middle" />&nbsp;</td><td valign="top" style="width: 300px"><font color="#b30215">4Natures Handcream<br /></font><a href="http://www.amarre.de/index.php?option=com_content&amp;task=view&amp;id=36">WEITERE INFORMATIONEN</a></td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></div></div>

[ChrisB]

Hi,

Also, das mit dem Bild und Scrollen bekomme ich nicht hin.

"Bekomme ich nicht hin" ist witzlos, damit koennen wir nichts anfangen.
</hilfe/charta.htm#tipps-fuer-fragende>

Anbei nun der gesamte Quellcode, da ich vermute das es an dem inneren Fenster liegt?!

Na ja, es liegt wohl (auch) am IE, der's mit den Hintergrundbildern immer noch nicht auf die Reihe kriegt.

Wie hast du denn versucht, die Vorschlaege umzusetzen (meiner war doch recht simpel), und in wie fern kam dabei nicht das erwuenchte raus?

MfG ChrisB

[Malcolm Beck´s]

hi,

Na ja, es liegt wohl (auch) am IE, der's mit den Hintergrundbildern immer noch nicht auf die Reihe kriegt.

Der IE 7 schon, nur scheint background-attachment:fixed; für alle Browser ein Problem zu sein.

Beispiel

So wie es aussieht, bezieht sich background-attachment:fixed; auf body, statt auf das div, in dem es ist.

Leider steht  in der Doku nicht viel über dieses verhalten oder warum dass so ist.

holla holla

[ChrisB]

Hi,

Na ja, es liegt wohl (auch) am IE, der's mit den Hintergrundbildern immer noch nicht auf die Reihe kriegt.

Der IE 7 schon, nur scheint background-attachment:fixed; für alle Browser ein Problem zu sein.

Nein, das ist nur fuer aeltere IE (<7) ein Problem.

So wie es aussieht, bezieht sich background-attachment:fixed; auf body, statt auf das div, in dem es ist.

Natuerlich.
Genauer gesagt, ein fixiertes Hintergrundbild wird am *Viewport* ausgerichtet.

Leider steht  in der Doku nicht viel über dieses verhalten

Da steht es doch ebenfalls, dass es sich dann am Viewport orientiert - im Gegensatz zur Orientierung am Element beim Defaultwert scroll.

oder warum dass so ist.

Weil es nun mal eben so in der CSS-Spezifikation definiert worden ist:
background-attachment [...]
If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').

MfG ChrisB

[Malcolm Beck´s]

hi,

So wie es aussieht, bezieht sich background-attachment:fixed; auf body, statt auf das div, in dem es ist.
Genauer gesagt, ein fixiertes Hintergrundbild wird am *Viewport* ausgerichtet.

Da stellt sich natürlich die Frage, welchen Sinn dass haben soll.
Mit background: #FFF url(logo.gif) no-repeat scroll right bottom; erreicht man das, was ich eigentlich von fixed erwarten würde, was wiederum einen Workarround für den IE erfoderlich macht.

Da steht es doch ebenfalls, dass es sich dann am Viewport orientiert - im Gegensatz zur Orientierung am Element beim Defaultwert scroll.

Eben, nur der Sinn dieser Geschichte ist einfach nicht zu erkennen.
Was für einen Sinn hat es, wenn ich für ein div background-attachment angebe, aber : fixed; am Viewport ausgerichtet wird?

Die vom W3C sind recht merkwürdig in deren Spezifikationen ;)

holla holla

[Susi]

HiHi,

net streiten... das will ich ja nun nicht! :-(

Vielleicht sollte ich sagen, daß ich nicht wirklich viel von dem was Ihr da schreibt verstehe. Ich habe um das <div> mit dem Bild halt noch eines gesetzt und dann habe ich versucht noch einmal um das gesamte Element eines zu setzen. Beides ohne Erfolg. Sicherlich für Euch logisch. Für mich it das dagegen Neuland. Der IE 7 ist einfach ein Buch mit 7 Siegeln. Nie geht etwas, aber immer mehr "Normal" Nutzer nehmen das Ding. Deswegen sollte es ja genau dort auch laufen. :-(

Irgendwie bin ich echt ein wenig verzweifelt.

Traurige Grüßle
Susi

[ChrisB]

Hi,

Vielleicht sollte ich sagen, daß ich nicht wirklich viel von dem was Ihr da schreibt verstehe.

Dann frag' doch nach.

Ich habe um das <div> mit dem Bild halt noch eines gesetzt und dann habe ich versucht noch einmal um das gesamte Element eines zu setzen. Beides ohne Erfolg. Sicherlich für Euch logisch.

Nein, auch fuer uns ein Aergernis - solche "Fehlerbeschreibungen", mit denen niemand etwas anfangen kann.

MfG ChrisB

[Malcolm Beck´s]

hi,

net streiten... das will ich ja nun nicht! :-(

Das ist hier der ganz Normale Ton  ;)

Der IE 7 ist einfach ein Buch mit 7 Siegeln. Nie geht etwas, aber immer mehr "Normal" Nutzer nehmen das Ding. Deswegen sollte es ja genau dort auch laufen. :-(

Naja, der IE 6 ist auch noch sehr verbreitet, man muss noch beide beachten, wenn man Sauber arbeiten möchte.

Irgendwie bin ich echt ein wenig verzweifelt.

Ach iwo, dass ist recht Simpel.
Du baust zwei Boxen,

<div id="wrapper">  
  
  <div class="contentbox">  
   <h1>Produkt</h1>  
    <ul>  
      <li>Eigenschaften</li>  
      <li>...</li>  
    </ul>  
  </div>  
  
</div>

das äussere div bekommt nun seine eigenschaften, so wie höhe, breite, hintergrundbild und dass es bei zu viel inhalt alles abschneidet, Stichwort overflow: hidden;.

#wrapper {  
  width: 30em;  
  height: 15em;  
  overflow: hidden;  
  background: #FFF url(logo.gif) no-repeat right bottom;  
}

Nun formatieren wir noch die Contentbox:

#wrapper .contentbox {  
  height: 100%;  
  overflow: auto;  
} 

Das ist alles, sie hier.

holla holla