Probleme im Firefox - Positionierung von Images

[Achim]

Hi,

ich bin hier am Verzweifeln. Da ich nun schon mehrfach von Inkompatibilitäten gg. dem Standard bei verschiedenen Browsern bezüglich der Positionierung von Images gehört habe, hab ich mich für folgende, vermeintlich "idiotensichere" Variante entschieden:

<div style='width:{$width}px; height:{$height}px; border:1px solid grey; padding:1px; margin:0px;'>

<img style='border: 5px solid red; margin:0px; padding:0px;' src=blablabla>

</div>

Wobei gesagt werden muss, die Bilder sind mit ihren exakten Maßen in eine DB gespeichert und "$width" bzw. "$height" enthalten Pixelangaben nach "Breite/Höhe des Bildes + 14 Pixel (also korrekt, 10Pixel für den Border des Bildes zzgl. 2+2 Pixel für Border+Padding des divs).

Leider bekomme ich die korrekte Ausgabe nur im Internet Explorer hin,
im Firefox beträgt das Padding des divs etwa 5 Pixel. Woran kann das liegen?
Ich habe auch schon andere Code-Lösungen herangezogen, immer mit dem gleichen Ergebnis.

Aber nun, wo ich das ganze doch eigentlich exakt berechnet habe, weiss ich nicht mehr weiter...
Hat jemand eine Ahnung, wo das Problem zu suchen ist?

Gruss
Achim

[Achim]

Äh, ich habe mich falsch ausgedrückt, Verzeihung!

Im Firefox beträgt das Padding nur rechts und unten 5 Pixel, links und oben ist es jeweils der korrekte 1 Pixel.

[Struppi]

Hat jemand eine Ahnung, wo das Problem zu suchen ist?

Ich verstehe das Problem nicht. Hast du mal eine Beispielseite?

Struppi.

[Achim]

Hat jemand eine Ahnung, wo das Problem zu suchen ist?

Ich verstehe das Problem nicht. Hast du mal eine Beispielseite?

Struppi.

Hi, es ist ein interner Bereich von meinem Chor. Aber das Problem hat sich gelöst, ist wohl wirklich ein Bug der Firefox-Engine. Ich habe die Pixel auf 10 - obwohl es ja zweifellos 14 sind, und auch nur die eine Hälfte der Border falsch dargestellt wurde - gestellt, dann funktioniert es in allen Browsern.

MfG
Achim

[Struppi]

Hi, es ist ein interner Bereich von meinem Chor. Aber das Problem hat sich gelöst, ist wohl wirklich ein Bug der Firefox-Engine. Ich habe die Pixel auf 10 - obwohl es ja zweifellos 14 sind, und auch nur die eine Hälfte der Border falsch dargestellt wurde - gestellt, dann funktioniert es in allen Browsern.

Das hört sich eher nach einem bekannten Bug im IE an, was für einen Doctype verwendest du?

Struppi.

[Achim]

Das hört sich eher nach einem bekannten Bug im IE an, was für einen Doctype verwendest du?

Struppi.

Hi,
ich verwende w3c-validiertes 4.01 Strict-HTML

Ich hab mal einen Screenshot des Bildfehler unter FF hochgeladen. Zu bestaunen hier:
http://voiceevent.de/home/New.JPG

Der zugehörige Code:
<div style="width:[breite_bild + 14px]; height:[höhe_bild + 14px]; border:1px solid grey; margin:0px; padding:1px;">
<img src="blub" border:5px solid red; margin:0px;padding:0px;">
</div>

Gruss
Achim

[MudGuard]

Hi,

Das hört sich eher nach einem bekannten Bug im IE an, was für einen Doctype verwendest du?

Struppi.

Hi,
ich verwende w3c-validiertes 4.01 Strict-HTML

Ich hab mal einen Screenshot des Bildfehler unter FF hochgeladen. Zu bestaunen hier:
http://voiceevent.de/home/New.JPG

Der zugehörige Code:
<div style="width:[breite_bild + 14px]; height:[höhe_bild + 14px]; border:1px solid grey; margin:0px; padding:1px;">
<img src="blub" border:5px solid red; margin:0px;padding:0px;">

Zur Bildbreite/Höhe kommen also noch 10px (für die border an je zwei Seiten) hinzu.

Dein div hat aber eine Breite/Höhe, die um 14px größer ist als die Dimension des Bildes.

Also ist es doch ganz logisch, daß rechts/unten noch je 4px ungenutzte Fläche im div bleiben.

Ein Fehler des Firefox ist nicht zu erkennen.

cu,
Andreas

[Achim]

Der zugehörige Code:
<div style="width:[breite_bild + 14px]; height:[höhe_bild + 14px]; border:1px solid grey; margin:0px; padding:1px;">
<img src="blub" border:5px solid red; margin:0px;padding:0px;">

Zur Bildbreite/Höhe kommen also noch 10px (für die border an je zwei Seiten) hinzu.
Dein div hat aber eine Breite/Höhe, die um 14px größer ist als die Dimension des Bildes.

Auch du hast wohl übersehen, dass mein div weiters noch auf allen Seiten jeweils 1px padding und border an Breite/Höhe hinzugibt,

oder will mir jetzt jemand erzählen, dass style.height / style.width Attribut eines DIVs beziehe sich im Widerspruch zum Boxmodell nur auf den Inhalt zwischen dem <div></div> - Tag-Paar, aber nicht auf die <div></div>-eigenen padding, border, margin?

Mfg
Achim

[Harlequin]

Yerf!

oder will mir jetzt jemand erzählen, dass style.height / style.width Attribut eines DIVs beziehe sich im Widerspruch zum Boxmodell nur auf den Inhalt zwischen dem <div></div> - Tag-Paar, aber nicht auf die <div></div>-eigenen padding, border, margin?

