nicht angemeldet
:not und :first-child
Hallo zusammen,
ich habe ein div mit paar Bildern drin. Die Bilder sollten immer einen margin-left haben, so dass sie einen kleinen Abstand haben. Dies mache ich indem ich den margin für alle Bilder ausser dem Ersten setze:
<div class="picture-list-horizontal">
<img src="bild1.jpg"/>
<img src="bild2.jpg"/>
<img src="bild3.jpg">
</div>
// div eigenschaften
.picture-list-horizontal{
margin-top:5px;
margin-bottom:5px;
width:100%;
}
// für alle bilder innerhalb des divs den border setzten
.picture-list-horizontal>img{
border-width:1px;
border-style:solid;
border-color:#ababab;
}
// für alle bilder ausser dem ersten den margin setzten
.picture-list-horizontal>img:not(:first-child){
margin-left:15px;
}
dies funktioniert wunderbar in allen Browsern ausser dem lieben IE.
Wie krieg ich das im IE6/7/8 zum laufen? Hab schon gegoogelt und auch ein paar Topics hier im Forum gefunden aber habs damit nicht hinbekommen:
http://forum.de.selfhtml.org/archiv/2009/4/t186070/#m1235558
Ideen?
Danke und Gruss,
Remo
-
Ideen?
Eine JavaScript-CSS3-Selektor-Engine ist eine Möglichkeit (Sizzle z.B.).
Oder du schreibst eine Klasse namentlich "first-child" in jedes erste Elemente (serverseitig per scriptsprache).
-
Eine JavaScript-CSS3-Selektor-Engine ist eine Möglichkeit (Sizzle z.B.).
ok schau ich mir mal an danke. sonst siehst du keine möglichkeit? finds bisschen krass ne library einzubinden nur weil IE dumm ist...
Oder du schreibst eine Klasse namentlich "first-child" in jedes erste Elemente (serverseitig per scriptsprache).
ist statisches html keine generierung per script.
-
ok schau ich mir mal an danke. sonst siehst du keine möglichkeit? finds bisschen krass ne library einzubinden nur weil IE dumm ist...
Die hab' ich bereits genannt. Eine andere Alternative wäre noch "Im IE6 siehts halt nicht ganz so toll aus, aber jemand der es nicht weiß, merkt es nicht."
ist statisches html keine generierung per script.
Dann schreibs per Hand rein :).
-
ok schau ich mir mal an danke. sonst siehst du keine möglichkeit? finds bisschen krass ne library einzubinden nur weil IE dumm ist...
tut nun:
<body onload="sizzleThis()">function sizzleThis(){ var elements = Sizzle(".picture-list-horizontal>img:not(:first-child)"); for ( var i=0, len=elements.length; i<len; ++i ){ var element = elements[i]; if(isIE()){ element.style.marginLeft="10px"; }else{ element.style.marginLeft="13px"; } } }sieht nun exakt gleich aus ist zwar hässlich vom coden her aber ja...
danke für den tipp ;-)Die hab' ich bereits genannt. Eine andere Alternative wäre noch "Im IE6 siehts halt nicht ganz so toll aus, aber jemand der es nicht weiß, merkt es nicht."
Dann schreibs per Hand rein :).Wääää :)
-
-
-
-
Servus,
warum gibts du nicht jedem Bild einen margin und nimmst ihn dem ersten wieder weg? Dann verstehens auch die IEs ab 7.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|-
warum gibts du nicht jedem Bild einen margin und nimmst ihn dem ersten wieder weg? Dann verstehens auch die IEs ab 7.
Hoi patrick,
das hatte ich auch versucht, hat aber nicht geklappt da anscheinen das :first-child vor dem allgemeingültigen ausgeführt wird.
ergo wurde das margin:o im firstchild wieder vom anderen überschrieben. jedenfalls im firefox, daher hab ichs im IE gar nicht erst versucht.
mittlerweile klappts aber wunderbar und sogar mit ner tollen browser weiche ieks...
siehe http://forum.de.selfhtml.org/?t=191323&m=1275790-
Hi,
das hatte ich auch versucht, hat aber nicht geklappt da anscheinen das :first-child vor dem allgemeingültigen ausgeführt wird.
Das klingt nach einem nur sehr vagen Verständnis von der Spezifität von Selektoren in CSS.
Wenn du zwei Regeln hast, die sich im Selektor nur um ein hinten angefügtes :first-child unterscheiden, dann ist der "mit" auf jeden Fall der mit der höheren Spezifität.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-