SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List-Style / Height issue

    Hi Guys,

    I've created a new bullet of an unordered list and the image is 35px high.

    How do I get the text to align in the middle (height wise)?

    This is what I have used:-

    Code:
    #usp {
    	list-style-image:url(images/pill35.gif);
    	line-height: 35px;
    	vertical-align: middle;
    }
    Needless to say it doesn't work.

    The other thing is :- should I really be going there with fixing line height? What happens if an user enlarges the font for accessibility, will it break? Should I really avoid?

    Thanks in advance.
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  2. #2
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    35 pixels is pretty high for a bullet. In my experience the graphics need only be about 10px by 10px, with the bullet somewhere in there, you can move it about slightly until it lines up nicely.

    I think you are approaching this incorrectly. You need to change the code for your list items. If you were to put it on your #usp div as above, you'll need something like this...

    #usp li{
    list-style-image:url(images/pill35.gif);
    padding: 10px 0px;
    }

    That would replace the bullet with your customised one, then give each item in the list padding of 10px above and below so that you can get the spacing you want. Obviously you can change this to whatever looks best.

    Find out more here...

    http://css.maxdesign.com.au/listamatic/
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

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

    I've found it almost impossible to line up list images in the various browsers and usually resort to putting a background image in the list and adding some left padding to clear the image.

    The advantage of this method is that you can set the background position of the image exactly and not rely on the browsers default.

    Some info in this thread:

    http://www.sitepoint.com/forums/show...ght=list+image

    The other thing is :- should I really be going there with fixing line height? What happens if an user enlarges the font for accessibility, will it break? Should I really avoid?
    Well I assume you could set the line height in ems to be the same as the height in ems as long as the font is ems and they will all expand together.

    However the easiest way is just to try it out and see Remember that ie will not alter text sizes from the browser controls if they are in pixels.

    Paul

  4. #4
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the info.

    I agree a bullet of 35px is large - in the process of convincing others now

    I like the idea of using a background image too.

    Thanks again.
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.


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
  •