Align background image bullet on 2-line link?

[krycielo]

Greetings,

I am relatively new to CSS and am trying to align a background image bullet to the TOP line of a TWO line link. Currently the bullet aligns between the two lines. I have attached a screenshot image to better illustrate the problem. Below is the CSS. Thanks for any assistance!

li
{
list-style-type: none;
background: url(../Images/bullet.gif) no-repeat left;
padding: 0 0 0 10px;
}

[andrin]

What about:

background: url(../Images/bullet.gif) no-repeat top left;

?

[krycielo]

"no repeat top left" worked! That is, the bullets now align to the top line. However, this has created a new issue. Now the bullets align to the very top of the top line text. Is there a way to align bullets to the top line AND center the bullets to that line? Thanks!

(Please view attached illustration)

[andrin]

Theoretically, you should be able to use the :first-line pseudo-element:

li
{
	list-style-type: none;
	padding: 0 0 0 10px;
}

li:first-line
{
	background: url(../Images/bullet.gif) no-repeat left;
}

but that´s theoretically even in the good browsers. I would be more then surprised if it worked in old browsers.

[Paul O'B]

Alternatively just add a top position to the bullet image.

background: url(../Images/bullet.gif) no-repeat 0 5px;

A bit of trial error to position may be needed to position it exactly but if you know the line height and font-size you can work it out. (You could use ems if you want the position to scale with text size changes etc.)

Paul