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?
what code are you using for the image. You could try putting the arrow as the background image for the li element and then tell it how to align. That might work. something like
li { background-image:url(arrow.gif) left center; }
that would tell it to align to the left in the center of the area.
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?
li { background-image:url(arrow.gif) left center; }
that would tell it to align to the left in the center of the area.
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.