SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Double Margin Problem (Ie6)

    Hey guys,

    Just come across this problem on IE6..

    Take a look at the live version Here and scroll down till the bottom of content text.. On Firefox there is a 30px margin between container and the site-map footer
    Code:
    <div class="container"><style="margin-bottom:30px;">
    here however on ie6 this seems to have doubled..

    Ive tried a few things but cant figure out what it could be?
    Any solutions would be great.. I'm sure its something small.

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    <div class="container"><style="margin-bottom:30px;">

    <div class="container" style="margin-bottom:30px;">

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hmm, I'm not well versed in IE6 foibles, but would suggest the following:

    1. Unfloat the #container (maybe use overflow: hidden; instead if needed)

    Or

    2. Replace the bottom margin with padding.

    But I suspect the float is causing trouble.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    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, the problem is that in IE you have a floated element (.container) and it has a bottom margin.

    IE won't contain that margin to use it, so the only way to use it is a hard clearing element. However if you unfloat it (since it doesn't even need to be floated) and use normal containment techniques then it should work
    Code:
    .container{float:none;overflow:hidden;zoom:1;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2009
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    I was trying to make the bg work and the only way it seemed to do this was by floating the container left.. This client likes validated code so im not sure if there is any other way of doing this without using zoom :S

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mattoman View Post
    I was trying to make the bg work and the only way it seemed to do this was by floating the container left.. This client likes validated code so im not sure if there is any other way of doing this without using zoom :S
    There are various ways to make the container wrap the content. The easiest is overflow: hidden; Rather than use zoom, you could just define the width of the container (which is fine since you are using fixed width anyway). So I would use this:

    Code:
    .container {
        overflow:hidden;
        width: 980px;
        background: url('../images/right-bg.gif') right repeat-y;
        margin-bottom: 30px;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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)
    Using my way still got the image to show. You must have either changed the code since when I looked at it, or you didn't fully impliment my code.

    I used overflow/zoom BECAUSE of hte image p roblem

    What Ralph just posted is basically what my code is. Notice it isn't floated (which is whta I suggested) and hten overflow. The zoom I had just set haslayout but the width he gives above does the same thing .

    We are just giving you the same advice now lol
    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
  •