The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical alignment of <LI> markers

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #23386

    I am using a small red arrow as my marker in a UL list and noticed yesterday that the middle of the arrow was pointing at the top of the text (Arial 10px) on each line. It looks really awkward so I tried fixing it with CSS. Nothing I did (in IE7, haven’t checked others yet) could change it.

    What I finally ended up doing was making a new graphic of a smaller arrow which in itself looks awkward. (The marker seems to be aligned with the baseline so a smaller graphic doesn’t stick up as high.)

    In the process of looking for a fix, I ran across other little issues. For very large text, the marker would be too low. The only fix I know of would be to alter the image again with some whitespace at the bottom.

    But what about <li> entries that wrap to multiple lines? The marker is stuck to the top line. It would be nice, in some cases, to be able to use CSS to set the marker to the middle of the whole entry, not just the top line.

    Has anyone else been bothered by any of this? Have you come up with anything other than customizing the image to match the font-size?


    That’s an interesting idea!

    I’ve been using list-style-image: url(images/arrow.gif); and trying to manipulate the marker or the LI text.

    I’m very disappointed with the lack of control over the built in markers but your idea sounds like a great work-around. Thanks.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.