Results 1 to 9 of 9

Thread: List style wont work

  1. #1
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!

  3. #3
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Jan 2009
    Location
    Wisconsin
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Instead of list-style:none try list-style-type:none. You might also want look at your file name.
    Last edited by gretela; 01-23-2009 at 05:15 PM.

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!

  6. #6
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

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

  7. #7
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Jan 2009
    Location
    Wisconsin
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Can you include a link?

  9. #9
    Join Date
    Feb 2008
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •