How to overcome IE7 padding issues?

html css internet-explorer-7

20,334

Make sure you don't have any spaces/chars before doctpye declaration.

Also, it may be something about margin collapse (but I can't tell you right now, I just woke up and I'm a more like a zombie right now :D )

However, you didn't tell us if the page is valid. You may also have some nested elements out there. So I think the best thing is to put it online and give us the link :)

20,334

Author by

Geo

I have been exchanging knowledge for over 11 years, StackExchange just makes it easier. Come and find out which other SE sites I collaborate. Follow me on Twitter.

Updated on February 23, 2020

Comments

Geo about 4 years

IE7 is driving me crazy. I know is a small thing, but I don't know what else to google, and I know I am missing something very small.

<div id="spotlightHolder">
<div id="spotlight">
    <div id="spotlightMessage">
        <h1 id="spotlightTitle">Lorem ipsum dolor sit amet.</h1>
        <p id="spotlightDescription">Lorem ipsum dolor, consectetur adipiscing elit. Curabitur massa mi, pharetra vitae luctus at, rutrum posuere quam. Integer pharetra tincidunt vehicula. Vestibulum nec purus id purus sodales hendrerit sit.</p>
        <a id="spotlightBotton" href="#" title="Click here to get our Special"></a>
    </div>
</div>
</div>

The css for the code above is:

div#spotlightHolder
{
    background:url(../images/below-menu-gradient.jpg) repeat-x;
    height:100%;
    padding:34px 0 0 0;
}

div#spotlight
{
    height:325px;
    background-color:#00aff0; /* Sky blue */
    background: rgb(0,175,240) url('../images/spotlight.jpg') no-repeat center center;
}

div#spotlightMessage
{
    width:550px;
    height:210px;
    /*margin:0 0 0 315px;*/
    /*padding:70px 0 0 315px;*/
    /*margin:0;*/
    padding-top:70px;
    padding-left:315px;
    text-align:left;
}

div#spotlightMessage p
{
    font-size:22px;
    font-weight:bolder;
    margin:0 0 10px 0;
}

div#spotlightMessage h1#spotlightTitle
{
    color:White;
    font-size:35px;
    margin:0 0 17px 0;
}

The outcome of all the above is that in IE7 the text block inside the div id=spotlight is farther right in comparison with FF, Chrome, Safari or even IE8. Could anyone spot the error?

Thanks, Geo

NOTES: I am using YUI CSS Reset library, since an SO question suggested this for a similar error, but this did not fix the error.

NOTE 2: I am using doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IMPORTANT NOTE:

By adding margin-right:400px to the div#spotlightMessage on the CSS the IE7 issue was fixed. Since I don't know why this behavior is happening, I will mark the first person that gives an explanation with votes as the accepted answer. Thanks for all your help.