Wieso Widerspruch? Exakt so (height/width bezieht sich nur auf den Inhalt) ist das Boxmodell vom W3C spezifiziert worden.

Gruß,

Harlequin

[Achim]

Ohje, das tut mir schrecklich leid, dass ich das Attribut width nicht richtig kannte. ich hatte immer nur solche Sachen gelesen wie

"Die Box-Breite ist die Summe der linken und rechten Ränder, Rahmen und Polsterung sowie der Inhaltsbreite. Die Höhe ergibt sich aus den unteren und oberen Rändern, Rahmen und Polsterung sowie der Inhaltshöhe."

Aber nicht an die Möglichkeit gedacht, dass "box-breite" kein Synonym für das Attribut "width" sein muss.
Nach dem vielen Stress für euch hoffe ich, es war keine vergeudete Zeit - wenn das nächste mal jemand mit diesem Problem auftaucht werde ich schnell die Frage beantworten =).

Besten Dank,
Jens

[Gunnar Bittersmann]

Hello out there!

<div style='width:{$width}px; height:{$height}px; border:1px solid grey; padding:1px; margin:0px;'>
<img style='border: 5px solid red; margin:0px; padding:0px;' src=blablabla>
</div>
"$width" bzw. "$height" enthalten Pixelangaben nach "Breite/Höhe des Bildes + 14 Pixel

Was genau steht denn in $width bzw. $height: "42" oder "42px"?

(also korrekt, 10Pixel für den Border des Bildes zzgl. 2+2 Pixel für Border+Padding des divs).

Nein, nicht korrekt. Border und padding kommen ja bei der Berechnung der Breite der Box des 'div' sowieso zu width noch dazu: Boxmodell. [CSS2 §8, SELFHTML]

Leider bekomme ich die korrekte Ausgabe nur im Internet Explorer hin,
[…] ist wohl wirklich ein Bug der Firefox-Engine.

Die Behauptung, der IE würde es richtig machen und Firefox falsch, erweist sich in den allermeisten Fällen als Trugschluss. So auch hier.

Der Firefox hält sich an die Spezufikation; der IE im Quirksmodus nicht. Du solltest IEs unbedingt aus dem Quirksmodus herausholen, dann hat sich dieses Problem erledigt. [SELFHTML]

Ich habe die Pixel auf 10 - obwohl es ja zweifellos 14 sind,

Es sind zweifellos 10.

dann funktioniert es in allen Browsern.

Weil der IE einen weiteren Fehler begeht: Er interpretiert 'widht'/'height' als 'min-widht'/'min-height' und vergrößert Boxen fälschlicherweise eigenmächtig.

See ya up the road,
Gunnar

[Achim]

Was genau steht denn in $width bzw. $height: "42" oder "42px"?

da steht nur 42, deswegen habe ich ja das "px" angefügt!.

»» »» »» (also korrekt, 10Pixel für den Border des Bildes zzgl. 2+2 Pixel für Border+Padding des divs).

Nein, nicht korrekt. Border und padding kommen ja bei der Berechnung der Breite der Box des 'div' sowieso zu width noch dazu: Boxmodell.

ja, meine Variable width steht ja eben auch für die Breite des <div></div>, und nicht für die Breite des <img>.
width: Breite des orig-Bildes + 10 px  + 4 px
(border des <img> 5px; padding/margin des <img> 0px;
padding und border des <div></div> 1px; margin des div 0px;)

und wie gesagt, der "Fehler" (den ich jetzt aus Überzeugung mal so nenne) passiert nur auf der unteren und auf der rechten Seite der Box, die andern Seiten sind meiner Vorstellung gemäß)

Leider bekomme ich die korrekte Ausgabe nur im Internet Explorer hin,
[…] ist wohl wirklich ein Bug der Firefox-Engine.

Die Behauptung, der IE würde es richtig machen und Firefox falsch, erweist sich in den allermeisten Fällen als Trugschluss. So auch hier.

Der Firefox hält sich an die Spezufikation; der IE im Quirksmodus nicht. Du solltest IEs unbedingt aus dem Quirksmodus herausholen, dann hat sich dieses Problem erledigt.

Ich habe die Pixel auf 10 - obwohl es ja zweifellos 14 sind,

Es sind zweifellos 10. Wie kommst du jetzt auf 10? s.o.

dann funktioniert es in allen Browsern.

Weil der IE einen weiteren Fehler begeht: Er interpretiert 'widht'/'height' als 'min-widht'/'min-height' und vergrößert Boxen fälschlicherweise eigenmächtig.

Dann würde aber nach deiner Vorstellung auch der Firefox den selben Fehler machen. Denn ich sagte ja, es funzt in ALLEN (d.h. beiden) Browsern;)

MfG
Achim

[Gunnar Bittersmann]

Hello out there!

width: Breite des orig-Bildes + 10 px  + 4 px

Nein, falsch.

Du hast dir offenbar nicht die geringste Mühe gemacht, den Links zu folgen und das Boxmodell nachzulesen; dabei ist dort sehr wenig Text, dafür eine alles erklärende Graphik ...

Dann würde aber nach deiner Vorstellung auch der Firefox den selben Fehler machen.

Nein, der Firefox macht keinen Fehler.

Denn ich sagte ja, es funzt in ALLEN (d.h. beiden) Browsern;)

Der IE hingegen begeht zwei Fehler, deren Wirkungen sich aufheben.

BTW, es weitaus mehr Browser als IE und Firefox; wenn du von den beiden sprichst, kann von ALLEN keine Rede sein.

See ya up the road,
Gunnar