UL Alignment Issue in IE7

Question

I'm having trouble figure out what the problem is with my unordered lists in IE7. Some of bullets are misaligned, and others don't show up at all.

http://dl.bearce.me/bullet-problem.jpg

Group 1 and 3's CSS

ul {
    color: #C20000;
    list-style: square url("../images/li-square.jpg");
    margin: 0 0 25px 15px;
}

    ul li {
        color: #333;
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        line-height: 24px;
    }

/* (specific to Group 3 */

    ul.half {
        float: left;
        width: 295px;
    }
    ul.third {
        float: left;
        width: 191px;
    }

Group 1's HTML

<div class="col">
    <h1>Exterior Services</h1>
    <ul>
        <li><a href="services-exterior-snow-removal.htm">Snow &amp; Ice Removal</a></li>
        <li><a href="services-exterior-landscaping.htm">Landscaping &amp; Maintenance</a></li>
        <li><a href="services-exterior-parking-lots.htm">Parking Lot Maintenance</a></li>
        <li><a href="services-exterior-window-washing.htm">Windows &amp; Power Washing</a></li>
        <li><a href="services-exterior-general-repair.htm">General Repair Maintenance</a></li>
    </ul>
</div><!--/.col-->
<div class="col">
    <h1>Interior Services</h1>
    <ul>
        <li><a href="services-interior-janitorial.htm">Janitorial</a></li>
        <li><a href="services-interior-electrical.htm">Electrical &amp; Lighting</a></li>
        <li><a href="services-interior-plumbing-hvac.htm">Plumbing &amp; HVAC</a></li>
        <li><a href="services-interior-maintenance.htm">Preventative Maintenance Programs</a></li>
        <li><a href="services-emergency.htm">Emergency Services</a></li>
    </ul>
</div><!--/.col-->

Group 3's HTML

<ul class="half" style="width:345px;">                  
    <li>Back-up generators and power supply</li>
    <li>Carbon monoxide detectors</li>
    <li>Circuit-breaker conversions</li>
    <li>Electrical upgrades</li>
    <li>Fuse and breaker change-outs</li>
    <li>Indoor and outdoor lighting (including security)</li>                   
</ul>               
<ul class="third">
    <li>Low-voltage wiring</li>
    <li>Safety inspections</li>
    <li>Smoke detectors</li>
    <li>Surge protection</li>
    <li>Switches, sockets and outlets</li>
    <li>Troubleshooting</li>                
</ul>

Group 2's CSS

#sidebar ul {
    list-style: disc url("../images/li-disc.jpg");
    list-style-position: inside;
    margin: 0;
}

    #sidebar ul li {
        border-bottom: 1px solid #dadada;
        color: #000;
        font-weight: bold;
        padding: 5px 0;
    }

    #sidebar ul li:first-child {
        border-top: 1px solid #dadada;
    }

Group 2's HTML

<div id="sidebar">

    <h3>exterior Services</h3>              
    <ul>
        <li><a href="services-exterior-snow-removal.htm">Snow &amp; Ice Removal</a></li>
        <li><a href="services-exterior-landscaping.htm">Landscaping &amp; Maintenance</a></li>
        <li><a href="services-exterior-parking-lots.htm">Parking Lot Maintenance</a></li>
        <li><a href="services-exterior-window-washing.htm">Windows &amp; Power Washing</a></li>
        <li><a href="services-exterior-general-repair.htm">General Repair Maintenance</a></li>
    </ul>
    <h3>interior Services</h3>
    <ul>
        <li><a href="services-interior-janitorial.htm">Janitorial</a></li>
        <li><a href="services-interior-electrical.htm">Electrical &amp; Lighting</a></li>
        <li><a href="services-interior-plumbing-hvac.htm">Plumbing &amp; HVAC</a></li>
        <!-- <li><a href="services-interior-maiintenance.htm">Interior Maintenance</a></li> -->
    </ul>
    <h3>24/7/365</h3>
    <ul>
        <li><a href="services-preventative-maintenance.htm">Preventative Maintenance Programs</a></li>
        <li><a href="services-emergency.htm">Emergency Services</a></li>
    </ul>

</div><!--/#sidebar-->

Answer 1

Don't use list-style image. Use a CSS background. You can't easily control the position of list-style-image.

Also, don't style the LI tag, Style the A -tag and use display:block ;

See my tutorial:

preview.moveable.com/JM/ilovelists