Where are the list bullets?

Kor · 05-20-2009, 11:20 AM

I need to wrap some list around a floated div. It works OK in Moz, but in IE, strange enough, the list's bullets simply disappear below that floated div.

What the hack?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.container {
margin:30px;
width:300px;
border:solid 1px #000;
text-align:justify;
padding:6px;
}
.floated{
width:100px;
height:130px;
float:left;
background-color:#0099FF;
margin:5px;
}
ul{
margin:0;
list-style-position: outside;
position:relative;
left:15px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="floated"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolor</span></li>
</ul>
<br>
<br>
Nam enim diam, dignissim vel pellentesque vel, aliquam eget nisi. Sed in massa sodales tortor cursus pharetra. Sed congue, urna sit amet pretium viverra, sapien diam vehicula dui,
<br>
<br>
<ul>
<li><span>Sed pulvinar diam nec nunc facilisis vestibulum nec</span></li>
<li><span>Etiam dolor dolor, hendrerit nec tincidunt non, sagittis at ligula</span></li>
<li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra er inceptos himenaeos</span></li>
<li><span>In nibh nisi, tempus id hendrerit ac, posuere ac dolo</span>r</li>
</ul>
</div>
</body>
</html>

I tried all the possible ways to obtain a list (or a list like) who must:
- wrap around a floated element
- have the text paragraph outside the bullet (same as list-style-position: outside does in CSS for list elements)

I tried with divs, backgrounds... all the stuff. It looks like an impossible task. The only solution I have found is in the code above, but it does not work in IE (neither in 6 nor in 7). Any ideas?

VIPStephan · 05-20-2009, 11:49 AM

Simple solution: give the list a left padding of like 25 or 30px.

In IE the position of the list bullets is determined by a left margin while in all other browsers it’s dertermined by a left padding. I always reset it where necessary by setting left margin and padding to zero and then only work with left padding (increasing it as necessary).

You can try it out yourself: Create simple test page with just a list and put a 1px border around it. Then play with left margin and left padding and compare IE and other browsers.

abduraooft · 05-20-2009, 11:52 AM

Um.. there are a lot issues in IE when it encounters any floated element before the list items. You might be interested in the threads http://www.codingforums.com/showthread.php?t=156832 and http://www.codingforums.com/showthread.php?t=157296

...and an easy work around would be to satisfy with adding a background image to the list items;

Kor · 05-20-2009, 04:00 PM

Well I'll be damned... The solution was so simple yet so illogical. a padding-left similar with the relative left position did the trick... hm

Kor · 05-21-2009, 12:25 PM

I have discovered that, in some circumstances, a padding (even of 1px) for the LI elements would be necessary for IE6.

And in other circumstances (when the height of the UL is smaller than the floated left layer' height) IE6 refuses to show the bullets, no-matter other workarounds. No solution for IE6 in that case.

The most stupid browser - this IE6 - I have always said so

abduraooft · 05-21-2009, 12:34 PM

Quote:

And in other circumstances (when the height of the UL is smaller than the floated left layer' height) IE6 refuses to show the bullets, no-matter other workarounds. No solution for IE6 in that case.

In that case you could set a suitable margin-left to your <ul>, to make a simple 2 column arrangement. (Not tested, but I believe so

)

VIPStephan · 05-21-2009, 12:37 PM

In most cases when IE is going wrong the reason is hasLayout.

Kor · 05-21-2009, 01:01 PM

Thanks again. I have managed to find a workaround by using (for IE6 only) for the UL element the height:1px and the left:0. But this is to be used only for the lists which does not bypass the left floated div (in height), otherwise the text will not wrap the div.