CSS border probleme mit IE

[Forumsgast]

Hallo

Ich hab ein riesen prob =/ wen ich ein bild mit einer class oder direkt mit Style ein padding von 1px und einen border von 1 px deffiniere zb. so:

<img src="bild.jpg" style="padding: 1px; border: 1px solid #DDDDDD;">

dann hab ich zwar mit opera und firefox einen 1px dicken rahmen der sich auch 1px vom bild absetzt (wegen dem padding) aber im IE liegt der border direkt am bild an und die 1px passing kommen garnicht zur geltung !?!

wen ich es so mache:
<div style="border: 1px solid #DDDDDD;">
<div style="padding: 1px;">
<img src="bild.jpg">
</div>
</div>

dann hab ich zwar den 1pix abstand aber unten am bild haut er dann 2-3px abstand rein... wie gesagt egal wie ich es mache mit opera und FF kein prob nur der IE muckt total rum...

kann mir das jeman bitte erklären und eine lösung falls möglich geben?

MFG

[Forumsgast]

Hi,

Immer dieser IE ^^.
Das ist, soviel ich weiss, einer der vielen Bugs des IE.

Versuch das mal mit Doctypes.
Hier das Beispiel aus SELFHTML:
SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell


Mfg hoffe es bringt was.

[Forumsgast]

Margin auf 0 setzen, dann klappts auch im IE:
<img src="bild.jpg" style="padding: 1px; border: 1px solid #DDDDDD; margin: 0px;">

[Forumsgast]

<img src="bild.jpg" style="padding: 1px; border: 1px solid #DDDDDD; margin: 0px;">

Geht net mit IE7. Hast du es einmal versucht?
Es ändert sich nix.

Mfg

[Forumsgast]

Ganz einfach:
padding ist der Innenabstand zum enthaltenen Inhalt. Im Bild kommt ja nichts mehr, worauf also soll sich das padding auswirken? margin ist ausserhalb des Borders also auch sinnfrei.

ergo:

<span style="border:1px solid #000;"><img src="0815.png" style="margin:1px;"></span>

Der Browserunterschied hängt mit der Interpretation des Boxmodells zusammen.

[Forumsgast]

margin ist ausserhalb des Borders also auch sinnfrei.

Ist klar, aber wieso schreibst du es dann im Beispiel? Du meintest wohl padding. Ausserdem darf dieses Attribut, wie du so schön gesagt hast, nicht im <img>-Tag stehen, sondern in der DIV.

Es geht übrigens mit <span></span> nicht. Habe es getestet.
Aber mit einem DIV-Container funzts.

Hier:

<div style="border:1px solid #000; height:150; width:100%; padding:1px;"><img src="bild.x"></div> 

Mfg

[Forumsgast]

Ist klar, aber wieso schreibst du es dann im Beispiel? Du meintest wohl padding. Ausserdem darf dieses Attribut, wie du so schön gesagt hast, nicht im <img>-Tag stehen, sondern in der DIV.

Nein meine ich nicht. Es ist im Prinzip egal, ob Du ein padding auf das äussere, oder ein margin auf das innere Element benutzt. Solange das Element dieses Attribut verträgt. Tut das Image leider nicht, weil es Eigenschaften eines Inline-Elementes besitzt.
Trotzdem ist div die falsche Wahl, weil es das Element auf 100% verfügbare Breite ausdehnt und einen eigenen Absatz bildet. Selbst mit float und definierter Größe bekommt man nicht dasselbe Verhaten wie das eines Inlines.

Hier also die Lösung:

<span style="border:1px solid #000;background-color:#f00;padding:10px;"><img src="0815.png"></span>