SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Belgium
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    lists stick to floating image

    Hi all,

    when I use lists (ul and ol) with a (left) floating image, the lists stick to the right of the (left) floating image. The other text between the same p-tags, doesn't.

    HTML
    Code:
    <div>
      <h1>Some heading</h1>
      <img src="./img.jpg" class="left" />
      <p>Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.</p>
      <p>Some other text:<br />
       <ul>
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
       </ul>
      </p>
     </div>
    CSS
    Code:
    img.left {
      float: left;
      margin: 5px 20px 5px 0;}
    Why does this happen?


    Thanks a lot,

    Tim
    Last edited by TimH; Oct 18, 2004 at 11:45. Reason: forgot the closing div in the HTML code

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could try adding this:
    Code:
    ul {list-style:inside;}
    However if your list text wraps then it lines up under the bullet on the new line and not the list test.

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Belgium
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

    I still don't get it why they have a negative indentation, but it does work :-)

    Indentation, that briought me to try to use text-indent, which has the same effect. The first line is indented and when not using list-style:inside, it has the same effect as list-style:inside.


    Cheers,
    Tim


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
  •