CSSKarma

Main Nav:

• home
• articles
• lab
• research
• portfolio
• contact

Social Nav:

• facebook
• twitter
• dopplr
• plurk
• pandora

Extra Nav:

• RSS
• Twitter
• FatFold

CSS Bullet Alignment

This is a problem I struggled with for a while. I like using non-traditional bullets, but if they're 1px too large, they won't line up correctly with the list item. So here's my solution: background image on the list item, I really find it hard to believe that it didn't occur to me earlier while I was fighting margin and padding to align the stupid bullet with the text. Anyways, just in case, anyone else had this problem I thought I'd post what I found. I just used some dummy text in the lists.

Unstyled

• Do not put anything but LI list items inside an UL.
• The COMPACT attribute is not widely implemented.
• Not all browsers support the TYPE attribute

Styled with "list-style: disc url(img);" [this is the problem]

• Do not put anything but LI list items inside an UL.
• The COMPACT attribute is not widely implemented.
• Not all browsers support the TYPE attribute

.disc li{
list-style: disc url('bullet_arrow_large.gif');
padding-top: 3px;     
padding-bottom: 3px; 
}

Styled with "background: url(img) no-repeat left center;" [this is the solution]

• Do not put anything but LI list items inside an UL.
• The COMPACT attribute is not widely implemented.;
• Not all browsers support the TYPE attribute

.bg-img li{
list-style: none;
line-height: 34px;
background: transparent url('bullet_arrow_large.gif') no-repeat left center;
padding: 0 0 0 25px; 
}

Looks 100% better doesn't it? AND it's perfectly accessible since it's still a 'ul'. You'll probably have to tweak the padding and margin according to the left-right position you want, but this should give you a good starting place.

with ease,
tim