Bullets are offset in lists but only in Avant and IE not Safari or Ff

Discussion in 'CSS' started by pyrotech08, Jul 3, 2008.

  1. #1
    I am attempting to get IE and Avant browsers to render my lists the same way that safari and Firefox do. for some reason the bullets are not inline with the text but rather offlet vertically. As you can see in the folowing pic:

    [​IMG]

    Where as it should render like this:

    [​IMG]

    Here is my html:

    <html>
    <head>
    <title>lists</title>
    <link rel="stylesheet" type="text/css" href="lists.css" />
    </head>

    <body>

    <div id="container">
    <ul>
    <li>Drinks Menu</li>
    <li>Beer</li>
    <li>Spirits</li>
    <li>Cola</li>
    <li>Lemonade</li>
    <li>Tea</li>
    <li>Coffee</li>
    </ul>
    </div>



    And here is my CSS:



    /* Specify blanket rules for all elements
    -------------------------------------------------*/
    body {
    margin: 10px;
    background-color:#CCC;

    }


    /* Styles for all default lists
    ---------------------------------------------*/
    ul {
    list-style:url(http://www.andrews.edu/~greenlec/Thumbnails/list.gif);
    width:200px;
    padding:1 0 0 15px;
    margin:10px;
    line-height:300%;
    }

    /*container for list
    --------------------------------------------------*/
    #container
    {
    background-color:#FFF;
    border:1px solid #000;
    width:200px;
    }


    Any help would be greatly appreciated
     
    pyrotech08, Jul 3, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Why the insane line-height? At a guess, i.e. not tested, Firefox, et al are aligning the bullet at mid line, while IE is aligning it at the top of the inline-box. If what you want is separation between list items, give them 1em top and bottom margin.

    cheers,

    gary
     
    kk5st, Jul 3, 2008 IP
  3. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3
    One thing that I've spotted is that you should be using a bottom margin rather than line height to increase the separation between your list items. Also, I don't think the list would require a width value since it will be constrained by the container anyway.

    As far as your problem is concerned, you're usually better off adding the list image to the li element rather than ul/ol. If memory serves, you then just set up padding and it should work in most browsers without a hitch. If nothing seems to work, just set the list item's bullet as a non-repeating background image and pad the left. It's a work-around, but it works.
     
    steelfrog, Jul 4, 2008 IP
  4. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #4
    I remember dicking around about 6 months ago using the list-style-image.

    I found using a background image on the <li> simpler and more cross-browser compatible (though I was fairly n00by back then, maybe I was doing it wrong)
     
    rochow, Jul 4, 2008 IP
  5. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Try something like this:
    ul {
    list-style: none;
    margin: 10px;
    padding: 0px;
    }
    
    li {
    background-image: url(list.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding:1 0 0 15px;
    }
    Code (markup):
     
    yankzilla, Jul 4, 2008 IP
  6. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #6
    If you know shorthand (it's easy enough)

    As you can see, you obviously put the image location in, no-repeat means show it just once, left means align it to the left, center means align it vertically center, padding means move the text in 15px (change this depending on how wide your bullet is)
     
    rochow, Jul 4, 2008 IP
  7. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I was putting in long form just so he could see what each portion was.
     
    yankzilla, Jul 4, 2008 IP
  8. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #8
    I figured - thats why I explained the shorthand version (as odds are, doesn't know it, its not self-explanatory like longhand)

    Might as well get into good habits from the start.
     
    rochow, Jul 4, 2008 IP
  9. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I agree, instead of using list-style, go with what yankzilla posted. I always use background images on li.
     
    glorie, Jul 6, 2008 IP
  10. pyrotech08

    pyrotech08 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks guys for the ideas. I'll mess around today and see what i can get to work

    p.s. I do know shorthand, but thanks anyway
     
    pyrotech08, Jul 6, 2008 IP