By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,067 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

first-child doesn't work in Internet Explorer 6?

P: n/a
Hi,

Somewhere in my html page, I have the following code:

<div id="main-body">
<h2>Header text</h2>
<p>Some other text ...</p>
.....
<h2>Another header text</h2>
<p>Some more other text ...</p>
.....
</div>

I would like the first <h2> header to have a different style than all
the other ones. So I tried using the first-child selector:

#main-body {
margin-left: 10px;
margin-right: 10px;
margin-top: 18px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
font-size: 12px;
height: 140px;
}
h2 {
font-size: 14px;
font-variant: small-caps;
margin-top: 5px;
margin-bottom: 0px;
}
DIV > h2:first-child {
font-size: 14px;
font-variant: small-caps;
margin-top: 5px;
margin-bottom: 0px;
color: red;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 10px;
margin-bottom: 15px;
}

What you'd expect is that all the headers are in grey (#666666) as
inherited from #main-body. Except for the first header where in the
selector with the first-child pseudo class, the color of the text is
set to red.

When I try to open the page in Mozilla Firebird, 0.7, everything is
displayed is expected: the first header is red, the other ones are
grey.

But in Internet Explorer 6.0 (Windows XP Professional), all the
headers are grey, as if there is no selector for the first header. Is
this a problem within Internet explorer (perhaps they don't support
the first-child selector?) or am I doing something wrong?

Veerle
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
ve*********@hotmail.com (Veerle) wrote:
I would like the first <h2> header to have a different style than all
the other ones. So I tried using the first-child selector:

DIV > h2:first-child {
font-size: 14px;
font-variant: small-caps;
margin-top: 5px;
margin-bottom: 0px;
color: red;
}
Is there any need for the child > selector?
Setting font sizes in pixels is a bad idea as it makes it difficult
for IE users to resize the text.
When I try to open the page in Mozilla Firebird, 0.7, everything is
displayed is expected: the first header is red, the other ones are
grey.

But in Internet Explorer 6.0 (Windows XP Professional), all the
headers are grey, as if there is no selector for the first header. Is
this a problem within Internet explorer (perhaps they don't support
the first-child selector?) or am I doing something wrong?


IE6 doesn't support :first-child, it also doesn't support child
selectors...

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
> Is there any need for the child > selector?

Well, the problem I have is the following: in my html I have 3 <h2>
tags with one or more paragraphs between them, for example:

<div id="main-body">
<!-- start section 1 -->
<h2>heading 1</h2>
<p>paragraph 1</p>
<p>paragraph 2</p>
<!-- end section 1 -->
<!-- start section 2 -->
<h2>heading 2</h2>
<p>paragraph 1</p>
<p>paragraph 2</p>
<p>paragraph 3</p>
<!-- end section 2 -->
<!-- start section 3 -->
<h2>heading 3</h2>
<p>paragraph 1</p>
<!-- end section 3 -->
</div>

I want a seperator line above each <h2> header, except for the first
one. This line then visually separates my sections (you can take a
look at my current homepage http://www.veerle-en-koen.be/ which is not
implemented like described above, but has the seperator lines, just to
get an idea of what I mean). I would like to do this seperator in css
(a line image which is in the background and aligned to the top)
because this is pure layout and has nothing to do with the html. This
enables me to later on change the layout of my page and for example
not to have line in between my sections any more and this without
changing a thing to my html.

But if IE6 doesn't support the first-child pseudo class, then the only
possibility left is to define a different css class for the first <h2>
and for the rest of them. But this is not really the propper way to do
this, I think. This is a common problem though: often you want to do
something else with the first element then with the following ones,
which is exactly why the W3C people came up with first-child selector.

Setting font sizes in pixels is a bad idea as it makes it difficult
for IE users to resize the text.


Interesting opinion... What I'm trying to accomplish is to create a
page that looks exactly the same in any browser (that supports CSS2
anyway). If I do not specify the size of my <h2> text, I'm dependent
on what size the browser uses for its <h2> and my page wont look the
same any more in all browsers...
Jul 20 '05 #3

P: n/a
ve*********@hotmail.com (Veerle) wrote:
Is there any need for the child > selector?
Well, the problem I have is the following: in my html I have 3 <h2>
tags with one or more paragraphs between them, for example:

