Sep 26
How to implement :first-child and directly nested children for IE6
CSS, Coding, DOM, HTML Add comments
Correct CSS:
#someid div {color: blue;}
#someid div:first-child {color: red;}
#someid > div {color: green;}
#someid div div {padding-left: 2em;}
/*
just to show some indend and separate direct children to nested ones
*/
IE6 CSS:
<!--[if IE 6]>
<style type="text/css">
/*
FIRST CHILD AND NESTED CHILDRED:
1st one for :first-child
2nd one for all other directly nested childred
*/
#someid div {
color: expression(this.previousSibling == null ? 'red' : (this.parentNode.id == 'someid') ? 'green' : '-' )
}
</style>
<![endif]-->
October 11th, 2007 at 4:56 pm
Hey, thanks a lot! Exactly what I needed!
November 18th, 2007 at 8:45 pm
А такую штуку никак нельзя сделать:
li:first-child ul{
foo: bar;
}
?
November 18th, 2007 at 8:52 pm
Почему нельзя? FF скушает и так, а для IE надо написать навороченный expression
)
li ul {foo: expression((this.parentNode.tagName==’LI’ && this.parentNode.previousSibling == null)?’bar’:'bistro’);
Не проверял, но суть-то такова.
Работать правда будет только для непосредственно вложенных UL в LI – но опять же можно поколдовать
November 18th, 2007 at 11:44 pm
Фантастик!) Спасибо!
November 19th, 2007 at 12:45 am
Да не за что.
February 7th, 2008 at 6:28 pm
this doesn’t seem to work for me. i’m obviously doing something wrong but i don’t know what.
table.mainNav table a {
_background-color:expression(this.previousSibling==null?’red’:'-’)
}
i want the first link within table.mainNav table to be red and the rest not to be affected.
any help would be greatly appreciated.
February 9th, 2008 at 3:18 am
Okay, this is really cool– but what if, I want inheritance to stop? For example, if I I create a and then someone else automatically generates 3 more tags without class name or id or anything like that beneath. If I attach a background image to the innermost (for example: div.myclass div div div {background : url(…) } everything works okay. But if the other party generates a 4th underneath me, the background image I created propogrates to that 4th and I can’t stop it from doing that in IE6.
In firefox it’s simple by saying div.myclass>div>div>div {} all the way up the layers of divs to div.myclass{}. But it doesn’t work right in IE6.
February 9th, 2008 at 12:40 pm
2Vince: well I’d like to see exact code to be helpful, could you add me as GTalk contact (mauzon) – I think we can resolve the issue
It is hard to help without knowing exact code.
At least be careful to syntax because it is javascript
)
February 9th, 2008 at 12:53 pm
2Soul – I am pretty sure it is possible to find some elegant solution to stop the inheritance for IE6 using expression. Actually I am lazy guy to create abstract models for ANY occasions but definitely ready to discuss concrete page problem or/and even model. So don’t hesitate to create and share the problem and we’ll try to find the solution.
February 9th, 2008 at 10:14 pm
Alex, let me see if I can trim down an example exhibiting the problem, and post it here.
_thank you_
Soul.
February 9th, 2008 at 10:16 pm
Um, actually I can’t put everything here, can you provide me with a private email address, so I can send you the example?
thx
Soul
February 10th, 2008 at 1:44 am
you can reach me at mauzon (at) gmal.com and the same account at gTalk.
July 15th, 2008 at 4:54 pm
Hi,
a colleague just turned me on to this work-around, and it’s worked wonders for the first task at hand, thanks!
Now i have a problem implementing this in another situation, and wondered if anyone could help?
i’m trying to target the first div (class ‘fight’) to lose the top margin assigned to every column…
.col-container .fight .column { margin-top: expression(this.previousSibling == null ? ‘0em’ : (this.parentNode.className == ‘fight’) ? ‘1.31em’ : ‘-’ );
}
…can anyone see what i’m doing wrong? (i’m limited in Javascript)
The freaky thing is that if i target an element within .column (like ), it plays ball. the mind boggles. Help would be much appreciated! (i don’t speak russian tho..;o)
Many thanks
July 15th, 2008 at 5:03 pm
css layer examples / properties and layer attributes
http://css-lessons.ucoz.com/css-layer-properties.htm
September 17th, 2008 at 6:48 pm
I’m sure I’m missing some kind of n00b thing here, but I can’t just plug that IE6 conditional comment block into my header and have it work, can I?
How should I make the call to this code?
September 17th, 2008 at 6:55 pm
2ZorkFox: just add the code into head section, nothing more. Feel free to contact me directly using IM
January 7th, 2009 at 9:10 am
Hi
Your example is working fine for me. But I need to place background image instead of color. Can you please give an example.
Thanks in advance.
January 10th, 2009 at 3:54 pm
4Hem: The same behavior – just to change expression a bit. Don’t hesitate contact me to check your problem – I am sure we’ll find the solution.
January 21st, 2009 at 4:46 pm
Hi
I’m trying to use the following code:
#menu li ul li{
background: expression(this.previousSibling==null?’none’:'url(img/ponto_menu.gif)’);
}
But it doesn’t work. What’s wrong?
It only works when I use just color names like this:
#menu li ul li{
background: expression(this.previousSibling==null?’red’:'green’);
}
January 21st, 2009 at 5:51 pm
I suppose if you want to work to background-image you should write something like that:
#menu li ul li{
background-image: expression(this.previousSibling==null?’none’:’url(img/ponto_menu.gif)’);
}
September 25th, 2009 at 11:13 am
Nah, not working for me (
Any ideas?
September 25th, 2009 at 11:35 am
Gimme the URL please. I guess there are some img paths issues,
November 6th, 2009 at 1:09 pm
Okay if you want to change the colour i guess, i found it to be usless if you want to change padding or width.
November 6th, 2009 at 11:46 pm
Why? It can be done for padding and width as well with no problem.
January 8th, 2010 at 3:50 pm
can you chain selectors like this?
#wrap ul li { border-bottom-color: expression(this.parentNode.previousSibling==null?’red’:'black);}
i have 2 ul one after the other and can’t modufy the code.
I just want to change all li borders from the first ul but of course ul:firstchild doesn’t work in ie6
I thought i read somewhere a way to emulate it but can’t find it anymore
Cheers
January 8th, 2010 at 5:04 pm
Hey Yannick, could you please provide URL to your model and buzz me online somehow? I think it is possible to resolve the problem, just need a bit more info. Your quote contains tiny syntax error – lack of last ‘ – it could be another reason.
Best,
Alex
February 25th, 2010 at 1:47 am
espression:
expression(this.previousSibling==null?’none’:’url(img/ponto_menu.gif)’);
is not working due to bracket in url(img/ponto_menu.gif – see http://www.webmasterworld.com/css/3592524.htm
this is working in IE6 (dont ask me why):
#elementid{
background-image: url(topmenu_li.png);
background-image: expression((function(x){if(x == null)return ‘none’})(this.previousSibling));
}