TalkPHP - Bullets not rendering

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Bullets not rendering (http://www.talkphp.com/xhtml-html-css/1094-bullets-not-rendering.html)

Haris

09-12-2007 03:08 PM

Bullets not rendering

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 03: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 05:48 PM

Thanks Salathe.

Wildhoney

09-13-2007 12: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 01: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 03: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.

All times are GMT. The time now is 09:24 PM.