float problem with image and an ol list

**Jafar** · Apr 2, 2009, 01:27

Hi,

Please test this code in your browser

Code HTML4Strict:

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<div style="margin:0 auto; width:500px; height:300px; background-color:#f3f3f3;">
	<img style="float:left" src="http://farm1.static.flickr.com/226/514439499_b94f694f5c_m.jpg" />
    <ol>
    	<li>The number one</li>
        <li>The number two</li>
        <li>The number three</li>
        <li>The number three</li>
        <li>The number three</li>
        <li>The number three</li>
        <li>The number three</li>
        <li>The number three</li>
        <li>The number three</li>
        <li>The number three</li>
        <li>The number three</li>
    </ol>
</div>
</body>
</html>

The ordered list number are overlapping the image a bit?
Can you help me solve it?
I don't want to float the list

thanks

**Jafar** · Apr 2, 2009, 01:53

just note that, the image will have border, so I can't use padding-right + display:block

**Jafar** · Apr 2, 2009, 02:06

thanks
Solved!
the ol li list-style must be inside decimal

The SitePoint Forums have moved.

User Tag List

Thread: float problem with image and an ol list

Thread Tools

Display

float problem with image and an ol list

Bookmarks

Bookmarks

Posting Permissions