IE7 display issues (adding extra top margin)

I am having a really tough time figuring out why IE7 adds extra padding to the this page!

This is what IE7 is doing: http://imgur.com/lwyRI.png

The correct page would have the three black tabs connected to the graphic above. This is how its supposed to look: also stored on imgur: 64qbf.png (i am only allowed one link)

The page link can be found in the img. (again i can only post one link)

please help!

css code:

<style type="text/css">
#background{
    background-image: url(/images/store/vaporIronBK.jpg);
    background-repeat:no-repeat;
    height:auto;
    width:665px;

    margin-top:125px;

    margin-left:228px;
    padding-top:5px;
    font-size:15px;
}

#background a {
    color: #ffffff;
    text-decoration: none;
}

#background a:hover {
    color: #de156d;
}

#videoLinks  {
    margin-top:52px;
    height: 100px;
}

#buy{
    width:400px;
    float:left;
    clear:both;
    padding-left:235px;
    color:#000000;
}

#video {
    float: right;
    left: 683px;
    margin-left: 35px;
    margin-top: 166px;
    width: 200px;
    color: #000000;
}

#video a {
    text-decoration: none;
    color: #000000;
}

#video a:hover {
    color: #de156d;
}

#footnotes  {
    color:#ffffff;
    margin-top: 37px;
}

#bottom-text {
    margin-left:40px;
    margin-top:445px;
    width:575px;
}

#bottom-text a {
    color: #de156d;
    text-decoration: none;
}

#bottom-text a:hover {
    color: #000000;
}

#bottom-text p {
    text-align: justify;
}

#bottom-text h2 {
    font-size: 25px;
    color: #000000;
    padding-bottom: 10px;
}

#bottom-text h3 {
    padding-bottom: 5px;
}

#bottom-text p {
    padding-bottom: 20px;
}

#bottom-text .header-text {
    padding-bottom: 25px;
}

#bottom-text p.taylor-image {
    text-align: center;
}

.tabs {
    height: 30px;
    width: 180px;
    float: left;
    margin-left: 30px;
    padding-top: 10px;
}
</style>

I do this to every page:

<body>
<!--[if IE]><div class="ie"><![endif]-->

...LALALA

<!--[if IE]></div><![endif]-->
</body>

It's called a conditional comment. It's IE proprietary, but acts like a comment to other browsers and validators.

Now you can specify IE specific rules using .ie ancestor.

get some .ie #whatever{position:relative;} going on and put those boxes where they're supposed to be!

Not sure but try this out in your CSS do

body
{
    padding:0;
    margin:0;
}

http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp

alternatively would like to see some code as posted by others.

use:

display: inline;

Hope this helps.

Try removing margin-top: from #background and instead add a clear:both or clear:right for #background.

Generally speaking, especially for IE7, but for better practice anyway, always specify all sides w/padding or margin...in other words don't just use margin-top:?px (? for whatever) and assume the rest is fine. Better to use margin:?px 0 0 0 or whatever values.

Another general idea, especially with IE 7 and below is to not use margin and padding on the same element.

Also, anything floated needs a width and as to the double-margin bug, it only occurs when you have margin on the same side as the side the element is floated.....so if you're declaring float:right on something, you don't want to have margin: 0 20px 0 0 on the same thing... it will get doubled. Better to use padding on the containing element.

来源：https://stackoverflow.com/questions/4475416/ie7-display-issues-adding-extra-top-margin

标签

html

css

internet-explorer

internet-explorer-7