first-child border

[geoffb]

Hi all

Used to use a:
li:first-child a
to remove first list borders on horizontal menu, but does not work in IE7

Any ideas on how to get rid of that left border?

Cheers
Geoff

[swa66]

Please post some minimal sample code

In my experience it's IE6 where it doesn't work (IE6 does not support :first-child out of the box), IE7 does support it AFAIK.

IE6's problem can be worked around by adding IE7.js to teach it (a.o.) a lot more selectors.

[geoffb]

Hi swa66

Sample HTML menu:

<div id="menu">
<ul>
<li><a href="index-try.html">Home</a></li><!--replace with correct URL once finished-->
<li><a href="appointments.html">Appointments</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="prices.html">Prices</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

================ sample css for menu=================

#menu {
float:left;
width:100%;
height:50px;
margin:0;
padding:0;
background:url(images/nav-bgnd.png) no-repeat;
}

#menu ul {
margin: 0px;
padding: 0px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}

#menu li {
list-style-type:none;
display:inline;
}

#menu li a {
color:#FFF;
margin-top:2px;
padding:9px 42px 9px 42px;
float:left;
width:auto;
border-left:1px solid #d21f7b; /*change color*/
}

#menu li a:hover {
text-decoration:none;
background:none;
}

#menu li:first-child a {
border-left:0;
}

Any help welcome, cheers

geoffb

[simonuk]

I remember reading that IE7 can often treat other constructs, such as comments, as elements. Try and remove the comments and see if that does it?

[simonuk]

Sorry just did a quick search and found what I was thinking of...

In Internet Explorer 7 some SGML constructs, such as comments, are counted as elements.

Internet Explorer 7, Firefox versions up to and including 2, Safari versions up to and including 3, and Opera 9.2 continue to select an element as the first child even when another element is dynamically inserted before it.

Internet Explorer 7 and Firefox select the first SGML construct on the page (usually the doctype), even though it’s not a child of another element.

[geoffb]

Hi simonuk,

Removed the comments around menu and Firefox seems to get rid of the border now but is still present in IE7.

Geoffb

[simonuk]

I think you're stuck with it. First-child has really buggy support and it isn't worth the hassle when you can use PHP or other scripts to specify a class for the first or last automatically.