SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: <OL> in IE9

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question <OL> in IE9

    Hey there,

    I'm having an issue in IE9.

    On this page (and another like it)
    http://www.topmotorcyclelawyer.com/DEV/cases/

    The top 3 items in Large Cases should be numbered. Everything is fine in IE 8 and 7, FF and Chrome. But for some reason they do not show up in IE9. Not sure if it's something in the OL styles or if it's something to do with the image to the left of it.

    Any ideas?

    Thanks,
    Daniel

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are 13 W3c validator errors in your HTML5.

    I assume you are aware html5 is still in development and won't be released as "official" by the W3C for a few years yet. Consequently browser support for html5 currently varies greatly. But I don't think html5 is the main source of your problems here.

    If you look through the html structural errors in your code you will see that it would fail even html4 validation. Fix the html errors and your problems should hopefully disappear.

    When used correctly, <ol> works fine in IE9.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Thanks for your help. I made some modifications and the page is now valid (in html4 as well). However the issue I'm having in IE9 is still there. Any other suggestions?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hm, the problem is that the numbers are being hidden behind the floated image. One solution I can think of is to give a special class to that first OL (e.g. <ol class="first">) and then change the left margin on it:

    Code:
    ol.first {margin-left: 270px;}

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph,

    That worked!

    Daniel

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Great! Thanks for the feedback.


Bookmarks

Posting Permissions

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