Problème de padding avec text-align:right sous IE

**Oluha** · 07/02/2007, 10h11

Salut

J'ai un petit soucis d'affichage aussi bien sous IE6 que IE7 : j'ai un div avec comme propriété text-align:right seulement on dirait qu'il applique un padding sur la droite. J'ai beau préciser que le padding et les marges doivent être à 0, mon texte n'est pas collé au bord droit.

Je n'ai pas ce problème sous FF, Netscape ou Opera.

Je n'ai rien trouvé en cherchant sur le forum et sur google, y aurait-il néanmoins une astuce ?

Merci

**Bisûnûrs** · 07/02/2007, 10h17

Sur IE, lorsque tu sélectionnes ton texte incriminé, est-ce que la sélection prend aussi l'espace en cause ?

Si non, peux-tu mettre un morceau de code qui reproduit le problème ?

Si oui, passe ton texte en display:block et je pense que ça fera l'affaire ...

**Oluha** · 07/02/2007, 10h32

non il n'y a pas d'espace quand je sélectionne le texte et j'ai essayé de mettre une bordure au div conteneur et il me semble bien qu'il y ait une sorte de padding à droite (alors que si j'aligne le texte à gauche il est bien collé au bord du div).

Voici le morceau de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<tr valign="top">
	<td style="background-color:#F8EFDE; border-right: 1px solid #E6BA6D; width: 25%; margin: 0; padding: 0;">
		<div style="height:35px; ">&nbsp;</div>
		<div style="text-align: right; font-size:24px; font-style:italic; color:#E6BA6D; font-weight:bold;">Cond</div>
		<div id="compl2"></div>
	</td>
	<td style="background-color:#F7E8D1; border-right: 1px solid #E6BA6D; width: 25%">
		<div style="height:35px; ">&nbsp;</div>
		<div style="font-size:24px; font-style:italic; color:#E6BA6D; font-weight:bold ">itions :</div>
	</td>

La page : http://www.magnificat.com/magnificat...promouvoir.asp

J'ai donc sous IE est espace après le "d" de "conditions" que j'ai coupé en 2 dans mon tableau.
Pour préciser, j'utilise un tableau pour le contenu que j'aurai dedans après, là c'est juste que j'avais pas trop envie d'utiliser un calque par dessus pour "conditions".

**Bisûnûrs** · 07/02/2007, 11h13

Et pourtant, si, il y a un espace sur IE :

Je pensais qu'en mettant display:block ça arrangerait le problème étant donné que c'est ce qui se passe pour une image, mais pour du texte ce n'est pas le cas ..

Exemple tout con :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body>
Mon texte
</body>

Quand tu triple-cliques sur le texte pour sélectionner, non pas juste le texte mais toute la ligne, tu vois que IE génère un espace après le texte ...

**Oluha** · 07/02/2007, 11h17

Bizarre car quand je sélectionne sous IE7, la sélection s'arrête pile après le "d"

Bon je sens que je vais devoir utiliser un calque plutôt que de faire comme ca quoi

**Bisûnûrs** · 07/02/2007, 11h23

Et quand tu essaies de sélectionner "Conditions" en entier ?

**Oluha** · 07/02/2007, 11h27

j'ai bien un blanc après le "d"

**Bisûnûrs** · 07/02/2007, 11h38

Ben écoute, je sais comment résoudre le problème quand c'est une image, mais avec du texte, non.

**Oluha** · 07/02/2007, 11h40

Ok ben tant pis je vais utiliser un calque et mettre par dessus mon tableau, merci quand même

**Bisûnûrs** · 07/02/2007, 11h42

Ca m'intrigue quand même, je vais continuer à chercher.

Si quelqu'un a la solution, qu'il la fasse savoir. =)

**Candygirl** · 07/02/2007, 14h13

C'est l'utilisation de l'italique qui pose quelques problèmes à IE. Plus d'info ici:
http://www.positioniseverything.net/...licbug-ie.html

Perso je ne me prendrais pas trop la tête avec ce genre de bug; si je devais mettre un texte en italique aligné à droite, je crois que j'ajouterais simplement un margin-right:-0.25em; à mon texte juste pour IE.

Par contre, dans ton cas, je monterais les choses différement. Tu coupes ton mot pour des questions graphiques; ce n'est pas une bonne option niveau accessibilité et sémantique.

**Oluha** · 07/02/2007, 14h18

oui j'ai utilisé un calque finalement, par contre je n'avais pas pensé que ca pouvais venir de l'italique et c'est interressant à savoir.

Problème de padding avec text-align:right sous IE

CSS

Discussions similaires

Partager

Partager