SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Jafar's Avatar
    Join Date
    Jun 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy float problem with image and an ol list

    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

  2. #2
    SitePoint Zealot Jafar's Avatar
    Join Date
    Jun 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just note that, the image will have border, so I can't use padding-right + display:block

  3. #3
    SitePoint Zealot Jafar's Avatar
    Join Date
    Jun 2005
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks
    Solved!
    the ol li list-style must be inside decimal


Bookmarks

Posting Permissions

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