SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy ul li bullets not aligning

    Hi all,.,.

    does anyone know how to get the text next to these tick bullets on this page aligned:

    Ive tried playing with everything, padding, margins..

    What am i missing?
    http://www.bluecrushdesign.co.za/lottery/mainhow.html

    Thanks!
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Unfortunately you can't change the positioning of the list-style image and it varies considerably between browsers. Most people simply use a background image instead which you can place with pixel perfection but of course is not as semantically correct.

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aaah thanks..;-)
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Unfortunately you can't change the positioning of the list-style image and it varies considerably between browsers. Most people simply use a background image instead which you can place with pixel perfection but of course is not as semantically correct.
    I don't see why it is any less semantically correct - the HTML (ie, the semantics) is exactly the same!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Semantics wise it's the same, however background images give you much more consistant results, and you can easily modify the position if needed
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stevie D View Post
    I don't see why it is any less semantically correct - the HTML (ie, the semantics) is exactly the same!
    Yes perhaps semantics wasn't the word I was meaning to say. Accessible would have been a better word.

    The problem with using a background image is that if the image is missing or images have been turned off then you get no bullet displayed at all and no visual clue that it's a list.

    On the other hand if you use list-style image and the image is missing the bullet gets displayed by default.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul.bullet {
        list-style-image:url(images/bull20.gif)
    }
    ul.bullet2 li {
        list-style:none;
        background:url(images/bull20.gif) no-repeat 0 5px;
        padding:0 0 0 20px;
        margin:0;
    }
    </style>
    </head>
    <body>
    <ul class="bullet">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <ul class="bullet2">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    </body>
    </html>


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
  •