473,327 Members | 1,952 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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

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
6 16586
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
> 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
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
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
> 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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

24
by: Hung Jung Lu | last post by:
Hi, Does anybody know where this term comes from? "First-class object" means "something passable as an argument in a function call", but I fail to see the connection with "object class" or...
12
by: Alan J. Flavell | last post by:
OK, today's email brought a comment from a reader, pointing out something that I'd long since noticed myself but hadn't done anything about it. On my pages, I've got a first-letter style on...
4
by: KJ | last post by:
We use a third party software package for acctg that limits us on field size - as a result, we at times have to enter an item into the app multiple times in order to get all the information. I...
5
by: tdmailbox | last post by:
I have a form with a child form. In the child form there is a list of names that can grow quite large. On the parent form I want to display the first name from the child form. I set up a test...
2
by: captain_2010 | last post by:
hi, >From below table want only the first value of each item id. and how to get it, tried to use top n function in select statement it takes only the first record. itemid qty 1 10 1...
27
by: hokiegal99 | last post by:
Hi Guys, This is my first C program. I started programming in Python. Please look over this source and let me know if I'm doing anything wrong. I want to start out right with C, so if you see...
8
by: Robert Gravereaux | last post by:
I've noticed that the first exception thrown/caught by an app running in debug is very slow - it takes perhaps 7 or 8 seconds on my P4 machine. I've noticed this on several different machines...
43
by: Roger L. Cauvin | last post by:
Say I have some string that begins with an arbitrary sequence of characters and then alternates repeating the letters 'a' and 'b' any number of times, e.g. "xyz123aaabbaabbbbababbbbaaabb" I'm...
6
by: =?Utf-8?B?UGF1bA==?= | last post by:
HI I have a stored procedure that returns data with a date field in the form of a DateTime type. I need to place data in variables based on days of the week starting with the first thursday of the...
4
by: Milan Krejci | last post by:
int first=15,latest=15; QString typ=NULL; std::map<int,std::string>::iterator i; for(i = SeznamPracovniDoby.begin(); i != SeznamPracovniDoby.end(); i++) { if (typ==NULL) typ=i->second.c_str(); if...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.