IE6+7 handle lists differently, how to make the left margin work?

Discussion in 'CSS' started by sarahk, Mar 16, 2010.

0
  1. #1
    I'm applying an existing website template to WordPress and the recent posts list is all wrong in IE6 and IE7.

    If you take a look at http://blog.bestwinebuys.co.nz you'll see that the recent posts are shown as a list with no bullets or numbers.

    All other browsers show the list correctly but IE6+7 indent the first line leaving the second line of a long recent post title hanging out on the left.

    Any ideas how to fix this?

    thanks
     
    sarahk, Mar 16, 2010 IP
  2. sylverCode

    sylverCode Member

    Messages:
    74
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    sylverCode, Mar 17, 2010 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,814
    Likes Received:
    4,535
    Best Answers:
    123
    Trophy Points:
    665
    #3
    I do that on my projects where I start from scratch but this is just applying an existing design to WordPress so I can't do that :)
     
    sarahk, Mar 17, 2010 IP
  4. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just define the padding, margins and line-height values of 'ul', 'ol' and 'li' so the browser doesn't use it's own default and they should match just fine.
     
    steelfrog, Mar 17, 2010 IP
  5. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Also, make sure you define list-position:eek:utside; This can often cause some issues across browsers. This can be defined on the ul elements.
     
    pmek, Mar 19, 2010 IP
    sarahk likes this.
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,814
    Likes Received:
    4,535
    Best Answers:
    123
    Trophy Points:
    665
    #6
    that's the one! thank you :)
     
    sarahk, Mar 19, 2010 IP