IE 6-7 don't obey padding/margin

I my footer I have 3 columns with padding: 10px 20px 0px;

In those I have some headlines (h1/h2) with margin-top: 10px;

This looks ok in all browsers except from IE 6 and 7

In IE 6 and 7 the headlines is placed 10px from the top of the container. (the top padding is missing, but the left/right padding is ok)

Why?

http://www.hr-relocation.com/test.html

.footercolumn {
    width: 260px;
    height: 170px;
    padding: 10px 20px 0px;
    text-align: left;
    overflow: hidden;
  开发者_如何学Python  background: url(../gfx/footerbg.gif) no-repeat top left;
    float: left;
}

.footercolumn h1, .footercolumn h2, .footercolumn h3 {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.2em;
    font-weight: bold;
    color: #c5037b;
    display: block;
}

cinqoTimo has a great answer to this problem.

Another way I've worked around this is to have all my margins be on the bottom of my containers.

I noticed that if a had divs/containers atop each other (the above container with a bottom-margin of 1em, the below container with a top-margin of 1em, both containers were the same style, i.e.:

#imageDiv {
margin:1em;
}

) then IE7 would only give 1 container a margin. So instead of there being a gap of 2em between top and bottom containers, there would be a gap of 1em.

So after that, I decided to try and just assign bottom margins to containers, images, etc. For example:

#imageDiv {
margin-top:0em;
margin-right:1em auto;
margin-bottom:2em;
margin-left:1em auto;
}

If you need empty space above your very top container, since there will be no other containers above it, it should be okay to assign a margin-top size to it, or consider adding padding to the body, i.e.,

body {
padding-top:1em;
}

Welcome to web development - Rob's comment is completely true, people using IE 6 & 7 shouldn't be allowed on the internet. You can go Here to see a detailed explanation of the IE bugs.

Before you go tearing up your style, allow me to suggest something: Conditional Stylesheets

You apply something like this in your html HEAD section:

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

This allows you to target IE with additional CSS. Read the link, as it gets more fined grained - and is the route of choice for the issues you're experiencing. The easiest way is to make sure that the link to your IE-only css comes AFTER your other styles, and usually only contain the corrections (unless that doesn't work, then redefine the element). For example, if you have div ".header" that is fully defined in your regular CSS file, but is showing up 10px to the left in IE, your IE conditional stylesheet would contain:

.header{
margin-left: 10px;
}

That would be added to the existing CSS and would correct your problem..

Good Luck..

If you avoid specifying the height or width on any element that you specify borders and padding, you will avoid problems with inconsistencies in the browsers' box model implementations. Many layout headaches will disappear if you practice this.

For more information refer to Internet Explorer Box Model Bug.

Thanks for alle the answers and sugestion...

Working hard all night i came up with a solution that workd for all IE :-)

adding a <div class="clearall"></div> in top of the container div with this css solved the problem

clear: { both !important; display: block !important; height: 0 !important; margin: 0 !important; overflow: hidden !important; padding: 0 !important; width: 0 !important; }