SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Toronto, ON, Canada
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List-style-image alignment

    I am using an image (gif) for a marker but I find the marker is too high and does not align vertically with my text.

    UL
    {
    color: #C2C29A;
    list-style-image: url(xl.gif);
    padding: 0px 0px 0px 10px;
    margin: 0px 0px 0px 10px;
    width: 100%;
    }

    Any thoughts? IE/Win 5.5 and above.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Add some whitespace to the top of the gif to bring the marker down perhaps? The only way you can change where the list marker appears is by using list-style-position, but that will only let you choose from "inside" or "outside" (default). It doesn't allow vertical positioning.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Toronto, ON, Canada
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How will that affect scaling the text through the browser?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Toronto, ON, Canada
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just tried, it works but does not scale. So only native bullets reposition with the list. Another image-related shortcoming of CSS. Why is it that they did not address vertical image alignment with text? Seems like a no-brainer that people would want to have text and images center vertically. Too bad, back to tables I guess

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Toronto, ON, Canada
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually it appears that it does work on larger fonts but has a limit to smaller font if it superceeds the image size. Looks like it will work in CSS.

    Thanks Vinnie

  6. #6
    SitePoint Addict hurricane.uk's Avatar
    Join Date
    May 2003
    Location
    Liverpool
    Posts
    361
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would altering the line height help? Also, would vertical-align too as it's valid for inline positioning?

  7. #7
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    line-height might help, but vertical-align doesn't apply to bullets.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor


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
  •