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:
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:
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