PDA

View Full Version : li:first-child and li:last-child browser issue


tahsin1982
11-21-2011, 04:40 PM
ol.comments li {

width:100%;
display:block;
float:left;
padding-bottom:15px;
padding-top:15px;
border-bottom:1px solid #262626;
border-top:1px solid #d0d0d0;

}

ol.comments li:first-child {

border-top:none;

}

ol.comments li:last-child {

border-bottom:none;

}

Works perfectly on chrome, firefox and safari but in IE seems like it dosent. Anyone else came across this?

gentleone
11-21-2011, 05:13 PM
The :first-child pseudo class is supported in IE7+ and the :last-child pseudo class in IE9+.

Why the :first-child pseudo class doesn't work for you in IE7+ I don't know... it could be some kind of specifity issue you have with another rule. I need to see all your CSS for that.

If you want the :last-child pseudo class, or all the other cool & handy CSS3 pseudo classes and attribute selectors, to work in IE you'll need the javascript polyfill, selectivizr. It works with pretty much any popular javascript framework out there. A must have in your tookit.
http://selectivizr.com/

tahsin1982
11-21-2011, 05:16 PM
I was using it for this wordpress blog theme.
http://tahsinwonders.net/blog/?p=23

and notice it did not right in IE8. Ill look into this javascript seems very interesting. Thanks!!

gentleone
11-21-2011, 08:19 PM
I had a look in IE8 and the first comment doesn't have a top-border and to my surprise the second and thus last one doesn't seem to have a bottom-border as well. This is strange, because like I said :last-child should not supposed to be working in IE8 :confused: or did you do something else in the meantime?

http://www.gentlemedia.nl/img/tahsinblog-IE8.png

domedia
11-21-2011, 08:49 PM
I thought :first-child and all it's pseudo selector cousins got IE support with version 9.

gentleone
11-21-2011, 09:06 PM
I thought :first-child and all it's pseudo selector cousins got IE support with version 9.
Yes, IE9 supports all the pseudo classes and attribute selectors. But if you want to use them and want to support IE 6-8, then you'll need selectivizr.

Here's a support table... it's bit out of date, but to see what IE supports and not support is still relevant in this table.
http://kimblim.dk/css-tests/selectors/

Other then that:
http://caniuse.com/

domedia
11-21-2011, 09:44 PM
duh.. not reading the full thread :-( sorry

tahsin1982
11-21-2011, 11:37 PM
Gentle sorry I was about to post a thank you message to you for recommending me http://selectivizr.com/ as it totally solved my problem with the first child on all IE as I checked with IE tester. The forum was down for some reason when I wanted to post here.

Anyway there is still a small thing bugging me in IE7 and its the form part here is what I mean.
http://imageshack.us/photo/my-images/593/ie7sucks.jpg/http://img593.imageshack.us/img593/3011/ie7sucks.jpg (http://imageshack.us/photo/my-images/593/ie7sucks.jpg/)

Uploaded with ImageShack.us (http://imageshack.us)

I had this problem in IE9 but managed to fix it but IE7 I am out of ideas. Ie6 is extinct to me to I wont bother

gentleone
11-22-2011, 05:35 PM
Gentle sorry I was about to post a thank you message to you for recommending me http://selectivizr.com/ as it totally solved my problem with the first child on all IE as I checked with IE tester. The forum was down for some reason when I wanted to post here.
Great that it solved the issue, but it's still weird that :first-child didn't work without selectivizr in IE 7 & IE 8. Should be without.

Anyway there is still a small thing bugging me in IE7 and its the form part here is what I mean.
I had this problem in IE9 but managed to fix it but IE7 I am out of ideas. Ie6 is extinct to me to I wont bother
I've looked at your stylesheet and I don't see any css assigned to the label element. Try a few things like make a new rule in your css and set the label to display: block, give it a width, height, line-height, padding whatever... play around a bit. If nothing helps without efffecting the other browsers, then make an unconditinal comment linking to an IE7 specific stylesheet with the adjustments you'll have to make. Then a negative top-margin on the label element to align it center with the input fields should be enough to fix it.