CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Geo
Geo

Reputation: 8761

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

Upvotes: 2

Views: 20363

Answers (5)

Dan Lord
Dan Lord

Reputation: 6191

I really like blueprint to do css reset.

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

Upvotes: 0

bcosca
bcosca

Reputation: 17555

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?

Upvotes: 0

Ionuț Staicu
Ionuț Staicu

Reputation: 22164

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

Upvotes: 1

Tom
Tom

Reputation: 30698

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.

Upvotes: 0

Hogan
Hogan

Reputation: 70523

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

Upvotes: 0

Related Questions