First-child not working in ie7

HTML & CSS
1

Hi,

i am trying to get first-child to work in ie7 but i am not sure why it wont recognise it or overwrite the css. it works fine in every other browser apart from ie7:

<div id="container">
<h4></h4>
<p></p>
<h4></h4>
<p></p>
</div>

what i am trying to do is remove the border-top on my first h4. i have tried many different variations:

#news-container h4:first-child {
    border-top: none;
}

i have also added first-child to my parent div but that still wont solve it. could some one please advise me where i am going wrong.

thanks in advance

2

IE7 can be a bit buggy with first-child, though it should work here. But try it like this if you want it to apply to the H4 inside the #container:

#container h4:first-child {
    border-top: none;
}
3

thats what i do have currently. i just changed the div id by accident and didnt change my css as well. so for some unknown reason it doesnt respect it at all

4

It’s working fine and here’s the proof :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
h4 {
    background:red;
    border:1px solid green;
    height:50px
}
#container h4:first-child {
    border-top: 20px solid green;
}
</style>
</head>
<body>
<div id="container">
    <h4>test</h4>
    <p>test</p>
    <h4>test</h4>
    <p></p>
</div>
</body>
</html>

I assume you are using a full doctype (with uri) and that there are no comments or anything else above the doctype. Otherwise you will be in quirks mode and IE will behave much like ie5.

5

yer its all validated and i have a local copy of the site on my machine and it works but i cant work out why it doens’t work. i can only presume it is because it is rather buggy.

6

Do you have a working demo of the bug that you can attach to this thread as that is the only way that we can be sure? Or if you have it online you can posts a link (or PM it to me if it needs to be private).

It works in my example as you can see so you should try and keep to that sort of construct.

7

unfortunatly i am unable to pass on an address as it is for work. so im sorry i am unable to do that. i do see your point it should work but i havent got a clue why it doesnt want to work online.

my next best solution was to add a class to the h4 and take the border off there.

after looking at it again in ie. when i do that first-child ie7 changes my border: none to border-top-style.

8

It’s the border-style that dictates whether there is a border or not and when you say border-top:none you are effectively saying border-top-style:none.

In case you have specificity issues you could try this:


#container h4:first-child {
    border-top:0 none!important;
}

Sometimes IE likes the zero in there also.