- This topic is empty.
-
AuthorPosts
-
December 6, 2011 at 9:14 am #35490tobeeornotMember
I am using the last-child selector to pad out a gap in my nav bar and it all works fine in most browsers, except in the latest version of IE. Are there any solutions or fallbacks for this?
ul.dropdown li:last-child{padding-right:20px}
December 6, 2011 at 12:10 pm #91995tmetteMemberI think last-child is supported in IE9, but might not be in IE8. Can you provide more HTML/CSS? I rarely use first/last-child.
December 6, 2011 at 1:10 pm #92004TheDocMemberIE7 and IE8 don’t support last-child, but they do support first-child. Just gotta switch your coding around to change the first one instead of the last one.
December 6, 2011 at 2:00 pm #92011jamygoldenMemberDecember 7, 2011 at 5:09 am #92094tobeeornotMemberThanks jamy_za!
December 7, 2011 at 6:30 am #92102tobeeornotMemberI should mention that the absolute positioning of my nav bar is keeping it to the left and hence the gap at the right. I am not sure how you could reverse this without distorting the output altogether.
December 7, 2011 at 8:15 am #92107jamygoldenMemberHave a look at this: http://code.google.com/p/ie7-js/
December 7, 2011 at 8:42 am #92111tobeeornotMemberWow – that is pretty nifty. Thanks very much.
December 7, 2011 at 10:49 am #92120tobeeornotMemberSorry, I thought this was solved but it’s not. The last-child selector is not working with IE9 and the ie script library.
December 7, 2011 at 11:16 am #92123jamygoldenMemberIE9 supports :last-child. Make a jsfiddle of the problem.
December 7, 2011 at 11:29 am #92124tobeeornotMemberDecember 7, 2011 at 11:40 am #92125jamygoldenMemberAre you sure it’s just IE with that problem? It look like you’re trying to cover up the gap at the end by adding padding to the last-child list item. So if that’s what you’re trying to do, it wasn’t working in my FireFox 8 either because you weren’t giving enough padding: http://jsfiddle.net/7rSMc/3/
Here is another way of doing it (I’d say this is a better way): http://jsfiddle.net/7rSMc/2/
December 7, 2011 at 12:22 pm #92128tobeeornotMemberMany thanks – what did you change? I can’t spot it.
December 7, 2011 at 12:25 pm #92129jamygoldenMemberhttp://jsfiddle.net/7rSMc/3/ – changed this piece of css:
ul.dropdown li:last-child {
padding-right: 42px;
}http://jsfiddle.net/7rSMc/2/ – I added a couple of properties to this selector, namely the background, left and width properties:
ul.dropdown {
background: #647484;
font: 1.6em Verdana, Geneva, sans-serif;
position: absolute;
top: 103px;
left: 12px;
list-style: none;/*no bullets*/
width: 800px;
}December 7, 2011 at 12:29 pm #92131tobeeornotMemberI see – it was the border-right to 42px. I changed that but on my IE9 it knocks it down to the next line.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.