[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!