Probleme de CSS avec IE

Fermé
blacklemming Messages postés 3 Date d'inscription vendredi 7 septembre 2007 Statut Membre Dernière intervention 7 septembre 2007 - 7 sept. 2007 à 10:35
thifoolish Messages postés 79 Date d'inscription jeudi 11 janvier 2007 Statut Membre Dernière intervention 11 juillet 2008 - 7 sept. 2007 à 17:37
J'ai créé un mini jeu en ligne, genre baston HTML de goblins, seulement sous Internet Explorer l'affichage est tout déformé.

Le jeu se présente sous forme d'une grille où l'on peut se déplacer, et sur cette grille il y a des <DIV> superposés en "position:relative" avec un "z-index", le Hic c'est que dans ces DIV il y a des images parfois plus grandes que les cases, et sous Internet Explorer, les cases <TD> sont agrandies à la taille des images contenues dans les <DIV> pourtant "détachés".

Je précise que sous Firefox ça marche très bien, grrr une idée ? j'ai temporairement mis en surbrillance les cellules du tableau, pour faciliter le diagnostic :

http://t4c.abominationt4c.com/index.php?p=Gobwars

Merci de votre aide si vous avez une idée !
A voir également:

8 réponses

Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
7 sept. 2007 à 10:59
Hello!

Joli ton jeu ^^

Bon le code source est un peu bordélique à l'affichage par contre, pas d'alinea, donc pas facile à déboguer...

Ca ne résoudra pas ton problème, mais tu as oublié des guillemets à:
<table width="792" border=0 cellpadding=0 cellspacing=0>
et à:
<table class=mainmenu cellpadding=0 cellspacing=0>
<tr height=26>
et aussi:
<img src=gobwars3/pics/tree.gif >
1
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
7 sept. 2007 à 13:12
salut,

et avec css pour éviter le dépassement ?

si tes '<td>' ont une taille fixe essaie d'ajouter :
td
{
overflow: hidden;
}

1
blacklemming Messages postés 3 Date d'inscription vendredi 7 septembre 2007 Statut Membre Dernière intervention 7 septembre 2007
7 sept. 2007 à 11:17
J'ai ajouté des sauts de lignes dans le code HTML histoire que ce soit plus lisible, j'ai aussi ajouté les double-quotes qui manquaient, merci de ton aide, si tu as d'autres pistes je suis toujours preneur :p
0
Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
7 sept. 2007 à 12:58
C'est beaucoup mieux le code source aéré ^^

J'ai l'impression que ça déconne à cause de l'image "tree" ; en fait les lignes qui sont plus hautes sont celles qui l'incluent. Cette image fait 180*200 px et tu la mets telle quelle dans une cellule de largeur 100px... essaye d'ajouter un attribut width="100" dans la balise <img>:
<img width="100" src="gobwars3/pics/tree.gif">
pour voir si ça change qqch.
0

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

Posez votre question
blacklemming Messages postés 3 Date d'inscription vendredi 7 septembre 2007 Statut Membre Dernière intervention 7 septembre 2007
7 sept. 2007 à 15:10
En "overflow :auto" sur les TD ca change rien par contre en "overflow : auto" sur les DIV ca me cache le contenu..

L'idée c'est de pouvoir placer dans une case de 100x100 pixels une image qui en fait 180x180 sans pour autant agrandir la case de 100x100, je veux pas le faire en positionnement absolute, car c'est trop la merde à faire
0
Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
7 sept. 2007 à 15:19
et forcer le width dans le img, ça fonctionne pas??
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
7 sept. 2007 à 15:48
tu as besoin absolument besoin de la balise '<img />' ?
tu pourrais mettre l'image en image de fond du '<td>', comme ça pas de déformation.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
7 sept. 2007 à 16:24
en fait, il faudrait commencer par nettoyer et ranger le html.
dans la séquence suivante il y a déjà des incohérences. '<table>' directement dans '<table>', '<th>' dans '<tr>'.
les styles sont codés en html ou embarqués ce qui ajoute à la complexité du code.
en plus tu n'as pas de DocType.
donc le rendu dans les navigateurs est forcement imprévisible et le débogage très difficile.
	<td width="11">
		<img width="11" src="img/v3/tabright_off.gif">
	</td>
</tr>
<table class=maintab>
	<tr>
		<td>
			<center>
			<font color=white>Come on ! Join the battle ! Login the website, and click Gobwars tab !</font>
			<br>
			<font color=white>
			<table class="outertable" width="600" cellpadding="0" cellspacing="0">
				<tr bgcolor="DD3333">
					<th colspan="3">
						<font color="#FFFFFF">Current scoring (kills/breed)</font>
					</th>
				</tr>
0
thifoolish Messages postés 79 Date d'inscription jeudi 11 janvier 2007 Statut Membre Dernière intervention 11 juillet 2008 18
7 sept. 2007 à 17:37
Bonjour,

Juste une information pour améliorer grandement la compatibilité avec les anciens navigateurs, il faut utiliser les css de cette manière :
.maClasse {
width:100px;
}
c'est-à-dire sans espace entre l'attribut css et sa valeur...

Le rendu d'Internet Explorer sera peut-être meilleur... en tout cas dans ses anciennes versions c'est une certitude.

Au revoir.
0