DIV mit Bildern

[ottonormalverbraucher]

Guten Tag,

warum wird folgendes Div in Mozilla am linken Rand angezeigt und im IE am rechten?
Ich weiß Mozilla ist der konformere, aber wie bekomme ich es im Mozilla rechts angezeigt?

<div style="background-image:url(../images/lipplab.gif); background-repeat:no-repeat;
 background-position:50px right; background-attachment:scroll;">

Danke!!!!!

[wahsaga]

hi,

warum wird folgendes Div in Mozilla am linken Rand angezeigt und im IE am rechten?
Ich weiß Mozilla ist der konformere, aber wie bekomme ich es im Mozilla rechts angezeigt?
<div style="background-image:url(../images/lipplab.gif); background-repeat:no-repeat;
 background-position:50px right; background-attachment:scroll;">

zur positionierung des <div> kann ich in deinem code _überhaupt keine_ angaben entdecken.

gruss,
wahsaga

[Thomas Luethi]

Hallo,

warum wird folgendes Div in Mozilla am linken Rand angezeigt und im IE am rechten?

Ich vermute, es geht Dir nur um die Position des Hintergrundbildes,
oder was willst Du genau?

<div style="background-image:url(../images/lipplab.gif); background-repeat:no-repeat;
 background-position:50px right; background-attachment:scroll;">

^^^^^^^^^^
IIRC sollte man zuerst die x-Ausrichtung und dann
die y-Ausrichtung angeben, also so:

background-position:right 50px;

Probier's mal aus!

HTH, Gruesse,

Thomas

[MudGuard]

Hi,

warum wird folgendes Div in Mozilla am linken Rand angezeigt und im IE am rechten?
Ich weiß Mozilla ist der konformere, aber wie bekomme ich es im Mozilla rechts angezeigt?

Das div wird bei beiden Browsern an der selben Position angezeigt.
Aber Du könntest das Hintergrundbild (background-position) meinen.

Der Wert von background-position kann wie folgt angegeben werden (http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position.
'background-position'
    Value:   [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
    Initial:   0% 0%

Dazu noch die Syntaxregeln (http://www.w3.org/TR/REC-CSS2/about.html#q6):

Values may be arranged as follows:

* Several juxtaposed words mean that all of them must occur, in the given order.
    * A bar (|) separates two or more alternatives: exactly one of them must occur.
    * A double bar (||) separates two or more options: one or more of them must occur, in any order.
    * Brackets ([ ]) are for grouping.

Analyse:
Zunächst haben wir eine Gruppe und als Alternative dazu "inherit":

[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ]
|
inherit

Ok, inherit interessiert hier nicht, also widmen wir uns der ersten Alternative:
[<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ]

Wiederum liegt eine Alternative vor:
[<percentage> | <length> ]{1,2}
|
[ [top | center | bottom] || [left | center | right] ]

Es können also entweder 1 oder 2 Längen oder Prozentwerte
oder alternativ
einer der Werte top, center, bottom und/oder einer der Werte left, center, right vorkommen.

Die von Dir verwendete Form
50px right
ist also nicht zulässig, da die Länge nur in der ersten Alternative und right nur in der zweiten Alternative erlaubt ist.

Unter Berücksichtigung von http://www.w3.org/TR/REC-CSS2/conform.html#conformance, 3. Punkt der Liste

It must parse the style sheets according to this specification. In particular, it must recognize all at-rules, blocks, declarations, and selectors (see the grammar of CSS2). If a user agent encounters a property that applies for a supported media type, the user agent must parse the value according to the property definition. This means that the user agent must accept all valid values and must ignore declarations with invalid values. User agents must ignore rules that apply to unsupported media types.

ergibt sich:
wieder einmal verhält sich der Mozilla absolut korrekt - er ignoriert die Deklaration ("background-position:50px right;") wegen des ungültigen Wertes und nimmt den Default-Wert 0% 0%.
Der IE, der den fehlerhaften Wert interpretiert, verstößt damit eindeutig gegen den Standard.

Fazit: Verwende einen gültigen Wert (z.B. 100% 50px).

cu,
Andreas