CSS Abstand falsch in IE

[sagert90]

Hallo liebe PSD'ler,

ich habe auf einer Website 4 Bilder eingebunden, die untereinander stehen. Den Umbruch habe ich per <br> Attribut verwirklicht.

Die Bilder liegen in einem div-Container und haben als class="tn":


Wenn ich nun den Abstand der Bilder per CSS definiere wie folgt:

.tn
{
margin: 4px;
text-align: center;

}

ist der Abstand wie gewünscht, zumindest im Firefox. Im IE wird jedoch ein doppelter Abstand angezeigt, woher kommt das und wie kann ich das verhindern?
Denn unter den Bildern befindet sich Text, der dann im IE teilweise durch die Bilder verdeckt wird.

mfG,
sagert90

 

[bigpaul]

AW: CSS Abstand falsch in IE

Hast du ein Beispiel online?

 

[Herr_D]

AW: CSS Abstand falsch in IE

na ja margin bei jedem Bild gibt doppelten Abstand...


setz nur margin-bottom

 

[pac_nrw]

AW: CSS Abstand falsch in IE

Wenn der margin nur auf bottom angewendet wird, zeigt firefox dann nicht den halben Abstand an? Ich denke das dies ein Bug im IE ist. Probier einfach mal ein bischen rum.

 

[Str4ng3r]

AW: CSS Abstand falsch in IE

ich würd mal mit genauen margin angaben rumspielen also bottom top right left, damit kommt der IE grundsätzlich besser klar. der is nämlich nicht so schlau wie der FF^^

 

[sagert90]

AW: CSS Abstand falsch in IE

Also das konkrete Beispiel ist hier zu finden:

index

Einfach mal mit beiden Browsern vorbeischaun
Danke soweit schonmal für eure Tipps, werde mich morgen mal rannsetzen und Bericht erstatten=)

Also ich möchte den selben Abstand zwischen jedem Bild per CSS ermöglichen, nicht nur den Abstand von unten oder oben =)

mfG

 

[SineTempore]

AW: CSS Abstand falsch in IE

soweit ich weiß, soll laut dem W3C die margin abstände so interpretiert werden, dass wenn zwei aufeinander treffen (so wie bei dir) der größere der abstände als tatsächlicher abstand benutzt werden soll. beim IE <= 6 (glaub ich ) ist es so, dass die beiden aufeinander treffenden abstände einfach addiert werden. deswegen der "doppelte" abstand.
alles klar oder hast du jetzt einen knoten im kopf?

 

[sagert90]

AW: CSS Abstand falsch in IE

@SineTempore:

Soweit hab ich dich gut verstanden, dass hieße dann aber doch, dass wenn ich das margin jetzt halbiere, das im IE richtig angezeigt werden würde, dann im FF aber der Abstand halbiert sein würde.....

 

[SineTempore]

AW: CSS Abstand falsch in IE

richtig. wenn du allerdings margin-bottom verwendest, ist es nun halt so, dass einmal einen Abstand von 4px hast und einmal 0px für den rand oben (margin-top).
=> FF nimmt den größeren Abstand (4px)
=> IE kommt durch 4+0=4 auch auf 4px raus

 

[sagert90]

AW: CSS Abstand falsch in IE

Danke für eure Hilfestellungen.

Jedoch habe ich plötzlich keinen Abstand mehr zwischen den Bildern wenn ich "margin-bottom" verwende statt "margin" verwende. Leider mal wieder nur im IE... im Firefox wird der Abstand korrekt angezeigt.
Liegt es vielleicht daran, dass es sich um ein Frame handelt, der nur die Bilder beinhaltet?

Also hier der Code:

<script type="text/javascript" src="http://www.willemasma.nl/gallery/js/mootools.js"></script>
<script type="text/javascript" src="http://www.willemasma.nl/gallery/js/slimbox.js"></script>

<link rel="stylesheet" href="http://www.willemasma.nl/gallery/css/slimbox.css" type="text/css" media="screen" />

<style type="text/css">

<!--

.tn
{
margin-bottom: 24px;
text-align: center;

}

.img
{
width: 160px;
hight: 106px;
}
-->
</style>


<div id="gallery">
                                                        
<a class="tn" href="http://www.willemasma.nl/gallery/abgerundet/A1.jpg" rel="lightbox-start" titel="Water"><img src="http://www.willemasma.nl/gallery/komprimiert/A1.jpg" border="0" /></a><br />
                                                        
<a class="tn" href="http://www.willemasma.nl/gallery/abgerundet/A2.jpg" rel="lightbox-start" titel="my caption"><img src="http://www.willemasma.nl/gallery/komprimiert/A2.jpg" border="0" /></a><br />
                                                        
<a class="tn" href="http://www.willemasma.nl/gallery/abgerundet/A3.jpg" rel="lightbox-start" titel="my caption"><img src="http://www.willemasma.nl/gallery/komprimiert/A3.jpg" border="0" /></a><br />
                                                        
<a class="tn" href="http://www.willemasma.nl/gallery/abgerundet/A4.jpg" rel="lightbox-start" titel="my caption" ><img src="http://www.willemasma.nl/gallery/komprimiert/A4.jpg" border="0" /></a>
                                                        
</div>

mfG,
sagert90

 

[Herr_D]

AW: CSS Abstand falsch in IE

du definierst eine class .img... die gibt es aber nicht...


probier mal:

a.tn img
{
margin-bottom: 24px;
width: 160px;
hight: 106px;

}

 

[sagert90]

AW: CSS Abstand falsch in IE

@Herr_D: Vielen Dank für deine Hilfe! Daran hat es gelegen. Kenne mich mit CSS noch nicht so wirklich aus und dachte es reicht, einfach .img zu nehmen, da ja der "img" Tag im Container vorkam. Direkt doppelt hinzugelernt.
Es hat dank deiner Hilfe geklappt!
Danke!

 

[stb_87]

AW: CSS Abstand falsch in IE

@sagert90:

Weiterführende Infos zu dem Problem:
CSS 4 You - The Finest in Stylesheets: Workshop: Boxmodell