CODEWITHSUNDEEP
htmlcss
Barrie Reader
Barrie Reader

Reputation: 10713

last-child CSS issues

Hey you guys (and girls),

I have implemented the following CSS:

#tab-navigation ul li:last-child {
    background-image: url(../images/tabs-end.gif);
    background-repeat: no-repeat;
    color: #fff;
    display: block;
    border: 1px solid red;
    background-position: right;
}

However, for some reason this is not working at all in IE (surprise!) - I read (after some research) that IE requires a DOCTYPE, but I already have <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> defined.

Any ideas peeps?

Upvotes: 0

Views: 896

Answers (5)

Dogbert
Dogbert

Reputation: 222108

IE doesn't support last-child selector.

You can use scripts such as http://code.google.com/p/ie7-js/ to enable CSS3 selectors in all IE browsers.

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382666

The :last-child is a CSS3 selector and as far as I know, even IE8 doesn't support that much.

Resources:

http://www.electrictoolbox.com/css-first-child-last-child-selectors/

Compatibility Chart:

http://www.quirksmode.org/css/contents.html

Upvotes: 0

Mex
Mex

Reputation: 508

IE does not support the :lastchild selector correctly.

For a comprihensive list of compatibility see http://www.quirksmode.org/css/contents.html

I would suggest adding a class="last" server-side to the field, or apply the effect with javascript using http://api.jquery.com/last-child-selector/.

Upvotes: 1

RoToRa
RoToRa

Reputation: 38390

Simple: IE doesn't support last-child. You'll need to mark the last element with a class.

Upvotes: 0

Kyle
Kyle

Reputation: 67194

This table states that last-child isn't supported in any IE browser. Add a class to it and select it that way.

Upvotes: 0

Related Questions