Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS last-child selector – issue in IE

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #35490
    tobeeornot
    Member

    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}
    #91995
    tmette
    Member

    I 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.

    #92004
    TheDoc
    Member

    IE7 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.

    #92011
    jamygolden
    Member

    Here’s an article relating to what @TheDoc has just mentioned.

    #92094
    tobeeornot
    Member

    Thanks jamy_za!

    #92102
    tobeeornot
    Member

    I 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.

    #92107
    jamygolden
    Member

    Have a look at this: http://code.google.com/p/ie7-js/

    #92111
    tobeeornot
    Member

    Wow – that is pretty nifty. Thanks very much.

    #92120
    tobeeornot
    Member

    Sorry, I thought this was solved but it’s not. The last-child selector is not working with IE9 and the ie script library.

    #92123
    jamygolden
    Member

    IE9 supports :last-child. Make a jsfiddle of the problem.

    #92124
    tobeeornot
    Member
    #92125
    jamygolden
    Member

    Are 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/

    #92128
    tobeeornot
    Member

    Many thanks – what did you change? I can’t spot it.

    #92129
    jamygolden
    Member

    http://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;
    }
    #92131
    tobeeornot
    Member

    I see – it was the border-right to 42px. I changed that but on my IE9 it knocks it down to the next line.

Viewing 15 posts - 1 through 15 (of 24 total)
  • The forum ‘CSS’ is closed to new topics and replies.