Comment surmonter les problèmes de rembourrage IE7?

IE7 me rend fou. Je sais que c'est une petite chose, mais je ne sais pas quoi d'autre à google, et je sais qu'il me manque quelque chose de très petit.Comment surmonter les problèmes de rembourrage IE7?

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

Le code CSS pour le code ci-dessus est:

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; 
}

Le résultat de tout ce qui précède est que dans IE7 le bloc de texte à l'intérieur du div id = spot est juste plus en comparaison avec FF, Chrome , Safari ou même IE8. Quelqu'un pourrait-il repérer l'erreur?

Merci, Geo

NOTES: J'utilise la bibliothèque Reset CSS YUI, puisqu'une question SO a suggéré cela pour une erreur semblable, mais cela n'a pas résolu l'erreur.

NOTE 2: J'utilise DOCTYPE:

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

NOTE IMPORTANTE:

En ajoutant la marge droite: 400px à la div # spotlightMessage sur le CSS la question IE7 a été fixé . Puisque je ne sais pas pourquoi ce comportement se produit, je vais marquer la première personne qui donne une explication avec des votes comme réponse acceptée. Merci pour votre aide.

Source

2010-02-22 Geo

Combien plus loin à droite? 34px, ou autre chose? –

Environ 193px, donner ou prendre. Le 34px sur le div de support est pour le rembourrage supérieur, IE7 pousse le texte plus loin vers la droite. = ( – Geo

Avez-vous spécifié le doctype dans votre page? – jimyi

EDIT

La meilleure façon de résoudre un problème IE uniquement (et il y a beaucoup de IE que des problèmes, esp. En 6 + 7) utilise la « fonction » de IE qui vous permet d'inclure sous conditions informations de style uniquement pour IE.

Utilisons un exemple pour ici: http://dustinbrewer.com/css-trick-target-only-ie-with-an-if-statement/

Une version antérieure de ma réponse a souligné un « hack solution rapide » pour IE qui il suffit d'inclure un élément de style dans IE. Comme il a été souligné dans les commentaires il y a beaucoup de raisons de ne pas le faire de cette façon, le seul aspect positif étant qu'il est rapide:

version antérieure de réponse suit

J'utiliser la IE underscore hack pour résoudre ce problème, voici le premier lien que je trouve à ce sujet:

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

Fondamentalement, vous mettre un trait de soulignement devant un attribut css et seulement IE6 et IE7 utilisera cet attribut. Donc, vous pourriez faire quelque chose comme _right -34px et il serait seul effet IE version pré 8.

ou dans ce cas changer pour avoir

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

le premier effet sera tous les autres navigateurs et 2ème ligne sera en cascade seulement pour IE

Source

2010-02-22 01:24:30 Hogan

- 1 pour l'utilisation d'un hack. Hacks sont seulement acceptables si c'est la seule façon de cibler un navigateur, ce qui n'est pas le cas avec IE. Vous devez utiliser des commentaires conditionnels pour envelopper le bloc 'style' spécifique ou le' link' externe. – prodigitalson

Un risque d'utiliser ces hacks est que nous ne saurons jamais si un futur navigateur va aussi analyser les règles cachées par le hack. –

@Marcel ... et si un hack devient populaire et est largement utilisé, il peut en fait entraver la création de nouveaux navigateurs et/ou de spécifications CSS. Si le W3C voulait inclure une "syntaxe de soulignement" spéciale pour une raison ou une autre, il ne le pourrait probablement pas parce qu'il entrerait en conflit avec un hack populaire et ravagerait beaucoup de vieilles pages dans de nouveaux navigateurs essayant de suivre la nouvelle spécification. C'est à peu près comment nous avons fini avec le désordre de Quirksmode. – deceze

Sur la surface, votre CSS semble bien. Serait utile de voir tous vos CSS, en particulier ce qui s'applique au corps, mais il semble être un problème d'élément parent. Essayez de définir une largeur fixe ou en pourcentage pour votre div # spotlightHolder.

Source

2010-02-22 04:24:30 Tom

Assurez-vous que vous n'avez aucun espace/caractère avant la déclaration doctpye.

En outre, il peut être quelque chose effondrement de la marge (mais je ne peux pas vous dire en ce moment, je me suis réveillé et je suis plus comme un zombie en ce moment: D)

Cependant, vous n ne nous dites pas si la page est valide. Vous pouvez également avoir des éléments imbriqués là-bas. Essayez donc la mise en ligne et donnez-nous le lien :)

Source

2010-02-22 05:41:57

Essayez l'outil de réinitialisation CSS d'Eric Meyer au lieu de perdre votre temps à vous concentrer sur les caprices d'IE.

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

Et pourquoi ne pas attribuer la largeur 550px à .spotlightholder il est donc hérité?

Source

2010-02-22 22:28:29 stillstanding