SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align background image bullet on 2-line link?

    Greetings,

    I am relatively new to CSS and am trying to align a background image bullet to the TOP line of a TWO line link. Currently the bullet aligns between the two lines. I have attached a screenshot image to better illustrate the problem. Below is the CSS. Thanks for any assistance!

    li
    {
    list-style-type: none;
    background: url(../Images/bullet.gif) no-repeat left;
    padding: 0 0 0 10px;
    }
    Attached Images Attached Images

  2. #2
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about:
    Code:
    background: url(../Images/bullet.gif) no-repeat top left;
    ?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Athens
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "no repeat top left" worked! That is, the bullets now align to the top line. However, this has created a new issue. Now the bullets align to the very top of the top line text. Is there a way to align bullets to the top line AND center the bullets to that line? Thanks!

    (Please view attached illustration)
    Attached Images Attached Images

  4. #4
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theoretically, you should be able to use the :first-line pseudo-element:
    Code:
    li
    {
    	list-style-type: none;
    	padding: 0 0 0 10px;
    }
    
    li:first-line
    {
    	background: url(../Images/bullet.gif) no-repeat left;
    }
    but thatīs theoretically even in the good browsers. I would be more then surprised if it worked in old browsers.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Alternatively just add a top position to the bullet image.

    Code:
    background: url(../Images/bullet.gif) no-repeat 0 5px;
    A bit of trial error to position may be needed to position it exactly but if you know the line height and font-size you can work it out. (You could use ems if you want the position to scale with text size changes etc.)

    Paul


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
  •