CSS border probleme mit IE

evader · 29.04.2009, 03:22

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

prestige · 29.04.2009, 12:13

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.

dille001 · 29.04.2009, 12:40

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

prestige · 29.04.2009, 13:45

Zitat:

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

Mfg

nikosch · 29.04.2009, 16:23

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:

Code:

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

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

prestige · 29.04.2009, 18:03

Zitat:

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:

PHP-Code:

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

Mfg

nikosch · 29.04.2009, 19:43

Zitat:

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:

Code:

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Firefox / IE - Probleme		HTML, Usability und Barrierefreiheit	5	20.07.2009 17:04
Border bei fieldset	litterauspirna	HTML, Usability und Barrierefreiheit	4	25.01.2009 10:33
[Erledigt] Probleme mit iFrame	rocco	HTML, Usability und Barrierefreiheit	1	28.12.2008 17:44
[Erledigt] CSS: Probleme zwischen IE und FF	vita	HTML, Usability und Barrierefreiheit	7	24.10.2008 20:01
CSS DIV Border Problem bei IE (wo auch sonst)	FearMyInnerSelf	HTML, Usability und Barrierefreiheit	3	18.07.2008 07:14
div hintergrund wird nur angezeigt wenn border definiert	noskule	HTML, Usability und Barrierefreiheit	0	21.12.2006 15:51
Probleme bei Speicherung von serialize() Strings	Manni2k	PHP Tipps 2006	13	15.10.2006 15:06
Probleme mit Rechteverteilung chmod() per script!!!???	Funky_	PHP Tipps 2006	7	17.06.2006 17:10
Bild als border	Dragon26mFR	HTML, Usability und Barrierefreiheit	6	06.06.2005 16:33
Probleme mit dem Layout	Pimbolie1979	HTML, Usability und Barrierefreiheit	7	01.06.2005 16:48
Probleme mit der Navigation	Pimbolie1979	HTML, Usability und Barrierefreiheit	3	19.05.2005 15:45
Zwei Rechner ins Netz - Router - Hub - Probleme...	imported_Ben	Off-Topic Diskussionen	37	13.01.2005 21:36
CSS: Probleme mit float:!!	18inch	HTML, Usability und Barrierefreiheit	1	30.12.2004 13:55
[Erledigt] Technische Probleme mit Sessions		PHP-Fortgeschrittene	4	18.11.2004 14:45

29.04.2009, 03:22
evader Neuer Benutzer Registriert seit: 29.04.2009 Beiträge: 1	CSS border probleme mit IE 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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

29.04.2009, 12:13
prestige Benutzer Registriert seit: 11.05.2008 Beiträge: 71 PHP-Kenntnisse: Fortgeschritten	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. __________________ Genau das wollte ich auch gerade sagen ^^

29.04.2009, 12:40
dille001 Benutzer Registriert seit: 28.02.2009 Beiträge: 58	Margin auf 0 setzen, dann klappts auch im IE: <img src="bild.jpg" style="padding: 1px; border: 1px solid #DDDDDD; margin: 0px;">

29.04.2009, 16:23
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	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: Code: <span style="border:1px solid #000;"><img src="0815.png" style="margin:1px;"></span> Der Browserunterschied hängt mit der Interpretation des Boxmodells zusammen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --