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

<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.

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

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

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

  1. Replace the bottom margin with padding.

But I suspect the float is causing trouble.

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 :slight_smile:

.container{float:none;overflow:hidden;zoom:1;}

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

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:


.container {
    overflow:hidden;
    width: 980px;
    background: url('../images/right-bg.gif') right repeat-y;
    margin-bottom: 30px;
}

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 :slight_smile:

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