list bullet appears on second line of list-item text

I have a css style for my bulleted lists that appear in a main content section (div) on my pages. The problem I have is in IE 6 and 7. If the text on a bulleted item wraps to a second line, the bullet aligns with the second (lower) line. How can I get it to stay on the first (upper) line. I believe it is caused by my width: 550px; in the css for the li. When I remove that, the bullet behaves normally. However, I need to limit the width as these run out of my container div they are in.

Help?

My doctype is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

style:
#content {
clear: right;
float: right;
width: 76%;
padding-right: 2px;
}
#content li {
width: 550px;
line-height: 21px;
list-style: disc outside;
}

<div id="content">
<ul>
<li>Book Projects: Chronicle your company's heritage to educate new employees or celebrate an anniversary or major event</li>
<li>Executive Communications: Help your leaders communicate with clarity and confidence </li>
</ul>
</div>

When this page renders, the text "celebrate an anniversary..." appears on a second line and the bullet is to the left of 'celebrate' not on the first line next to 'Book ...'

Book Projects: Chronicle your company's heritage to educate new employees or
-- celebrate an anniversary or major event

On the second bullet, the bullet appears on the second line next to the word 'confidence' not on the first line next to 'Executive ...'

Executive Communications: Help your leaders communicate with clarity and
-- confidence

Any thoughts?
Much appreciated.

list bullet appears on second line of list-item text

jdcowan

jdcowan

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week