SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Links in lists

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,898
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Links in lists

    I have a list like so on my site

    Code HTML4Strict:
    <ul>
    <li>List item 1</li>
    <li>list item 2</li>
    </ul>

    If I ahve it like that then it's fine, the text gets indented and my single none repeated background image gets shown as a new bullet style. If I start putting the text within the <li>'s as links then the bullet style background image disappears.

    Any ideas?

    My css is below:

    Code CSS:
    #content .infobox
    {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    border: solid 1px #012349;
    background-color: #99CCFF;
    padding: 5px;
    text-align: center;
    }
     
    #content .heading
    {
    display: inline;
    }
     
    /* Links */
    #content a:link,
    #content a:visited,
    #content a:active
    {
    color: #000000;
    text-decoration: none;
    }
     
    #content a:hover
    {
    text-decoration: underline;
    }
     
    /* Headings */
    #content h1
    {
    font-size: 15pt;
    }
     
    #content h2
    {
    font-size: larger;
    }
     
    #content .centerimages
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
     
    #content .ride_heading
    {
    background:	#ffffff url('../img/small_graphics/title_curve.jpg') center center no-repeat;
    background-position: 0px -0px;
    }
     
    /* Table Styles */
    #content table
    {
    border-collapse: collapse;
    border: solid 1px #012349;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    }
     
    #content .no_borders
    {
    border: solid 0px #012349;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    }
     
    #content table tr th
    {
    border-collapse: collapse;
    border: solid 1px #012349;
    text-align: center;
    background-image: url(../img/site_graphics/bar_blend.jpg);
    background-repeat: repeat-x;
    color: #00ccff;
    background-color: #012349;
    text-align: center;
    padding: 5px;
    }
     
    #content table th h1
    {
    text-align: center;
    }
     
    #content table th h2
    {
    text-align: center;
    }
     
    #content table tr td
    {
    padding: 5px;
    border: solid 1px #000000;
    border-collapse: collapse;
    text-align:	center;
    vertical-align: middle;
    }
     
    #content table tr td p
    {
    text-align:	center;
    }
     
    #content table tr .newscell
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
     
    /* List styles */
    #content ul
    {
     
    }
     
    #content li
    {
    border: solid 0px red;
    background-image: url(../img/small_graphics/dotted_arrow.gif);
    background-repeat: no-repeat;
    position: top left;
    background-position: 0 3px;
    padding-left: 15px;
    margin-top: 10px;
    }
     
    /* Box 1 and 2 */
    #content .box1
    {
    border: 0px solid red;
    width: 49%;
    float: left;
    }
     
    #content .box2
    {
    border: 0px solid blue;
    width: 49%;
    float: right;
    }
     
    #content .centered_list
    {
    margin-left: 170px;
    }
     
    #content .download_block
    {
    margin-left: 140px;
    }
     
    #googlemap
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should still show the background bullet.

    Other rules than the above on li and a must be the cause.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to replace the bullets with your own image try this:

    Code CSS:
    content ul {
    list-style-type: disc;
    list-style-image: url(../img/small_graphics/dotted_arrow.gif);
    }

    Haven't tested but should work ok

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using background images for bullets is more reliable than list-style-image.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project


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
  •