Problem IE: Hintergrund in Formular

[Harald]

Hallo zusammen,

Ich gebe per background-image einer Textarea ein Hintergrundbild, background-repeat ist no-repeat. Funktioniert in allen drei aktuellen Windows-Browsern (Opera 8, Firefox 1, IE6) ganz hervorragend. Nur eine Kleinigkeit unterscheidet das Verhalten des IEs von den anderen Browsern: Das Hintergrundbild wird bei genügend Text in der Textarea mitgescrollt. In den anderen zwei Browsern bleibt es fixiert. Gut dachte ich, dann weißt du dem Ganzen einfach ein background-attachment:fixed zu. Nun ist das HGBild im IE tatsächlich wie gewünscht fixiert, nur in Opera und FF ist nun das HGBild nicht mehr zu sehen.

Ehrlich gesagt kann ich mir dieses Verhalten nicht erklären. An was könnte das eurer Meinung nach liegen?

Danke für eure Mühe,
Harald

[Harald]

Hallo nochmal,

eine kurze Ergänzung: Das Hintergrundbild darf sich nicht wiederholen, daher no-repeat. Es ist allerdings recht groß dimensioniert (600x600 Pixel). Wenn es im IE nun gescrollt wird, erreicht man irgendwann das "Ende" des Bilds. Ich hoffe ihr versteht was ich meine. ;)

Harald

[Efchen]

Ehrlich gesagt kann ich mir dieses Verhalten nicht erklären. An was könnte das eurer Meinung nach liegen?

Zum Bleistift an einem Fehler im Code.

[Harald]

Hallo,

Folgender Code (DOCTYPE HTML4.01 Strict):

Textarea:

<textarea name="antwort" cols="30" rows="6" class="formular"></textarea>

Styles:

.formular {
background-color: #83CE9E;
background-image: url(form_bg.gif);
background-repeat: no-repeat;
background-attachment: fixed;  /* <-- Übeltäter */
border-top: 1px solid #FFF;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #FFF;
}

Hintergrundfarbe deswegen, weil das HGBild (ein GIF) teilweise transparent ist.

Viele Grüße,
Harald

[Ashura]

Hallo Harald.

Gut dachte ich, dann weißt du dem Ganzen einfach ein background-attachment:fixed zu. Nun ist das HGBild im IE tatsächlich wie gewünscht fixiert, nur in Opera und FF ist nun das HGBild nicht mehr zu sehen.

Das Hintergrundbild wird relativ zum Viewport und nicht zum textarea-Element fixiert.

Entsprechend zweifelnde Kopfschüttler gibt es im Archiv: </archiv/2004/1/t69105/#m397541>

Einen schönen Dienstag noch.

Gruß, Ashura

[Harald]

Hi,

wirklich schade. Dass dadurch das Hintergrundbild am Viewport ausgerichtet wird und nicht an der Textarea, also da wo es definiert wurde. Irgendwie schwachsinnig...

Bleibt wohl die Möglichkeit die Bild nochmals ein gutes Stück größer zu machen und zu hoffen das die User nicht so viel Text schreiben. *gg*

Sonstige Vorschläge?

Danke,
Harald

[Ashura]

Hallo Harald.

Sonstige Vorschläge?

Ja. Lasse das background-position:fixed; weg und akzeptiere, dass der IE nicht standardkonform arbeitet.

Dass das Bild im IE wegscrollt, sollte eigentlich nur ein kleines Übel darstellen.

Einen schönen Dienstag noch.

Gruß, Ashura

[Harald]

Hi,

Ja. Lasse das background-position:fixed; weg und akzeptiere, dass der IE nicht standardkonform arbeitet.

Wie bei so vielen anderen Dingen auch... Wir Webdesigner (oder wie man Seitenbauer sonst bezeichnen möchte ^^) sind es ja gewöhnt. ;)

Dass das Bild im IE wegscrollt, sollte eigentlich nur ein kleines Übel darstellen.

Ja natürlich.

Danke für die Hilfe. :)

Harald

[Harald]

Hi,

eine kurze Zusatzfrage: Bis zu welchen Bild-Abmessungen spielt der IE ohne Probleme mit? Würde es Probleme geben wenn ich die Bildgröße auf 2000x2000 Pixeln anhebe? Ich muss noch dazu sagen, dass die Dateigröße des GIFs kaum ansteigt, da es hauptsächlich große flächige Bereiche enthält. Das ist also kein Problem.

