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

[abduraooft]

It's most probably due to the errors in your markup. You can't put a block level element like <p>,<div>,<ul> etc inside an inline element like <span>,<a> etc.

[jerry62704]

Your span (block) is not accounting for the width of the float. Make it a float as well.

[Thatsid]

Hi guys, you are right about the invalid markup, but that did'nt create the problem. I found the solution on an other forum:

ul {overflow:hidden}

Not quite logical, but it works!

thanks for your suggestions though!

Flink