SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lists next to Floated Images

    I am confused on margins, padding, and floats

    I put a list above a floated image and its looks like

    Normal text
    * List Item
    * List item

    I put the same code next to a float:left image and it looks like

    normal text
    * List Item
    * List Item

    and if I don't put a large margin on the right side of the image, the list item markers overlap onto the image on FF2 or are completely obscured in IE7

    an example is at http://www.oberlin.us/testli.htm


    What is happening and what can I do to make it look the same on both FF2 and IE7?

    Thanks

    Craig

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the margin on your list (wider than the width of the image) instead of the image.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried that. On IE7, it works fine and appears to move it from the left container edge. On FF2 it moves it the specified distance from the right border of the image.

    What is happening here? Is the image not taking up 'space' on IE7, but is in FF2?

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

    I can't see much difference in ie7 and ff2.

    However there are some things you should know about floats. Margin and padding on static elements that follow a float will ignore the float because floats are removed from the flow and the margin and padding will slide under the float.

    The margin that you place on the float itself will however will repel any content that is around it.

    Regarding the bullets in lists then there exact placement is controlled by the browser and space is allocated by adding padding and margins to the ul by default. Some browsers use padding and some use margin so you need to explicitly address both to get consistent results.

    Also the bullet position can be either inside or outside and affects the placement of the ul.

    You could simply have set the list-style to inside and the bullets would line up at the edge of the image inline with the paragraph above without needing a margin on the image.
    Code:
    ul{list-style:inside}
    However if you want then to wrap inline with the list text and not the bullet you would need to leave it at the default of outside and apply a margin to the float as previous.

    You are unlikely to get pixel perfection with bullets as they are controlled by the browsers even if you explicitly apply the same amount of padding/margin.

    Also use a full docytype or ie will be working in quirks mode and use the broken box model among other things.

    This looks much the same in both to me:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    ul{margin:0 0 0 16px;padding:0;list-style:inside}
    </style>
    </head>
    <body>
    <p>this is a normal paragraph</p>
    <ul>
        <li>List item 1</li>
        <li>List Item 2</li>
    </ul>
    <img src="http://www.oberlin.us/Images/Eagle_Ray_Cozumel_2002.jpg">
    <p>this is a normal paragraph</p>
    <ul>
        <li>List item 1</li>
        <li>List Item 2</li>
    </ul>
    <img src="http://www.oberlin.us/Images/Eagle_Ray_Cozumel_2002.jpg" style="float:left;margin-right:5px">
    <p>this is a normal paragraph</p>
    <ul>
        <li>List item 1</li>
        <li>List Item 2</li>
    </ul>
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Thank you very much. The explanation about statics following floats and how margins were affected was what I was looking for.

    I took your code and it produces virtually identical display...which is 90% of what I was looking for.

    A couple of follow-up questions....
    Why does the normal 'indent' that occurs for list items gets lost when the list is next to the float?

    When do I apply a class= to a <ul> vs. the <li>?

    Thanks again!

    Craig

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Why does the normal 'indent' that occurs for list items gets lost when the list is next to the float?
    Because the padding and margin slide under the float and any text-alignment would also slide under the float because the float is removed from the flow.

    The browsers do however seem to move the bullet with the text to some degree because of the way that content is repelled and I expect margins are added to move elements aside although this is in the inner workings of the browser and not something we can control exactly.

    [code]
    When do I apply a class= to a <ul> vs. the <li>?
    [/quote]

    If you are referring to the list styles then they will inherit from the ul so you can set the list-style for the li or for the ul and it should make no difference in modern browsers.

    However it is usually better to apply a class to the ul and you can still target the list items through that class if you need to. e.g. ul.nav li etc.

    List and floats are quite an awkward combination

    Hope that was what you meant.

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect. Thanks!

  8. #8
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by otter View Post
    When do I apply a class= to a <ul> vs. the <li>?
    If you apply a style to the UL, such as a font color for all list items, it will affect all those items. But you can also apply a class to each list item as well.

    A good example is that you could create a ul with a font color of black to list out some food items. However, say you want to make the list items that are vegetables green. By default, all UL items will be black, so you then apply a class to the individual list items that are vegetables with a new class :

    .food {
    color:#000; /* black */
    }

    .veggie {
    color:#006600; /* green */

    <ul class="food">
    <li>Chicken</li>
    <li>Beef</li>
    <li class="veggie">Corn</li>
    </ul>


    Thus, since the class food has a text color of black all list items in the user list uses black. So Chicken and Beef would be listed in black text. However, since the list item for "Corn" is using a different style, thus an "inner class", it would use the "veggie" style to list the corn item in green text.


    Hope this helps. I'm a newcomer to css, moving from about 11 years of working with HTML and a touch of CSS mostly font stuff, but trying to become a CSS purist.
    intragenesis, llc professional web & graphic design


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
  •