SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I think I've got a collapsing margin issue, but I can't shake it

    http://www.nicestylesheet.com/blog/P2/

    On that page, the "older/newer" buttons below the gallery images are off in IE. All other browsers are ok.

    If you look at it in FireFox, the space between the "star rating" and the "newer/older" buttons is how I want it to look. If you look at it in IE, the space between those two elements is less than in Firefox.

    It seems like the margin-bottom on ul#gallery li {} is collapsing with the margin-top on #newer-older a {}, but I've tried everything in my CSS arsenal to shake it, but can't seem to do it.

    I've tried adding a border-bottom to ul#gallery, padding-bottom to ul#gallery, padding-top to #newer-older, and adding border-top to #newer-older with no luck. On top of that, I didn't think margins were suppose to collapse on floated elements anyway, so that's another thing.

    Any ideas here?

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

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

    Yes its the lists bottom margin collapsing through the bottom of the gallery in IE because there is nothing solid in the way unlike the clearfix method which is placing something solid after the float.

    If you simply change the bottom margin on the list to padding bottom you should get the same effect.

    Code:
    ul#gallery li {
    float: left;
    margin-left: 25px;
    padding-bottom: 10px;/* was margin*/
    }

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, gosh my brain is fried. That was obvious and I think the only thing I didn't try.

    I'm wondering though, with ul#gallery having class="clearfix" applied to it, that should effectively add a period after the <ul>, correct? So, in theory, shouldn't that have solved this problem since the period would be something "solid?"
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    So, in theory, shouldn't that have solved this problem since the period would be something "solid?"
    It did solve the problem for firefox but not for IE because it doesn't understand :after.

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ha, I see. Makes sense. Thanks Paul.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •