2009-04-22 6 views
1

Y at-il une alternative propre qui ne fait pas disparaître le texte dans ce qui suit:Existe-t-il une alternative au remplissage pour IE qui ne fait pas disparaître le texte?

<div style="background-color:#ddd; padding:10px 0 50px 0;"> 
<ol><li>In what year were you born?</li></ol> 
<div><select name="c_record" size="1"> 
    <option value="">-- Select One --</option> 
    <option value="1">1900</option> 
    <option value="2">1902</option> 
</select></div> 
</div> 

Si je change le rembourrage sur la div à l'extérieur: padding:10px 0 0 0; le texte apparaît à nouveau.

J'ai également essayé d'ajouter un second div à l'intérieur du div le plus éloigné et d'y ajouter le padding, mais ça ne marche pas non plus. Ajouter une marge à ce div intérieur n'a aucun effet sur les marges supérieure et inférieure.

Des idées?

Edit: J'utilise IE 6 & 7 et j'ai pas d'autre code sur la page, pas doctype, - juste le stylesheets code ci-dessus.

+0

J'ai copié le code ci-dessus dans un fichier HTML et le problème ne se produit pas dans mon IE7. Utilisez-vous une autre version, comme IE6 ou 8? – Cyberherbalist

+0

Lors de l'utilisation d'IE7 et de l'absence de doctype spécifié, IE suppose qu'il doit utiliser un moteur de rendu compatible IE6. – voyager

Répondre

3

Ajout de la position: relative; à votre style va résoudre ce problème. C'est ce qu'on appelle affectueusement le bug Peekaboo.

Here est un lien qui l'explique dans un peu plus de détails.

Je serais d'accord que vous devriez juste essayer d'utiliser la marge bien que depuis l'ajout de position: relative peut causer d'autres problèmes. En outre, les navigateurs ne suivent pas systématiquement la norme du modèle de boîte avec rembourrage.

+0

Malheureusement, le padding et la marge le cassent ou ne fonctionnent pas quand dans l'autre div sans le rembourrage. Le parent le fixe et pour la page sur laquelle il est, rien d'autre ne flotte, alors nous devrions être bons ... jusqu'à ce que je décide de flotter quelque chose. –

+1

Si vous flottez quelque chose, vous pouvez toujours utiliser la hauteur: 1% pour fournir le même correctif. –

0

Essayez la marge au lieu du rembourrage?

+0

La marge ne fonctionne pas car j'ai besoin de l'arrière-plan pour apparaître. –

+0

Vous pouvez toujours utiliser des marges et avoir un div en dessous de celui qui contient l'arrière-plan. – Samuel

+0

essayé, mais il a causé le même problème (mis à jour la question). –

0

Sont-ce les seuls styles? S'il y a quoi que ce soit de flottant, les choses se compliquent rapidement. S'il vous plaît essayez ceci dans son propre fichier avec seulement le doctype, html, tête, etc. Il n'y a rien de mal à ce qui précède, en isolation.

+0

J'ai tout enlevé sur la page, donc il n'y a que ça, pas d'autres feuilles de style, tapez doc, rien ... juste ça. –

0

J'utilise IE 6 & 7 et je ne autre code sur la page, pas doctype, - juste le stylesheets code ci-dessus.

Il est juste stupide d'essayer de résoudre des problèmes en laissant IE par défaut en mode quirks.

Dans tous les cas, @Jeremy B a une bonne solution avec la hauteur: 1%. Cela fonctionne très bien pour moi dans IE6:

<div style="background-color:#ddd; padding:10px 0 50px 0; height: 1%;"> 
+0

Sur la page avec le reste du HTML, elle ne fonctionne pas non plus correctement et ne fonctionne pas en mode Quirks. C'était purement pour tester si c'était quelque chose d'autre ou tout simplement la façon dont IE fonctionne. –

+0

Est-ce qu'un 'height: 1%' ou un autre 'haslayout' fonctionne sur votre page?Ou dans votre exemple, ci-dessus? – Traingamer

Questions connexes