[RESOLVED] Firefox 3 bug: ordered list bullets disappear behind floating element

[Thatsid]

Hi there fellow developers,

In Firefox 3 the following bug appears:
The bullet images of an ordered list are disappearing behind a floating div.
In IE6, IE7 and FF2 it works (and should work) fine.

See example here:
http://www.flink.nl/test/ordered-list-ff3.html

HTML code:

<div class="left">
<img src="http://www.flink.nl/images/example/01_std_visual.gif" width="100" height="100" align="top">
</div>
<span class="spacer">
<p>first paragraph</p>
<ul>
<li>first list item in the list</li>
<li>second list item in the list</li>
<li>third list item in the list</li>
</ul>
</span>

<br style="clear:both">

<span class="spacer">
<p>second paragraph</p>
<ul>
<li>first list item in the list</li>
<li>second list item in the list</li>
<li>third list item in the list</li>
</ul>
</span>


CSS code:

.left {
float:left;
margin:0 15px 15px 0;
}
ul {
margin:0 0 0 15px;
padding:0;
}
ul li {
padding:0 0 0 16px;
background:url(http://www.flink.nl/images/example/list_item_bullet.gif) 0 6px no-repeat;
list-style: none outside none;
text-indent:0;
height:1%;
}
.spacer {
display:block;
padding-bottom:15px;
}


Because it's being used in a content management system, this structure has the following conditions:


You cannot define any widths for any of the elements
The list should also align properly to the left, without standing next to the floating element.
it has to work with images as bullets
The content has to wrap around the element.
it's not allowed to place extra HTML-tags or classes in or around the list to influence it's behavior. All styles have to be placed in the standard classes for the <ul> and <li>, as you can see in the stylesheet in the header.


Thanks in advance!
Flink

[Fang]

ul {overflow:hidden;}
The span is invalid markup

[Thatsid]

ul {overflow:hidden;}
The span is invalid markup

Thanks, Fang! The overflow:hidden does the trick!