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?
