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: Where as it should render like this: 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
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
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.
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)
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):
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)
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.
I agree, instead of using list-style, go with what yankzilla posted. I always use background images on li.
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