logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-21-2011, 04:40 PM   #1
tahsin1982
 
Join Date: May 2011
Location: Canada
Posts: 50
Default li:first-child and li:last-child browser issue

Code:
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?
tahsin1982 is offline   Reply With Quote
Old 11-21-2011, 05:13 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-21-2011, 05:16 PM   #3
tahsin1982
 
Join Date: May 2011
Location: Canada
Posts: 50
Default

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!!
tahsin1982 is offline   Reply With Quote
Old 11-21-2011, 08:19 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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 or did you do something else in the meantime?

__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-21-2011, 08:49 PM   #5
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

I thought :first-child and all it's pseudo selector cousins got IE support with version 9.
domedia is offline   Reply With Quote
Old 11-21-2011, 09:06 PM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by domedia View Post
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/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-21-2011, 09:44 PM   #7
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

duh.. not reading the full thread sorry
domedia is offline   Reply With Quote
Old 11-21-2011, 11:37 PM   #8
tahsin1982
 
Join Date: May 2011
Location: Canada
Posts: 50
Default

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.


Uploaded with 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

Last edited by tahsin1982; 11-21-2011 at 11:38 PM.. Reason: Image
tahsin1982 is offline   Reply With Quote
Old 11-22-2011, 05:35 PM   #9
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by tahsin1982 View Post
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.

Quote:
Originally Posted by tahsin1982 View Post
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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:33 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com