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
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 !
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:
- Probleme de CSS avec IE
- Ie tab - Télécharger - Outils pour navigateurs
- Ie 11 - Télécharger - Navigateurs
- Google payment ie dublin ✓ - Forum Consommation & Internet
- Ie 9 - Télécharger - Navigateurs
- Trait css ✓ - Forum CSS
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
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 à:
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 >
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
7 sept. 2007 à 13:12
salut,
et avec css pour éviter le dépassement ?
si tes '<td>' ont une taille fixe essaie d'ajouter :
et avec css pour éviter le dépassement ?
si tes '<td>' ont une taille fixe essaie d'ajouter :
td
{
overflow: hidden;
}
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
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
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
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>:
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.
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
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
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
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
7 sept. 2007 à 15:19
et forcer le width dans le img, ça fonctionne pas??
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
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.
tu pourrais mettre l'image en image de fond du '<td>', comme ça pas de déformation.
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
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.
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>
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
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.
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.
