How to overcome IE7 padding issues?_问答_开发者

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, Safar开发者_如何转开发i 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.

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

EDIT

The best way to fix an IE only problem (and there are many IE only problems, esp. in 6+7) is using the "feature" of IE which lets you conditionally include style information only for IE.

Described with an example here: http://dustinbrewer.com/css-trick-target-only-ie-with-an-if-statement/

A prior version of my answer pointed out a "quick fix hack" for IE that would just include one style element in IE. As has been pointed out in the comments there are a lot of reasons not to do it this way, its only positive aspect being that it is quick:

Prior version of answer follows

I would use the IE underscore hack to fix this, here is the first link I found about it:

http://dustinbrewer.com/weekly-css-trick-the-ie-underscore-hack/

Basically you put an underscore before a css attribute and only IE6 and IE7 will use that attribute. So you could do something like _right -34px and it would only effect IE pre version 8.

or in this case change it to have

  padding-left:315px;
  _padding-left:122px;

the first will effect all other browsers and 2nd row will cascade only for IE

On the surface, your CSS seems fine. Would be useful to see all of your CSS, especially that which applies to body, but it seems to be a parent element problem. Try setting a fixed or percentage width for your div#spotlightHolder.

Try Eric Meyer's CSS reset tool instead of wasting your time focusing on IE's quirks.

http://meyerweb.com/eric/tools/css/reset/

And why not assign the 550px width to .spotlightholder so it's inherited?

I really like blueprint to do css reset.

It Makes getting consistent layout cross browser very easy and is fairly widely used.