SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extra Left Margin on <ul> in IE6/IE7

    I'm trying to style two unordered lists to appear as a table. I'm forced to do this because the number of items in the list will be generated dynamically and the numbering on the left has to be static even when items on the right are moved around (see ReorderList control). Essentially, this will be the back-drop for a cheatsheet where players can be moved around in the right-side list while the numbering remains the same on the left.

    Anyways, the list on the left is floated and I want the list on the right to 'butt-up' against the one on the left to create the illusion of a table. In FF you can see the correct behavior, but

    *in IE6 it looks as if an extra 3px of left margin is being added to the list on the right.
    *in IE7 it looks as if an extra 1px of left margin is being added to the list on the right

    The Page

    This extra margin only appears because of the floated list on the left, but it has to be floated for my layout to work. Is there any way I can get the list on the right to butt-up against the one on the left in all 3 browsers?
    Last edited by pinch; Mar 12, 2008 at 11:08. Reason: clarification

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just float both lists left, and they will but-up.
    Add "overflow: hidden" to the container to make it embrace the floats.
    Display list-items as block to take dimensions and make a vertical list.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Guru pinch's Avatar
    Join Date
    Mar 2005
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Just float both lists left, and they will but-up.
    Add "overflow: hidden" to the container to make it embrace the floats.
    Display list-items as block to take dimensions and make a vertical list.
    Thanks erik. When you say 'overflow:hidden' embraces the floats, what exactly does that mean. Also, when you float an element does it mess up styling that may be inside of the floated element?

    Thanks.

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pinch View Post
    ...When you say 'overflow:hidden' embraces the floats, what exactly does that mean. Also, when you float an element does it mess up styling that may be inside of the floated element?...
    As I understand it;
    Undefined width is set by parent and undefined height by content. First the container is rendered and undefined lenghts accordingly set, then its content is rendered. Floats inside with undefined lengths are not calculated initially, so the container does not grow height to fit them.

    The "overflow: hidden" on a container makes the browser first calculate the content totals including floats, then compare with given lengths to see what to hide. Then the container is rendered and the undefined lengts are grown accordingly.
    ... Also, when you float an element does it mess up styling that may be inside of the floated element?...
    Styling stays, but it gets a block-display.
    Happy ADD/ADHD with Asperger's


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
  •