Harald

[Ashura]

Hallo Harald.

eine kurze Zusatzfrage: Bis zu welchen Bild-Abmessungen spielt der IE ohne Probleme mit? Würde es Probleme geben wenn ich die Bildgröße auf 2000x2000 Pixeln anhebe?

Ein solch großes Bild ist übertrieben. Grundsätzlich ist die einzige Grenze die vom User festgelegte Größe des Browsercache. (Und die des RAM bzw. des virtuellen Speichers)

Einen schönen Dienstag noch.

Gruß, Ashura

[wahsaga]

hi,

warum "das so ist", wurde dir ja bereits erklärt.

Gut dachte ich, dann weißt du dem Ganzen einfach ein background-attachment:fixed zu. Nun ist das HGBild im IE tatsächlich wie gewünscht fixiert, nur in Opera und FF ist nun das HGBild nicht mehr zu sehen.

dann fixiere es halt nur im IE - beispielsweise, in dem du die angabe mit einem CSS-hack versehen nur für ihn interpretierbar machst. (star html hack würde sich anbieten.)

gruß,
wahsaga

[Harald]

Hallo,

auch ne tolle Idee. Aber CSS-Hack? Man könnte die Anweisung doch auch in ein Condition Comment packen?

Sagen wir Folgendes:

<!--[if IE]>
.formular-ie { background-attachment:fixed; }
<![endif]-->

Sowie die Styles in der CSS-Datei:

.formular {
background-color: #83CE9E;
background-image: url(form_bg.gif);
background-repeat: no-repeat;
border-top: 1px solid #FFF;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #FFF;
}

Und die Textarea:

<textarea name="antwort" cols="30" rows="6" class="formular formular-ie"></textarea>

Ich habs nicht getestet, sollte aber gehen. Dazu aber eine Frage: Der Selektor formular-ie ist nur dem IE bekannt, für die anderen Browser ist er quasi nicht definiert. Würde das etwas machen (auch in Hinsicht auf den W3C-Standard)?

Harald

[wahsaga]

hi,

auch ne tolle Idee. Aber CSS-Hack?

ja, warum nicht? ist die einfachste möglichkeit, bestimmten browsern anderes CSS vorzusetzen.

Man könnte die Anweisung doch auch in ein Condition Comment packen?

könnte man auch, wenn man wollte.
dann aber nicht so:

<!--[if IE]>
.formular-ie { background-attachment:fixed; }
<![endif]-->

Ich habs nicht getestet, sollte aber gehen.

nein, ist grundfalsch.
conditional comments sind HTML-kommentare, haben im CSS nichts verloren.

also entweder einen <style>-bereich oder ein <link rel="stylesheet"> per CC im head einbinden.

<textarea name="antwort" cols="30" rows="6" class="formular formular-ie"></textarea>

Dazu aber eine Frage: Der Selektor formular-ie ist nur dem IE bekannt, für die anderen Browser ist er quasi nicht definiert. Würde das etwas machen (auch in Hinsicht auf den W3C-Standard)?

natürlich nicht.
das ist auch kein selektor (im HTML), sondern lediglich eine klasse.
und klassen dienen der klassifizierung von elementen, mehr nicht. ob es dazu passende selektoren im CSS gibt, interessiert nicht im geringsten.

gruß,
wahsaga

[Harald]

Hallo,

ja, warum nicht? ist die einfachste möglichkeit, bestimmten browsern anderes CSS vorzusetzen.

In SELFHTML wird davon abgeraten. Außerdem finde ich Hacks sowieso nicht so elegant. Lieber verzichte ich auf die ein oder andere Designmöglichkeit, bevor ich absichtlich Fehler in den Code einbaue.

conditional comments sind HTML-kommentare, haben im CSS nichts verloren.

Schon klar, oder soll ich nächstes Mal die komplette HTML-Seite posten? :rolleyes: Manches Wissen sollte man als Helfer einfach vorraussetzen. Wenn der Hilfesucheende dann immer noch Probleme hat, dann kann man da drauf hinweisen. So ist die Antwort nur halb so hilfreich als sie eigentlich sein könnte.

Harald