SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    When text wraps, bullet image on unordered list does not align correctly on IE 6.

    Hello, everyone.
    I've searching a solution for my problem, but I could not find anything in this forum. Please forgive me if there's already a similar thread out there.

    My question is what's the best way to create vertical unordered list with custom bullet graphic to avoid following two problems on IE 6.

    1. As text wraps, bullet graphic apts to align vertically on the center of two lines if the method ( http://css.maxdesign.com.au/listamatic/vertical05.htm ) is used.

    2. Bullet graphic slightly aligns off the the center if another method (http://catcode.com/csstips/graphic_list.html) is used.

    I want my bullet graphic to align at the center of the first line of each text as text wraps. Neither method works perfectly.

    Is there another way to make bullet graphic align center as text wraps??

    Thanks for help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The first method will allow you to do exactly what you want. You just have to adjust the top position to exactly match the size of the text in the first line.


    e.g.
    Code:
    	background-position: 0 .2em;
    The second number is the vertical position and it will not center vertically if you specify a specific dimension. It will only centre if you use 50% (or the keyword center). All you need to is set the dimension that matches your text

  3. #3
    SitePoint Member
    Join Date
    Nov 2004
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul!!
    I see, I did not know the vertical position at 50% or center causes a big difference. I don't think my CSS mastery book mentions about such pitfall.

    Anyhow, I'll try to set it to a specific dimension.
    Thanks!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,340
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I see, I did not know the vertical position at 50% or center causes a big difference.
    Yes if the list wraps then the height of the element increases and the background image at 50% will move down to the centre of the two lines. If you just set the top position at 5px (or whatever is appropriate) then it wouldn't move down when the text wraps because it will always stay at 5px from the top.


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
  •