[snip]
I want a seperator line above each <h2> header, except for the first
one. This line then visually separates my sections (you can take a
look at my current homepage http://www.veerle-en-koen.be/ which is not
implemented like described above, but has the seperator lines, just to
get an idea of what I mean). I would like to do this seperator in css
(a line image which is in the background and aligned to the top)
because this is pure layout and has nothing to do with the html. This
enables me to later on change the layout of my page and for example
not to have line in between my sections any more and this without
changing a thing to my html.
That doesn't answer my question. Why did you use the child selector?
Not the first-child pseudo-class but the child selector.

In your case I can't see why you need
DIV > h2:first-child
instead of just
DIV h2:first-child

But this is a side issue.
But if IE6 doesn't support the first-child pseudo class, then the only
possibility left is to define a different css class for the first <h2>
and for the rest of them. But this is not really the propper way to do
this, I think. This is a common problem though: often you want to do
something else with the first element then with the following ones,
which is exactly why the W3C people came up with first-child selector.
Oh yes. IE is very much lagging behind in many aspects of CSS support.
Setting font sizes in pixels is a bad idea as it makes it difficult
for IE users to resize the text.


Interesting opinion...


Rather widespread amongst people who create web pages that are
actually intended to be read.

What if I need a larger font size in order to read your text?
What I'm trying to accomplish is to create a
page that looks exactly the same in any browser (that supports CSS2
anyway).
Why? Flexibility is a fundamental feature of the web as a medium, work
with that not against it.
If I do not specify the size of my <h2> text, I'm dependent
on what size the browser uses for its <h2> and my page wont look the
same any more in all browsers...


You can specify the font-size on % or ems. That way it will be based
on the user's chosen default size, so you can still say that your
headings will be 110% of the size of the body copy, but you leave the
exact details up to the user's browser.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #4

P: n/a
On Thu, 4 Dec 2003, Veerle wrote:
Setting font sizes in pixels is a bad idea as it makes it difficult
for IE users to resize the text.


Interesting opinion... What I'm trying to accomplish is to create a
page that looks exactly the same in any browser


But why?

[Before even *trying* to post an answer to that, I'd recommend reading
previous discussion on the topic. It's not as if this issue hasn't
been repeatedly discussed before.]
Jul 20 '05 #5

P: n/a
> That doesn't answer my question. Why did you use the child selector?
Not the first-child pseudo-class but the child selector.

In your case I can't see why you need
DIV > h2:first-child
instead of just
DIV h2:first-child
You are right, I don't need it here. But I guessed it wouldn't do any
harm.
Oh yes. IE is very much lagging behind in many aspects of CSS support.
This is a real pitty because 99 percent of the people I know use IE
for browsing the web. So all the CSS stuff that isn't supported by IE,
I feel like isn't ready to be used yet.
Setting font sizes in pixels is a bad idea as it makes it difficult
for IE users to resize the text. Rather widespread amongst people who create web pages that are
actually intended to be read. What if I need a larger font size in order to read your text? You can specify the font-size on % or ems. That way it will be based
on the user's chosen default size, so you can still say that your
headings will be 110% of the size of the body copy, but you leave the
exact details up to the user's browser.


I have been reading a lot about WAI on the W3C website yesterday, and
I must say that after reading all that I agree with you. I will change
the code of the new version of the website so that I specify my font
sizes in CSS in %. It makes it a lot more difficult for me to keep my
site working though because I use a lot of graphics for backgrounds.
Maybe I'm using it a bit too heavy and should change that too...

Thanks for the advise, I learned something new!

Veerle
Jul 20 '05 #6

P: n/a
On Fri, 5 Dec 2003, Veerle wrote:
This is a real pitty because 99 percent of the people I know use IE
for browsing the web.
Uh? You are personally familiar with 100 people of which only one
doesn't browse with IE? Or what does this mean? (you'd surely know
better than to base your claim on some skewed user-agent logging
report??)
So all the CSS stuff that isn't supported by IE,
I feel like isn't ready to be used yet.


One of the design aims of CSS is that feature implementation is
optional. Clients are meant to ignore the bits they don't understand,
and thus not to be harmed by them.

Unfortunately, IE rides roughshod over this principle, including the
violation of some mandatory requirements of the interworking
specifications (RFCs and W3C TRs), but with a bit of care it's
possible to work with it without having to forgo the benefits
available in better browsers. See also
http://w3development.de/css/hide_css_from_browsers/ and other relevant
resources (Google for e.g "hiding CSS from browsers").

cheers
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.