SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A bad bottom margin on a table on IE (any version)

    Hello guys,
    Always trying to get a template of mine using some CSS framework (mainly a custom Blueprint version), I get into a strange issue...
    Please look at the table in this page, with IE (any version > 5.5) and FF:

    http://www.ivanhalen.com/framework/800x600.htm

    As a Blueprint rule, the table has a margin-bottom:1.4em (line 46 on CSS file)
    The table's margin bottom is displayed well on FF, meaning that it "pushes down" the bottom side of its parent div - and really this is what I'd expect
    On IE this "bottom side" is not pushed down, but I can still see a sort of margin bottom applied: in other words, it seems that the parent div's bottom margin is increased, not the table's one
    Of course this sounds strange to me: please, can you help with this issue?
    Thanks

    PS: as another issue, the table horizontally enlarges very much on IE5.5... I don't wanna bore you with this further problem, but I'll be very pleased if you can help on this issue too... :-)

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, instead of applying a bottom margin to the table, how about you set padding-bottom:15px; on "box-main" to achieve the same effect .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    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)
    The margin error is a hasLayout issue of the .box-main div in IE.

    You already know the fix:
    Code:
    .box-main {padding: 4px 8px; min-height:0;}
    * html .box-main {height:1%;}
    IE 5.5 doesn't margin auto-center the #container, it is flush left.
    The box-main is also more affected by the lack of hasLayout.

    You can use text-align in the parent to center and then reset the align left on the #container.
    Code:
    #page {background:url(bg.jpg) repeat-y center; text-align:center;}
    #container {text-align:left;}
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the answers, guys: you are really precious!
    @RyanReese: thanks for the suggestion, it's a good idea but I was also trying to understand if that was a bug in Blueprint CSS or a bug of mine (the latter, of course :-)
    @Erik J: great job, Eric! The
    .box-main {padding: 4px 8px; min-height:0;}
    * html .box-main {height:1%;}
    did the work, and I understand the hasLayout trigger of the second line... please can you explain me the use of min-height:0; there?
    About the IE5.5 question, seems that the previous lines solved the problem too!
    This is the screenshot on IE5.5 WITHOUT those lines: http://www.ivanhalen.com/framework/IE55_1.jpg
    And this is the scvreeshot WITH those lines:
    http://www.ivanhalen.com/framework/IE55_2.jpg
    Please, can you explain me this behavior too?
    Thanks :-)

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    min-height:0; gives hasLayout to IE7 (the previous haslayout only targets IE6<)

    margin:0 auto; to center is not understood by IE. IE wrongly allows text-align on block elements and using it is a little hack to get horizontal centering in IE5.5 and down.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan, I didn't knew the min-height:0 stuff on IE7 :-)

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    No problem-it is the easiest way to give hasLayout to IE7 and it does nothing to affect the layout visually.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •