Forum Moderators: not2easy
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.
Added: And how about #content ul li? Aside from measurements, the li element would be the child of a parent ul element.
[w3.org...]
[w3.org...]
[edited by: Marcia at 9:56 pm (utc) on Jan. 29, 2008]
You are right this is "caused" by the width but it shouldn't be. This is a (possibly THE) classic hasLayout [webmasterworld.com] symptom, and one that wasn't fixed in IE7 :(
Marcia, it matters not about the width (or the float) on the container div here.. you can remove both and the same will occur
OK, rather than have you read all that and figure it out because it can be a case of just trying to move the width and try some other things.
A really quick and dirty solution is to remove the width from the list altogether, li or ul, then wrap the <ul> in a div in the HTML and put the width on the container div.
The pure CSS way to solve, without adding to your HTML or affecting other browsers
Remove the width from the <li> and put it on the <ul>
..(this actually makes IE hide the bullets altogether :o)
AND
.. to get the bullets back explicitly tell IE which property to use for its indent rather than relying on the default (IE uses the margin by default others use padding, and it matters not which one you use as long as you explicitly choose one), so zero the margin and set the left padding to whatever you would like, around 20px is normal default.
#content {
background: #dad;
}#content ul {
width: 550px; /* move width to here */
margin: 0; /* zero this then use padding to create the list indent */
padding: 0 0 0 25px; /* normalise indent across browsers */list-style-type: disc;
line-height: 21px;
background: #abc;
}#content li {
/* keep haslayout triggering properties off the li itself */
}
Bullet position oddities or even lack of bullets are classic hasLayout symptoms, the cure might not always the same, but generally the advice is to keep 'hasLayout=true' triggering properties off the <li> element.
Suzy
Cheers!
