28173 sujets

CSS et mise en forme, CSS3

Text-indent différent sous IE ?

Bonjour,

J'ai des paragraphes avec des text-indent, je vérifie et tout est pareil sous chaque navigateur.

J'ai un titre en haut de ma page dans un h1 et je lui ai appliqué un text-indent, car je voulais éviter d'utiliser margin-left qui m'empêchait de mettre mon width à 100% sous IE. Je désirais de plus une précision en pixels car le texte sera à côté d'un éventuel logo.

text-indent semblait donc être l'outil idéal pour décaler mon texte, mais je me suis rendu compte que, contrairement aux paragraphes, le texte était plus décalé sous IE.

Je compare donc les deux codes ci-dessous.

h1 {
	height: 100px;
	width: 100%;
	[#red]text-indent: 50px;[/#]
	font-size: 2em;
}

p {
	padding: 1em;
	line-height: 1.5em;
	text-align: justify;
	[#red]text-indent: 10px;[/#]
}


Est-ce que quelqu'un a une idée d'où cela peut provenir ?
C'est assez bizarre quand même... aucun problème ailleurs.

Je mentionne qu'en copiant le style du p à celui du h1, le problème reste.
Dans mes paragraphes, il y a cependant plus de texte. Peut-être que la justification oblige IE à bien coller le début des lignes. Je ne sais pas en fait...

Enfin bref,
Merci d'avance,
D@n!eL
Modifié par D@n!eL_ (07 May 2006 - 05:53)
Pour le h1 tu auras un retrait de première ligne à gauche de 50px,
pour le p tu auras un retrait de première ligne à gauche de 10px + 1em.

Qu'est-ce que tu voudrais exactement comme rendu ? Un alignement vertical du texte du h1 et du texte de première ligne des paragraphes ?
Modifié par mpop (07 May 2006 - 11:25)
Pour les paragraphes, c'est OK.
L'espace entre la bordure et la première ligne de texte est la même sous tout les navigateurs.

Pour le H1, l'espace entre la bordure est mon titre est différente sous IE des autres navigateurs. Elle est un peu plus grande, dans un rapport d'environ 1,5.

Ce que je voudrais, c'est savoir pourquoi un text-indent de 50px en donne un de 75px sous IE.
Le padding est déjà défini à 1em pour tous les navigateurs et le margin à 0 grâce au sélecteur universel.

Merci d'avance,
D@n!eL
Après quelques tests, c'est plutôt un rapport de 2.
Pour avoir le même rendu sous tous les navigateurs, je dois faire ça...

text-indent: 100px;
_text-indent: 50px;
ou
text-indent: 50px;
_text-indent: 25px;


Ça serait tout de même intéressant de comprendre pourquoi et si ce bug existe également dans les autres versions d'IE.
J'ajoute que dans mes paragraphes, un text-indent de 25px est identique sous tous les navigateurs.
Modifié par D@n!eL_ (07 May 2006 - 18:21)
Hello hello,

Je viens de faire le test dans une page vide de tout autre chose qu'un titre et un paragraphe avec le css donné : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test bidouille</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

h1 {
	height: 100px;
	width: 100%;
	text-indent: 50px;
	font-size: 2em;
}
p {
	padding: 1em;
	line-height: 1.5em;
	text-align: justify;
	text-indent: 10px;
}
</style>
</head>
<body>
<h1>ceci n'est pas un titre</h1>
  	  <p>Ceci n'est pas un paragraphe.</p>
</body>
</html>


Et tout s'affiche bien sous FF et IE.

Donc à mon avis, y'a un ensemble de choses qui donne ton bug final.
Bonne recherche. Smiley smile

Aymeric,
C'est effectivement un problème semblable, mpop.

J'ai omis quelques détails dans mon code...
Je vous les donne maintenant.

/*******************************/
/* centered vertical alignment */
/*******************************/

span#container {
	display: inline-block;
	height: auto;
	vertical-align: middle;
}

span[ id]#container { /* espace voulu à cause des smileys du forum 8-) */ !
	display: table-cell;
	height: 100px;
	vertical-align: middle;
}

span#edge { 
	display: inline-block;
	width: 0; 
	height: 100%;
	vertical-align: middle;
} 

h1 {
	text-indent: 100px;
}

			
<h1>
	<span id="edge"></span>
	<span id="container">test</span>
</h1>
Mon titre est ainsi verticalement centré sous tous les navigateurs, ce qui ne fut pas tâche facile... ce fut encore plus compliqué de le centrer horizontalement sous Mozilla dans le cas de mon pied de page mais j'ai finalement réussi à l'aide d'un display en table (ne me demandez surtout pas pourquoi).

Si j'enlève le premier <span>, le problème est réglé mais mon titre n'est plus centré verticalement.
J'ai regardé un peu le site anglais et ses liens relatifs que mpop m'a proposés.
Je n'ai cependant aucun float dans mon h1, et appliquer la valeur inline à la propriété display brise complètement l'assemble de mon site.
Peut-être qu'une autre technique de centrage vertical serait de mise...

Merci d'avance,
D@n!eL
Modérateur
bonjour,

pour centrée une SEULE ligne verticalement , il suffit d'appliqué un line-height equivalent a la hauteur de sa boite.

Le css pour span#container indiqué pour IE, est inutile me semble t-il, dans IE il devrait s'aligné sur le span#edge qui est justement la pour ça .

Cela fonctionne pour des element en "ligne" et pour une ligne, ce serait une alternative pour des boites dont on ne connait pas la hauteur.


En reprenant alors le code de AymericJ (en remplaçant le p par une balise de type inline ou tout simplement en mettant le texte directement dans le titre . Il suffit d'appliquer a h1 un 
line-height:100px;

et l'unique ligne du titre se verra afficher a mi chemin du haut et du bas .
C'est dans la faq Smiley smile .

Peut tu mettre une page en ligne ou le code d'une page avec le bug en evidence pour le text-indent ?



++

<edit>
un petit test concernant le padding 1em , 1em c'est la taille de la police de l'element concerné Smiley smile 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test bidouille</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {padding:0 1em;margin:0;}
</style>
</head>
<body>
<h1>titre 1</h1>
<p>paragraphe ou sous-zone .</p>
<h2>titre 2</h2>
<p>paragraphe ou sous-zone .</p>
<h3>titre 3</h3>
<p>paragraphe ou sous-zone .</p>
<h4>titre 4</h4>
<p>paragraphe ou sous-zone .</p>
<h5>titre 5</h5>
<p>paragraphe ou sous-zone .</p>
<h6>titre 6</h6>
<p>paragraphe ou sous-zone .</p>
</body>
</html>

voici une premiere piste sur le decallage des titres (et des paragraphes) mais qui ne reproduit pas ton "doublage" du text-indent.
Fait tu usage des pseudos element , genre "first-letter" ou "first-line" ou du "letter-spacing" qui induisent parfois quelques erreurs d'interpretations dans IE ?
Modifié par gcyrillus (09 May 2006 - 02:00)
Le truc du line-height pour aligner un élément au centre verticalement, ça ne fonctionne pas avec les images. Elles restent égoïstement collées sur la bordure du haut.

Je crois que je vais simplifier tout ça, puisque je connais la hauteur de mon bloc je n'ai qu'à m'arranger avec les padding. Ça fera une douzaine de mesures à changer si je veux agrandir mon bloc, mais avec PHP on va raccourcir ça.

De cette façon je règle tous les problèmes du même coup...
Sujet clos
Aller à