Question

I have an unordered list inside a div with a background image for each list item. However, the list is not appearing correctly in Internet Explorer 8.

Rendered Output http://img694.imageshack.us/img694/7204/screenshotjv.jpg

The problem is there is too much space to the left and top of the list. As well as between each list item. I want the list to be completely flush with the image section above it so there’s no white space on the left, top, or between each item.

HTML:

<div id="top">
    <div id="topimage">
        <center>
            <img src="image.jpg" alt="image"/>
        </center>
    </div>
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS:

#top { 
    width: 255px; 
    float:left; 
    margin:3px; 
}

#topimage {
    width: 245px;
    border:1px solid #bcc5c8;
    padding:3px;
}

.list li {
    background-image:url(../images/list_sub.jpg);
    width: 245px;
    height:23px;
    list-style:inside;
    list-style-image:url(../images/listarrow.gif);
    margin:0px;
    padding:0px;
}

I’ve tried setting the margin and padding to zero, but that didn’t work. I’ve also checked to make sure the images don’t have extra space around them. Any suggestions?

Answer 1

Here are some things you can adjust:

1. Wrap your list item contents in spans and apply the list item arrow to the spans instead, give the span a padding-left value slightly larger than the arrow gif’s width.

2. Don’t use the list-style-image property, just specify a list-style: none; to get left alignment x-browser. Generally you should just use the background image property for list items instead of the list-style-image, but since you have a background image for li’s too, you need the extra span.

3. Don’t apply padding to the same elements you apply widths and heights. They will not render cross-browser. Instead specify width/height on a parent element and padding on an inner wrapper element.

4. generally you should avoid id rules, they are heavily specific and result in non-reusable style definitions. They make overriding the style definition difficult.

5. To make the list items touch each other, make sure the line-height specified on them is equal to or less than the height of the elements. I think the list-item-style will fix it, but double check this setting too.

If that doesn’t fix your problem, post a link to the background images and I’ll mock up a small example.