-
List style wont work
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
-
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!
-
Thanks for that. Unfortunatley no effect. Why am I still getting bullets when the
ul is set to list-style:none; ?Any thoughts
-
Instead of list-style:none try list-style-type:none. You might also want look at your file name.
-
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!
-
Thanks guys. list-style-type with the rest fixed the problem.:)
-
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?
-
-
