[css]erreur d'interpretation par IE

Résolu/Fermé
bezourox Messages postés 729 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 19 janvier 2013 - 7 juin 2007 à 12:07
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 7 juin 2007 à 17:09
bonjour.
voila j'ai un petit probleme dans mon fichier .css
en effet, je crée un style pour encadrer un tableau .
en voila le code :

table.cadre_sable_fonce {
border: 8px solid #b59681;
padding: 2%;
font : 14px Comic Sans MS; color : #000000

}

resultat sous firefox : tout OK
resultat sous Internet Exploreur : OK sauf le padding . Internet exploreur n'en tient pas compte et du coup mon texte touche le cadre a droite et a gauche .

Quelqu'un aurait la solution a ce probleme ?
A voir également:

8 réponses

tonnick Messages postés 8 Date d'inscription jeudi 31 mai 2007 Statut Membre Dernière intervention 15 août 2007
7 juin 2007 à 12:15
Salut,

Suis pas sur que le padding avec un % soit le top ... A mon avis, tu ferais mieux d'utiliser des valeurs en px ou em. Sinon, ba contourne en utilisant une class pour ton texte ;) Par ex :
.tableau {
margin: 10px;
font : 14px Comic Sans MS; color : #000000;
}

@+
0
bezourox Messages postés 729 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 19 janvier 2013 143
7 juin 2007 à 12:38
tinquite j'ai essayé déja avec les unités em et px mais ca change rien ... :s

ben merci pour ta solution je pense que je vais faire comme ca mais j'aurai bien voulu avoir l'explication de IE qui ne veut pas du padding ...
0
tonnick Messages postés 8 Date d'inscription jeudi 31 mai 2007 Statut Membre Dernière intervention 15 août 2007
7 juin 2007 à 12:48
Ba je sais que IE est extremement casse bonbon avec les padding en regle général. Apres ca m'étonnerai pas qu'il ne le gere pas pour les cellules d'un tableau.
cela dit, tu as essayé d'appliquer le padding non pas au "table" mais au "tr" ou "td", ce qui concerne plutot les cellules la ou tu vas mettre le texte ? du genre :

td.tableau {
margin: 10px;
font : 14px Comic Sans MS; color : #000000;
}
0
ben tu devrais déjà écrire comme ça:

table.cadre_sable_fonce {
border-style: solid;
border-width:8px;
border-color:#b59681;
padding: 3%;
font-size: 9pt;
font-family: Comic Sans MS;
color : #000000;
}

Y a des chances qu'il pige mieux.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
bezourox Messages postés 729 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 19 janvier 2013 143
7 juin 2007 à 12:58
bon merci pour vos propositions .
je vais les tester apres manger et je tiens au jus :)
bon app' a tous
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
7 juin 2007 à 12:58
salut,

pour les explications tu les trouveras ici.
dans le calcul de la taille, IE ajoute à tort le {padding}.

il faut apprendre à coder avec. pour les valeur en haut et en bas, en général pas de problème puisque la page s'étire (sauf hauteur fixe). le problème se pose le plus souvent avec les espacement latéraux. la solution : ne pas les utiliser…

essaie à la place de mettre une marge équivalente. si le rendu ne te convient pas (problème de couleur de fond par exemple) il faudra peut être revoir la structure de ton document html pour pouvoir faire ce que tu veux.

pour les unités tu peux garder une valeur relative en %. plus le design sera fluide mieux ce sera. tu devrais en faire de même avec les tailles de police (si possible et le mieux étant les em) pour que l'utilisateur puisse la faire varier selon ses besoins.

bon courage !
0
bezourox Messages postés 729 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 19 janvier 2013 143
7 juin 2007 à 14:56
re.
bon ca marche pas ... :s
je vais pas me peter le ***, je vais crer 2 <td> supplémentaire , un a droite, un a gauche, vides et avec une largeur fixe.
ca devrait marcher .
merci quand meme a tout le monde
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
7 juin 2007 à 15:01
as-tu essayé avec les marges ?
si tu appliques les marges à un élément en ligne as-tu penser à appliquer aussi {display:block;} ?

tu peux aussi tricher en utilisant les bordures et en leur donnant la même couleur que le fond.
0
bezourox Messages postés 729 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 19 janvier 2013 143
7 juin 2007 à 15:06
nan je t'avoue que la ca m'a bien saoulé donc je vais pas chercher plus
<tr>
<td width="10"></td>
<td>le texte qui ne touche plus les bordures du tableau mais celui de la cellule</td>
<td width="10"></td>
</tr>


c'est moche, mais ca marche et je vais pas passer ma vie sur du .css
^_^
puis je suis naze en css je paris qu'un mec calé me fait peter ca en 2 2 :)

merci a toi
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > bezourox Messages postés 729 Date d'inscription vendredi 30 mars 2007 Statut Membre Dernière intervention 19 janvier 2013
7 juin 2007 à 17:09
mouais…

c'est surtout que t'as pas dû essayer beaucoup !
-;o)

me dis pas qu'il faut être calé pour faire des essais comme ça :
<html>
	<head>
		<style type="text/css">
table{
border:1px dotted #333;
}
table tr{
background-color:blue;
}
table#t1 tr td{
margin:0 10px;
display:block;
background-color:orange;
}
table#t2 tr td span{
margin:0 10px;
display:block;
background-color:orange;
}
		</style>
	</head>
	<body>
		<table id="t1">
			<tr>
				<td>blablabla&hellip;</td>
			</tr>
		</table>
		<table id="t2">
			<tr>
				<td>
					<span>blablabla&hellip;</span>
				</td>
			</tr>
		</table>
	</body>
</html>

là il y a déjà deux solutions possibles.
0
C'est parce que ton padding doit dans ce cas se porter sur les cellules et non la table.

Sinon tu mets ta table en invisible dans un DIV (ce que font déjà la plupart des éditeurs), tu repportes ton style général sur le div et pour le reste tu fais un style pour tes cellules (ton histoire de padding ou une marge si tu préfères).

Donc tu auras un cadre général, que tu peux manier comme tu veux et placer ou tu veux (la table suivra) et tu gères tes cellules avec un style bien à elles. Et en plus IE pige le tout ;-)
0