Prevent list bullets from overlapping with userpics

[dblume]

• Tired of list bullets overlapping with userpics?
• Want to stop it?
• Willing to customize your css?

Here's what I tried. Add the following custom css:

.asset-body ol { list-style: decimal inside; }
.asset-body ul { list-style: disc inside; }

Comments

[av8rmike]

This is a well-known issue with floated images and bullet lists, and is not unique to LiveJournal or Expressive. Still, thanks for posting!

[dblume]

I tried looking for the solution before experimenting, but I didn't even know which keywords to look up. I came to this community and tried to look up .user-icon, ul, ol, and .asset-body, but evidently didn't do it the right way.

I feel silly now knowing that it's a well-known issue. Hopefully my post will help someone else who doesn't even know how to look up the right keywords for the same problem.

Thanks for tagging the entry!

[thewhiteowl]

I find it ironic that the bullets are overlapping the userpic in this entry :)

[dblume]

It's not ironic when it's entirely intentional. :)

[anti_aol]

I love you. I have struggled with this problem (especially within the Bloggish code) for years. My answer was to get rid of the pictures (which I hated doing) and/or widen the entry boxes, depending on which solution worked best with which style. It's probably basic CSS that as a casual coder I should already know, but I didn't, so I really appreciate this post. Do you mind if I cross-post this code to s2_bloggish? I'm thinking of doing a new post there soon and I could include this tip with others I have in mind.

[dblume]

Thanks! I knew I couldn't be alone in my feelings about the overlap. Of course you may cross-post it anywhere it'd help.