How to solve :first-child CSS bug in IE 7
Yesterday, IE 7, once again, pushed me to the brink of going postal. Refusing to give up, I finally managed to find the problem.
Background
I was creating a top menu for a web site I was working on, and it needed some special styling for each first item, i.e. the first LI
, and other styling for all others. Since it’s a controlled environment, IE 6 doesn’t need to be supported (Yay!); hence I thought I’d be using some cool CSS to solve it, as opposed to riddling the HTML code with classes.
Let’s look at my (somewhat π ) simplified example:
HTML code
<ul>
<!-- First item is special -->
<li>
<a href="/">Start page</a>
</li>
<li>
<a href="/">News</a>
</li>
<li>
<a href="/">Contact</a>
</li>
</ul>
CSS code
li {
background: red;
}
li:first-child {
background: blue;
}
The problem
No matter how I tweaked and changed my code, the :first-child
CSS pseudo selector would not work in IE 7. Naturally, Microsoft claims it does support it, and, while going mental, I was trying to figure out whether it was just another crappy implementation that doesn’t work at all, or if there was something weird with my code.
The solution!
After pulling my last beard hair from my face, it dawned upon me! The key was the HTML comment preceding the first LI
item, incorrectly interpreted by IE to be the first child element of the UL
. In my defense, the HTML comment wasn’t written by me and yes, it could be in another place… π
Still, it’s a horrendous bug, and therefore I wanted to warn you! Be very careful about where you put your HTML comments, because the possible results will mess with your mind.
I guess it’s like IE’s jscript engine, which thinks comment nodes and HTML elements are the same thing π
HTML Comments in IE must be set carefully. They can also produce the weird “Duplicate character bug” which is described here:
http://www.positioniseverything.net/explorer/dup-characters.html
I'm actually not that surprised to see this bug/feature. My best guess would be that IE has to interpret comments as elements for conditional comments to work? Still, I don't think it's a big bug, and it's relatively simple to work around.
Did you try IE8 to see if it still works in the same way?
Wow, that's an amazing oversight!
But, at least it'll be consistent across many future versions, as it'll also be in IE7 compatability mode for many versions to come, unless they decide not to do bug for bug compatability mode π
Would not have used the heading "How to solve…" and neither state that I come up with a solution =P There is no solution. IE7 needs to be patched, that is the solution. Moving the HTML comment aint a solution on the problem. There might be cases where there might be a comment there and you can´t do anything about it. There might be times you need a comment there, white-space suppression anyone?
Just state that there is a problem with the :first-child pseudo-class in IE7 but please don´t say you found a solution, it´s missleading. It´s "sensationsjournalistik" at it´s best.
kimblim,
Yes, it's probably related to conditional comments in some sort of way. I'd still deem it serious, though, in all kinds of CSS code where relations and placement of HTML elements is deciding applied styles.
Haven't tried IE 8 with it yet.
Morgan,
Yes, wonder if their IE 7 mode in future versions will have bug fixes. Probably not, I presume.
Pete,
Yeah, most likely.
Ole,
Ah, yes, that one is bad too.
Anders,
Since it solves the problem for me, and for a majority of other stumbling upon it, I would definitely say it deserves the epithet "How to solve…". With web development in general, help articles and so on, it is about how you as a developer can solve the problem you're facing, extend the web browser to encompass differences etc.
Of course the core problems in IE has to be fixed, but that is up to Microsoft. So, if you find "How to solve…" as a headline to be "sensational journalism", at best, you haven't seen much of that… π
I ran into this yesterday! The swearing fit both before it was figured out and after was pretty fun… It is amazing/scary how you have to think like a browser to figure out odd little things like this. Thanks for posting this!
I am happily on a "no IE6 supported" project as well… feels good. π
So very typical of MS. To implement a feature almost all the way…
This problem of IE 7 treating comments as elements for the purpose of applying CSS came up on the css-discuss mailing list when the browser was still in beta. As Ingo Chao pointed out, comments can even be made to react to <code>:hover</code> π
@Christopher Papastefanou
Wouldn't you say that this time they implemented it, but then went too far? They do that just about as often. π
I knew it directly when I saw your code :p
You need to meet this once to be able to avoid it forever: like mentionned before, HTML comments in IE are dangerous. Another place to avoid them is before the doctype, it would jump into Quirks Mode.
Jesse,
Yes, it's all about getting into the mind of IE. π
And congrats for no IE 6 for you!
Christopher, mdmadph,
Yeah, not all the way, or too much. Still, jsut plain wrong…
Nick,
Great, thanks for the link!
Cerebral,
Yeah, me too. I had an enormous file, but when I broke it down to the above, I saw it too. π
Some versions of IE are also known for being very nitpicking with whitespaces. And having a comment before doctype triggers quirks mode. So the fact that a comment counts as an element is stupid but fits in the scheme…
This is good advice when working with IE6, too. Any comment or other hidden element (hidden inputs for example) can trigger the duplicated characters bug.
Of course, sometimes you don't need any hidden elements to trigger it. You just need IE6 to fail miserably at adding up. None of the usual fixes worked, hence I nearly went postal yesterday. In the end some voodoo magic (involving the magic number 3 and overflow: hidden; on an element several branches up the tree) made the problem go away. GAAAH!
The comment IS the first child of UL.
Coment tags are still part of the DOM, simply because they are invisible in the rendered view of the browser doesn't mean they aren't there.
I fail to see how this is "incorrectly interpreted by IE".
related problems
http://markmail.org/message/md2wx3j5vxvjplg4
@chovy: Comments might be part of the DOM, but that is a different specification to CSS, and the terms "first child" has different meanings in the two specifications.
CSS 2.1 states that the adjacent sibling selectors should ignore <q cite="http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors">non-element nodes (such as text nodes and comments)</q>.
Although :first-child is a pseudo-class rather than an adjacent sibling selector, its definition also refers explicitly to elements and thus also excludes comments.
Chris,
Yes, whitespace can cause enormous problems, and don't even think about preceding the doctype with anything.
Olly,
Good to see that we share the potential of going postal. π
chovy,
Nick's comments explains it. Also, I'd like to add that, opposed to, for instance, hidden form elements, HTML comments have no rendering, no styling, no script access, no values posted.
Hence, it's rather just page information than page content, in my mind, and should therefore not be treated like a child element.
Ingo,
Thanks for sharing!
Nick,
You took the words right out of my mouth. π
[…] dia que passa fico conhecendo mais um bug novo no Internet Explorer. Já ouviram falar do bug de first-child no IE7? O curioso problema que ocorre é o seguinte. Observem a seguinte marcação […]
Thank you very much for posting this. I had an exactly similar problem where the class was correctly applied in Firefox but applied one level further down the DOM in IE7. I concluded that it was a bug and searched accordingly. Your article immediately cleared up the problem.
Thank you.
Regards
Richard
Richard,
Glad that it was of help to you!
[…] How to solve :first-child CSS bug in IE 7 […]
Funny to read that some people think that it's a bug in IE7 π
The only situation when the first-child selector does not work is when you forget to use a doctype. Just use valid (x)HTML-code and there's no problem at all.
Martin,
It is a bug in IE 7. Naturally, this has been tested with strict HTML and XHTML doctypes, and it, in my mind, incorrectly parses the HTML comment as the first-child. Nothing that is invisible should be affected by presentation code, i.e. CSS.
I'm sorry, in my hurry I read your post the wrong way. I thought you said that IE7 does not support :first-child, but it was about the HTML-comment that confuses IE7. That's indeed strange behavior, good to know π Thanks.
Martin,
No worries. π
I had the same problem in one of my html sliced documents.
I have spent a lot of time on looking why IE7 gives me this bugs:
– ignores auto margins;
– first-class selectors.
I've checked the document many times, every class and every element, but it was clear and the W3 Validator said the document is valid and he marked it with a green color as usually.
Than I decided to remove commented text, which was placed in my html document before this line:
<code><!DOCTYPE html…</code>
This text just include document information, such as:
<cite><!– filename: index.html; author: author's name… –></cite>
When I removed this comment, all the IE7 bugs disappeared!
My mistake was here: I forgot, that comments marked <– … –> is only html document comments and they should be placed only inside <html> tag.
Robert, you saved my beard. Thank you!!!
Stefan,
Great!
Man, I wanna kiss you π :D. I would have probably wasted my whole day to figure out what the hell is happening, but thanks God I found your post. You saved my hours. Thanks a lot π
Abdullah,
Great to hear that it helped out!
Thanks for this post. Only took me five minutes to figure out what the heck was up. Without the post, I probably would have ended up banging my head against the wall.
Martin,
You're welcome!
Untitled Document
li:first-child{color: green;}
li:last-child{color: red;}
li:target{color:green;}
li:last-child:hover{color: orange;}
a:hover{color: yellow;}
First
Second
Third
<!– last item is special –>
Last
check this code there is no any comments in this code bur still last child and first child is not working ie 7
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
li:first-child{color: green;}
li:last-child{color: red;}
li:target{color:green;}
li:last-child:hover{color: orange;}
a:hover{color: yellow;}
</style>
</head>
<body>
First
Second
Third
<li title="last">Last
</body>
</html>
check this code there is no any comments in this code bur still last child and first child is not working ie 7
abcd,
The CSS pseudo-properties <code>:last-child</code> and <code>:target</code> aren't supported by IE7, but <code>:first-child</code> really should work for you in that example. Try stripping out all the other CSS and see if it works.
yes i checked it's not working in IE7
is there any idea other than first child and last child
abcd,
Nope, that is all I can think of.
@abcd
I know your post is a couple months old but your code probably isn't working because the first child has an <a> tag in there. You have to explicitly set the color on <a> tags so your css would have to be something like: li:first-child a { color: green; }
π
I've tested the code of the example and it doesn't work on IE7. Can you test it again now? The version of the IE7 might be different (7.0.5730.13)
How can I target the first paragraph in a div when a different tag precedes the first paragraph? For example:
<code>
<div>
<img src="" />
I want to target this paragraph.
Second paragraph
</div>
</code>
If I remove the image tag, div p:first-child works, but with the tag there, it seems to find the image as the first child.
gexplorer,
Not sure what version it was, but it might have been fixe din a minor update then.
Kris,
You could do it with a CSS3 selector, but they are only supported in the latest versions of various web browsers.
i can’t believe that would cause that, but it works! thanks. Ie8 has same problem.
dravidian7,
Glad it helped!
Thanks to IE I now have not one but five imaginary friends. They are all hot elves FYI. Madness isn’t as bad as people make it sound i guess….
This post saved me (*us –> cant forget the hot elves) today. Thanx!
Angel,
Ha ha! π
Whatever solves the problem right? π
Thanks, solved my problem 2 years later!
Web Design Scotland,
Glad it was of use. π
hi,
I was near to give up, thanks for this very useful post, you saved me !
regards
alexandria,
Glad it helped!
Thanks for that… would never have thought of that…
Steven,
Glad it was of help!
Hi,
if needed, it is possible to bypass this bug using conditional comment:
it isn’t so pretty, but functional π
… sorry, I didn’t escape the html π
this was the example:
<!--[if !IE]> this is a comment <![endif]-->
π
MoiKano,
Ha, cool idea!
Thank you very mutch ! Perfect !
I would have never find it myself…
ArnaudBan,
Glad to help!
Hi Robert,
I realize this is an older post, but just wanted to mention that I was working on a project using some of the Twitter Bootstrap framework, and was having an issue with a “first-child” row not lining up with some other content in ie7; Did a search for first-child + ie7 and your article came up.
The problem was indeed a comment on the proceeding closing div, and removing it solved the issue.
As a hobbyist coder, I would have never figured it out on my own.
A big thanks for posting this.
Dave,
Good to hear, and glad it was helpful!
thank you so much for saving my beard-hair! π I usually now always drop ie7-support of my websites while i have choice, but sometimes i have no choice :/
Jonas,
Good to hear. π
[…] ???Β http://robertnyman.com/2009/02/04/how-to-solve-first-child-css-bug-in-ie-7/ […]
To be honest, the need for a comment there is probably as poor as the IE bug itself.
A big thanks for posting this article!
lol what I wanted to know is how did it strike you that it had to be the comment? That is just insane.
Ha! Well, I tried a few things, and then it hit me. π
IF we add the tag at the top of the HTML then this issue may get resolve.
I also faced same issue but the problem get resolved when i add the above tag.
I had no idea IE7 supported first-child. Why not nth or last?
Thanks Robert great helpful article.