Bullets not rendering

Haris · 09-12-2007, 04:08 PM

Bullets are not rendering in IE6. I'm really pissed now and need help.

Code:

#sidebar .sidebar-list {
    position: relative;
    left: 33px;
    margin-top: 10px;
    list-style-image: url('images/bullet.gif');
}

#sidebar .sidebar-list li{
    margin-top: 15px;
}

#sidebar .sidebar-list a {
    font-size: 11px;
    font-family: Lucida Grande, Arial;
    color: #ffffff;
}
#sidebar .sidebar-list li p.date{
    font-weight: bold;
    font-size: 9px;
    color: #676767;
}

HTML Code:

               <div class="sidebar-item">
                    <h2>ARCHIVED NEWS</h2>
                    <ul class="sidebar-list">
                        	<li><a href='http://mharis.net/portfolio/sammy/lost4/wp/?m=200709' title='September 2007'>September 2007</a></li>
                    </ul>
                 <br /> <!-- Clears float -->

                </div>
            </div>

Salathe · 09-12-2007, 04:26 PM

Rather than using the list-style-image property, you can set some (left) padding on the li elements and apply the bullet image as a background. With this technique you could have right-aligned bullets, if you wished. :)

Code:

#sidebar .sidebar-list {
    position: relative;
    left: 33px;
    margin-top: 10px;
    list-style: none;
}

#sidebar .sidebar-list li{
    margin-top: 15px;
    padding-left: 20px;
    background: transparent url(images/bullet.gif) no-repeat 0 0;
}

Haris · 09-12-2007, 06:48 PM

Thanks Salathe.

Wildhoney · 09-13-2007, 01:41 AM

Those bullet points set as the background are definitely the way to go. I've noticed when using custom bullet points that Internet Explorer has a tendency to place them higher up than Mozilla Firefox do, and I'm not a fan of IE hacks. This even occurs after resetting the global margins and paddings to zero.

Shaun · 09-14-2007, 02:54 PM

I try and keep away from the using the list-icon property apart from telling it not to use it. Using a background is way my flexible, in the way of position the list icon.

Code:

#sidebar .sidebar-list a {
    font-size: 11px;
    font-family: Lucida Grande, Arial;
    color: #ffffff;
}

Just another note, any property that is defined and has a space in it should have double quotes around it like

Code:

#sidebar .sidebar-list a {
    font-size: 11px;
    font-family: "Lucida Grande", Arial;
    color: #ffffff;
}

If i recall correctly, it wont validate as valid CSS without the quotes around it

Wildhoney · 09-27-2007, 04:05 PM

Quite true. Every single property in CSS that contains a space must be encapsulated with quotes. Usually you'll just find that with font names.