Greetings,
When using the CSS background image function to add bullets to a menu, how does one align the bullet to the first line of a two-line link? Currently the bullet is spaced between the two lines. Included is a screenshot of the problem. Thanks!
CSS Menu - Align bullet on double-line link?
use a backgroound on an LI as your bullet, adjust it like below:
li {
list-style-type: none;
background: url(bullet.gif) 0px 7px no-repeat;
padding: 0 0 0 5px;
}
first declaration take sthe crummy system bullet off, 2nd dec. adds a bullet on the LI, 3rd dec adds padding so the text inside the LI doesn't overlap the bullet.
Still need help
Thanks, but actually my problem is not setting up the bullet style with a background image but making the bullet align to the TOP LINE of text on a TWO LINE link. I should have included my CSS in the first place. The screenshot I linked to in my initial message illustrates the problem I'm having. Any ideas? Here's my current CSS. Thanks!
#navcontainer li
{
list-style-type: none;
background: url(../Images/bullet.gif) no-repeat left;
padding: 0 0 0 10px;
}
CSS Menu - Align bullet on double-line link?
what if you specified top left for the background image instead of just left...
CSS Menu - Align bullet on double-line link?
Thanks! The bullets aren't aligned to the center of the text links as I would like, but they are aligning to the top line of the link. Good enough for now ; )
CSS Menu - Align bullet on double-line link?
Krysia - if you look again at TimeBandit's post you will notice two figures here > background: url(bullet.gif) 0px 7px no-repeat;
The first (0px) is the horizontal distance from the left; the second (7px) is the vertical distance from the top. Play with these two figures to get the exact position required for your bullet point graphic.
CSS Menu - Align bullet on double-line link?
Krysia - if you look again at TimeBandit's post you will notice two figures here > background: url(bullet.gif) 0px 7px no-repeat;
tnx, i should've been more clear when i posted.