List style wont work

**fodo** · 01-23-2009, 03:45 PM

i am trying to style a simple list which uses a background image to replace the bullet.
I cant get this to work.Any suggestions very welcome.
css

Code:

ul.list {
	margin:0;
	padding:0;
	list-style:none:
	margin-left:25px;
	text-align:left;
	width:440px;
	
}
li.list{
	background-image: url(..images/arrow_green.gif);
	background-repeat: no-repeat;
	background-position: 0 .4em;
	padding-left:.6em;
	font-family:Tahoma,'Lucida Gande',Arial,sans-serif;
	font-size: 12px;
	color:#FFFFFF;
}
mark-up

	Code:
	<h2>Self and how self effects performance</h2>
<ul class="list">
<li class="list">Understanding self is the key to understanding performance</li>
<li class="list">Understanding self is the key to understanding others</li>
<li class="list">Understanding self is the key to winning over others</li>
<li class="list">Understanding self is the key to working with others</li>
<li class="list">Understanding self is the key to business success</li>
</ul>
<h2>Understanding our thinking and how it relates to emotions, mood, attitude, behaviour and performance.</h2>
<ul class="list">
<li class="list">Our emotions effect our mood - our mood affects our attitude, our attitude affects our behaviour-our behaviour effects our performance</li>
</ul>
<h2>Drawing out the hidden skills of performance by heightening:</h2>
<ul class="list">
<li class="list">Effective communication</li>
<li class="list">Customer awareness</li>
<li class="list">Effective leadership</li>
<li class="list">Team cohesion</li>
<li class="list">Keeping pace with global competitors</li>
<li class="list">Building open and positive relationships</li>
<li class="list">Understanding team boundaries</li>
<li class="list">Energising leadership</li>
<li class="list">Inspired behavior</li>
<li class="list">Energy management</li>
<li class="list">Mastering the stresses and presure from self and others that effect performance</li>
<li class="list">Maximising technical skills through behavioral performance</li>
<li class="list">Turning negative behavior into positive performance</li>
<li class="list">How perceptions play a key role in individual, team and business success</li>
<li class="list">How to motivate, inspire develop, value oneself and others</li>
</ul>


Link http://217.46.159.226/kb_dev/what_coaching.php

**Snookerman** · 01-23-2009, 04:08 PM

Try this:

Code:

li.list {
list-style-image: url(..images/arrow_green.gif);
font-family: Tahoma, 'Lucida Gande', Arial, sans-serif;
font-size: 12px;
color: #fff;
}

Good luck!

**fodo** · 01-23-2009, 04:23 PM

Thanks for that. Unfortunatley no effect. Why am I still getting bullets when the
ul is set to list-style:none; ?Any thoughts

**gretela** · 01-23-2009, 04:52 PM

Instead of list-style:none try list-style-type:none. You might also want look at your file name.

**Snookerman** · 01-23-2009, 05:01 PM

It works for me, try it out:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            li.list {
                list-style-image: url(http://www.mattpurcell.com/Layout_images/arrow.png);
                font-family: Tahoma, 'Lucida Gande', Arial, sans-serif;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <h2>Self and how self effects performance</h2>
        <ul class="list">
            <li class="list">
                Understanding self is the key to understanding performance
            </li>
            <li class="list">
                Understanding self is the key to understanding others
            </li>
            <li class="list">
                Understanding self is the key to winning over others
            </li>
            <li class="list">
                Understanding self is the key to working with others
            </li>
            <li class="list">
                Understanding self is the key to business success
            </li>
        </ul>
        <h2>Understanding our thinking and how it relates to emotions, mood, attitude, behaviour and performance.</h2>
        <ul class="list">
            <li class="list">
                Our emotions effect our mood - our mood affects our attitude, our attitude affects our behaviour-our behaviour effects our performance
            </li>
        </ul>
        <h2>Drawing out the hidden skills of performance by heightening:</h2>
        <ul class="list">
            <li class="list">
                Effective communication
            </li>
            <li class="list">
                Customer awareness
            </li>
            <li class="list">
                Effective leadership
            </li>
            <li class="list">
                Team cohesion
            </li>
            <li class="list">
                Keeping pace with global competitors
            </li>
            <li class="list">
                Building open and positive relationships
            </li>
            <li class="list">
                Understanding team boundaries
            </li>
            <li class="list">
                Energising leadership
            </li>
            <li class="list">
                Inspired behavior
            </li>
            <li class="list">
                Energy management
            </li>
            <li class="list">
                Mastering the stresses and presure from self and others that effect performance
            </li>
            <li class="list">
                Maximising technical skills through behavioral performance
            </li>
            <li class="list">
                Turning negative behavior into positive performance
            </li>
            <li class="list">
                How perceptions play a key role in individual, team and business success
            </li>
            <li class="list">
                How to motivate, inspire develop, value oneself and others
            </li>
        </ul>
    </body>
</html>

If you still have problems, please post a link to your site or attach the entire code you are using.

Good luck!

**fodo** · 01-23-2009, 05:43 PM

Thanks guys. list-style-type with the rest fixed the problem.

**fodo** · 01-23-2009, 06:14 PM

Dont know if you willpick this up, but I spoke too soon.
It works fine in FF and Safari but fails in ie 7 and 6
The bullet images work for the first part of the page but then disappear forthe second part.
Ie 6 also throws the div positioning out.
How do i appraoch debugging this?

**gretela** · 01-23-2009, 07:35 PM

Can you include a link?

**fodo** · 01-23-2009, 09:29 PM

Link is
http://217.46.159.226/kb_dev/what_coaching.php
thanks

Thread: List style wont work

Thread Tools

Search Thread

List style wont work

Bookmarks

Bookmarks

Posting Permissions