Search code examples
cssstylesheet

Vertically aligning text to graphics based bullets


See the bullets on this blog post: http://www.nielsbrinch.com/managing-expectation-management/

I have had to change to text characteristics in order to align the text to the graphics based bullets. I would like to set the same line-height (25) as the rest of the text, but had to set it to 15 in order for the alignment to the orange bullet to be correct.

Here are the combined styles for the bullets.

.post ul li {
    background: url(images/yellow-bullet.png) no-repeat 0px 4px;
    padding-left: 15px;
    font-family: Tahoma;
    line-height: 15px;
    font-size: 11pt;
    padding-top: -12px;
    margin-bottom: 10px;
    margin-left: 10px;
}

Question: How do I ensure to keep the text correctly aligned with the bullets, while preserving full control of the text characteristics?

(I want to do this only by changing the styles, please do not suggest that I change the html structure, such as including a div in the li tag)


Solution

  • list-style-image: url(images/yellow-bullet.png);
    

    instead of

    background: url(images/yellow-bullet.png) no-repeat 0px 4px;
    

    should do the trick?