www.webdeveloper.com
Results 1 to 7 of 7

Thread: :last-child in IE 8

  1. #1
    Join Date
    Dec 2008
    Posts
    9

    :last-child in IE 8

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

  2. #2
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    The easiest, and perhaps best, thing to do is to add this meta tag at the beginning of the HEAD.

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    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.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  3. #3
    Join Date
    May 2005
    Posts
    2,040
    Also, are there any known plans from MS to support this pseudo selector and some of the others from CSS3 in the future?
    Microsoft does not have that attribute, and much of css3, in its plans for IE8.

  4. #4
    Join Date
    Dec 2008
    Posts
    9
    Quote Originally Posted by Jeff Mott View Post
    The easiest, and perhaps best, thing to do is to add this meta tag at the beginning of the HEAD.

    <meta http-equiv="X-UA-Compatible" content="IE=7">

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

  5. #5
    Join Date
    Dec 2008
    Posts
    9
    Quote Originally Posted by drhowarddrfine View Post
    Microsoft does not have that attribute, and much of css3, in its plans for IE8.
    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.

  6. #6
    Join Date
    Jul 2003
    Location
    The City of Roses
    Posts
    2,503
    I hope I won't have to use it [the META tag] for long though.
    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.
    for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"'))
    {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

  7. #7
    Join Date
    Feb 2012
    Posts
    1
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles