SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 problem with margin-bottom

    Hello,
    I am new here and found this useful forum on the search to my problem:

    I am trying to create rounded corners with CSS. The result in FF is ok, but IE7 creates a 1px margin at the bottom:
    Check the result here: flightwork.com (pinkish boxes on the left of front page)

    I tried with
    margin-bottom : -1px; /* this is for IE */

    but this did not help...

    Can anyone point me into the right direction? Your help is appreciated.
    Stephen

  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)
    Hi stefan72, welcome to SitePoint

    I don't see the margin in IE7 but in IE6-.

    I think the cause is that IE grows the height of an element to fit current font-size, and then IE6 doesn't respect a set height if overflow is not changed from the default visible.

    Remove IE bottom margin and add font-size zero for IE6:
    Code CSS:
    .tr, .bl, .br {
      position : absolute;
      width : 10px;
      height : 10px;  /* corner images are 10x10 */
      display : block;
    /*  #margin-bottom : -1px; *//*  this is for IE */
      font-size: 0; /* for IE6- */
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I think the cause is that IE grows the height of an element to fit current font-size, and then IE6 doesn't respect a set height if overflow is not changed from the default visible.
    That's right, IE6 is seeing height as min-height and adding to the height to make room for any possible descendants of text. I recently learned about this IE6 behavior in this thread.

    eric's approach of giving font-size:0 does work

    Another way to fix this is by giving overflow:hidden

    Remove IE bottom margin like eric has said then add overflow:hidden, that will fix IE6 & 7

    .tr, .bl, .br {
    position : absolute;
    width : 10px;
    height : 10px; /* corner images are 10x10 */
    display : block;
    overflow:hidden;
    }

    Good to see you back around here eric, haven't noticed many posts from you lately

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting to hear that it does not work in IE6 only. I am using a RC x of IE7...

    Big thanks you guys for your help!

    Just tried your suggestions and it works!

    I'll be back in this forum

    Best regards
    Stefan

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stefan72 View Post
    Interesting to hear that it does not work in IE6 only.
    I saw the problem in IE7 also.

    I'll be back in this forum
    We're always willing to help out in any way we can

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

    Although it is working in your example you must be careful when placing absolute corners into place as IE is 1px out when the distance traveled is an odd pixel number.

    This demo explains the problem.

    In a fluid layout there is no real fix but to recode it differently and try another method.


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
  •