/    Sign up×
Community /Pin to ProfileBookmark

:last-child in IE 8

Copy linkTweet thisAlerts:
Dec 30.2008

I’m trying to fix some IE8 compatibility issues on my site, and this one has caused me some trouble.

Here’s what I have:

[CODE]
<style>
.item {
float: left;
width: xyz;
margin-right: 15px;
}
.item:last-child {
/* To allow far right box to sit snug against right side of .row */
margin-right: 0px;
}
</style>

<div class=”row”>
<div class=”item”>item1</div>
<div class=”item”>item2</div>
<div class=”item”>item3</div>
</div>
[/CODE]

Obviously IE 6/7 ignore the last-child, but at least I can use CSS expressions to compensate (yes I know they’re bad news). IE 8 has these expressions turned off in standards rendering mode.

Has anyone found a solution that…
-Doesn’t require any JS (again, I know expressions are JS)
-Doesn’t require the server side code to append an additional class to an item at the end of the row.
…?

Also, are there any known plans from MS to support this pseudo selector and some of the others from CSS3 in the future?

Thanks

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jeff_MottDec 30.2008 — The easiest, and perhaps best, thing to do is to add this meta tag at the beginning of the HEAD.

[font=courier]<meta http-equiv="X-UA-Compatible" content="IE=7">[/font]

This will tell IE8 to behave as if it were IE7. And since your site already works in IE7, you should be good to go right away.
Copy linkTweet thisAlerts:
@drhowarddrfineDec 30.2008 — 
Also, are there any known plans from MS to support this pseudo selector and some of the others from CSS3 in the future?[/QUOTE]Microsoft does not have that attribute, and much of css3, in [url=http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx]its plans for IE8[/url].
Copy linkTweet thisAlerts:
@jarcoalauthorDec 30.2008 — The easiest, and perhaps best, thing to do is to add this meta tag at the beginning of the HEAD.

[font=courier]<meta http-equiv="X-UA-Compatible" content="IE=7">[/font]

This will tell IE8 to behave as if it were IE7. And since your site already works in IE7, you should be good to go right away.[/QUOTE]

Yes this is the solution that seems most practical for the time being. I hope I won't have to use it for long though.
Copy linkTweet thisAlerts:
@jarcoalauthorDec 30.2008 — Microsoft does not have that attribute, and much of css3, in [url=http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx]its plans for IE8[/url].[/QUOTE]

Looks like :last-child is firmly in the red. Shame, it's a useful pseudo class.

Perhaps I will switch to "margin-left" and use :first-child to remove the margin for the initial item in the row. This seems to be well supported.
Copy linkTweet thisAlerts:
@Jeff_MottDec 30.2008 — I hope I won't have to use it [the META tag] for long though.[/quote]Personally, I intend to use it until IE6 and IE7 are long gone and no longer need to be supported. Because until that happens, IE8 -- no matter how much of an improvement it may be -- won't save us any time or work. Even if IE8 fixes the hasLayout nonsense, we'll still have to test for and fix the same weird bugs because our pages must still work in IE6 & 7. Even if IE8 adds some useful CSS selectors, we still won't be able to rely on them, and we'll still have to figure out workarounds. IE8 won't be of any practical benefit to developers for many years yet.
Copy linkTweet thisAlerts:
@konajunctionFeb 27.2012 — I have found a good way to work around last-child if you know how many elements you are working with. first-child works cross browser so just use :first-child + element (add as many as you need to target the specific element.

This has saved me countless times.
×

Success!

Help @jarcoal spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...