www.webdeveloper.com
Results 1 to 3 of 3

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

  1. #1
    Join Date
    Jan 2007
    Posts
    8

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

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    ul {overflow:hidden;}
    The span is invalid markup
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jan 2007
    Posts
    8

    resolved

    Quote Originally Posted by Fang View Post
    Code:
    ul {overflow:hidden;}
    The span is invalid markup
    Thanks, Fang! The overflow:hidden does the trick!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles