I'm hoping someone here will be able to help me. I can't seem to figure out how to fix this one and it's driving me crazy. (It works fine in every browser except Firefox 2.) I'm trying to setup a list, where there is an image with text next to it (Item Name), and under that text is a sub-list (Item Features). I want the sub-list to be under the text (Item Name) and not to wrap around the image. The problem is that in Firefox 2 the first 2 elements of the sub-list are double indented and the remaining are indented only once. Other browsers (Firefox3, Safari, IE6, IE7) show the sub-list in a vertical straight line. Here is my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <STYLE type="text/css"> #list img { float: left; padding: 0px; margin: 0px 8px 0px 0px; border: 1px solid #000; width: 48px; height: 35px; } #list ul li { padding: 1px 0px 0px 0px; margin: 20px 0px 0px 0px; 2border: 1px solid #FFFF00;/* Yellow */ } #list ul li ul { padding: 0; margin: 0px 0px -20px 0px; } #list ul ul li { list-style-type: disc; font-weight: normal; font-size: 9pt; color: #000; padding: 0px; margin: 0px 0px 0px 80px; } </STYLE> </head> <body> <div id="list"> <ul> <li><img src="img.jpg">Item 1 Title <ul> <li>Feature 1</li> <li>Feature 2</li> <li>Feature 3</li> <li>Feature 4</li> </ul> </li> <li><img src="img2.jpg">Item 2 Title</li> <li><img src="img3.jpg">Item 3 Title <ul> <li>Feature 1</li> <li>Feature 2</li> </ul> </li> </ul> </div> </body> </html>
Hi, Try modding the following selectors in your css #list ul li ul { padding: 0; [COLOR="Red"][I][B]margin: 0px 0px -20px 80px[/B];[/I][/COLOR] } #list ul ul li { list-style-type: disc; font-weight: normal; font-size: 9pt; color: #000; padding: 0px; [COLOR="Red"][I][B]margin: 0px 0px 0px 0px;[/B][/I][/COLOR] } Code (markup): Is this what you after? gG