Problème carte (sous IE)

[alfanor]

Bien le bonjour à tous

Alors voilà, avec tous les topics sur les cartes, j'ai réussit à faire une carte pour mon jeu de gestion/guerre, le seul problème (hormis le faites que le design soit laid et que les images affichés ne soient pas les images finales mais juste des images de test) c'est que sous IE il y a quelques problèmes.

Voici la façons dont est présentés ma carte pour le moment et comment elle s'affiche sous Mozilla Firefox :



Et voici comment elle s'affiche sous Internet Explorer :



Comme vous pouvez le voir la flèche permettant de se déplacer de 1 sur l'axe des ordonnées (y) est collé à gauche, et les chiffres indiquant les coordonnées des différentes cases sont coupés à la moitié de leur hauteur ... Et je ne voit pas du tout pourquoi sa fait sa, aussi je vient vous demander votre aide sur ces deux points qui sont d'une assez grande importances à cause du nombre de personnes utilisant Internet Explorer comme navigateur.


Bien sûr pour vous aider voici la partit du code qui affiche ma carte :

Code PHP :

        <a style="margin-left: 279px;" href="carte.php?action=y&amp;sens=pos&amp;aymax=<?php echo $y_fin; ?>&amp;axmax=<?php echo $x_fin; ?>"><img src="images/fleche_haut.gif"/></a>
        <a style="float: left; margin-left: 75px; margin-top: 173px;" href="carte.php?action=x&amp;sens=neg&amp;aymax=<?php echo $y_fin; ?>&amp;axmax=<?php echo $x_fin; ?>"><img src="images/fleche_gauche.gif"/></a>
        <a style="float: right; margin-right: 77px; margin-top: 173px;" href="carte.php?action=x&amp;sens=pos&amp;aymax=<?php echo $y_fin; ?>&amp;axmax=<?php echo $x_fin; ?>"><img src="images/fleche_droite.gif"/></a>
        
        <div id="carte">
            <table>    
                <tr>
                    <td></td>
        
                    <?php
                    /* On fait une boucle permettant d'afficher les coordonées sur l'axe des abscisses (x) */
                    for($x = $x_debut; $x <= $x_fin; $x++)
                    {
                    ?>
                        <td style="height: 20px; text-align: center; padding: 0px;"><?php echo $x; ?></td>
                    <?php
                    }
                    ?>
                    
                </tr>
                
                <?php
                /* Cette partie du code permet d'afficher la carte */
                for($y = $y_fin; $y >= $y_debut; $y--)
                {
                ?>
                    <tr>
                        <td style="width: 20px; text-align: center; padding: 0px;"><?php echo $y; ?></td>
                        
                        <?php
                    
                        for($x = $x_debut; $x <= $x_fin; $x++)
                        {    
                            /* Si la position actuelle est égale à la position du joueur alors on fait la requête permettant de sélectionner les informations sur le château du joueur
                            et l'on affiche l'image de château */
                            if($x == $position_x && $y == $position_y)
                            {
                                $informations_village = mysql_query("SELECT nom, joueur, habitant FROM village WHERE x = '" . $x. "' AND y = '" . $y . "'") or die(mysql_error());
                                $informations = mysql_fetch_array($informations_village);
                            ?>
                                <td><img onmouseover="Cellule_chateau('<?php echo $informations['joueur']; ?>', '<?php echo $informations['nom']; ?>', '<?php echo $informations['habitant']; ?>');" onmouseout="Cellule_chateau('-', '-', '-');" src="images/case_chateau.gif"></td>
                            <?php
                            }
                            
                            /* Sinon on vérifie ce qu'il y a à l'emplacement de la case */
                            else
                            {
                                /* S'il existe une entrée dans le tableau des cases ressources ayant pour coordonée les valeurs actuelle de X et Y alors on affiche une case ressource
                                et l'on effectue une requête permettant de tirer les informations nécéssaires au tableau de ressource */
                                if(!empty($tableau_ressource[$x][$y]))
                                {
                                    $informations_ressource = mysql_query("SELECT ressource, nbr_exploitation, nbr_exploitation_max FROM cases WHERE x = '" . $x . "' AND y = '" . $y . "'") or dir(mysql_error());
                                    $informations = mysql_fetch_array($informations_ressource);
                                ?>
                                    <td><img onmouseover="Cellule_ressource('<?php echo $informations['ressource']; ?>', '<?php echo $informations['nbr_exploitation']; ?>', '<?php echo $informations['nbr_exploitation_max']; ?>');" onmouseout="Cellule_ressource('-', '-', '-');" src="images/case_chateau.gif"></td>
                                <?php
                                }
                                
                                else
                                {
                                    /* S'il existe une entrée dans le tableau des cases château ayant pour coordonée les valeurs actuelle de X et Y alors on affiche une case château
                                    et l'on effectue une requête permettant de tirer les informations nécéssaires au tableau des châteaux */
                                    if(!empty($tableau_chateau[$x][$y]))
                                    {
                                        $informations_village = mysql_query("SELECT nom, joueur, habitant FROM village WHERE x = '" . $x. "' AND y = '" . $y . "'") or die(mysql_error());
                                        $informations = mysql_fetch_array($informations_village);
                                    ?>
                                            <td><img onmouseover="Cellule_chateau('<?php echo $informations['joueur']; ?>', '<?php echo $informations['nom']; ?>', '<?php echo $informations['habitant']; ?>');" onmouseout="Cellule_chateau('-', '-', '-');" src="images/case_chateau.gif"></td>
                                    <?php
                                    }
                                    
                                    /* Sinon c'est que la case est vide alors on affiche juste une image vide */
                                    else
                                    {
                                    ?>
                                        <td><img src="images/case_vide.gif"></td>
                                    <?php
                                    }
                                }
                            }
                        }    
                    ?>
                    </tr>
                    <?php
                }
                 ?>
            </table>        
        </div>
        
    <a style="margin-left: 279px;" href="carte.php?action=y&amp;sens=neg&amp;aymax=<?php echo $y_fin; ?>&amp;axmax=<?php echo $x_fin; ?>"><img src="images/fleche_bas.gif"/></a><br/><br/> 


Et voici aussi les parties du code css les plus utilisés pour le tableau (la carte donc) :

Code :

/* La carte */

#carte
{
    border: 0px;
}

#carte table
{
    border-collapse: collapse;
    margin-bottom: 3px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0px;
}

#carte tr
{    
    border-collapse: collapse;
}

#carte td
{
       border: 1px solid #5c9859;
    padding: 0px;
    margin: 0px;
    line-height: 0px;
}

Bon voilà je pense avoir donné tous le nécéssaire pour que vous puissiez comprendre le problème et peut être m'aider à le résoudre, au passage si vous voyez des choses à optimiser dans le code n'hésitez pas à m'en faire part (en principe je n'ai pas du tout cherché à l'optimiser celui-ci ^^), donc voilà merci d'avance pour votre aide

[naholyr]

Ce n'est pas un problème de PHP mais plutôt de HTML/CSS (voire JS), est-ce que tu peux nous donner le code généré par ta page (afficher source) plutôt que le script php ?

[alfanor]

Pas de problème je fais sa tout de suite (j'édite ce post)

Code PHP :

        <a style="margin-left: 279px;" href="carte.php?action=y&amp;sens=pos&amp;aymax=3&amp;axmax=3"><img src="images/fleche_haut.gif"/></a>
        <a style="float: left; margin-left: 75px; margin-top: 173px;" href="carte.php?action=x&amp;sens=neg&amp;aymax=3&amp;axmax=3"><img src="images/fleche_gauche.gif"/></a>
        <a style="float: right; margin-right: 77px; margin-top: 173px;" href="carte.php?action=x&amp;sens=pos&amp;aymax=3&amp;axmax=3"><img src="images/fleche_droite.gif"/></a>
        
        <div id="carte">

            <table>    
                <tr>
                    <td></td>        
                    <td style="height: 20px; text-align: center; padding: 0px;">-3</td>
                    <td style="height: 20px; text-align: center; padding: 0px;">-2</td>
                    <td style="height: 20px; text-align: center; padding: 0px;">-1</td>
                    <td style="height: 20px; text-align: center; padding: 0px;">0</td>
                    <td style="height: 20px; text-align: center; padding: 0px;">1</td>
                    <td style="height: 20px; text-align: center; padding: 0px;">2</td>
                    <td style="height: 20px; text-align: center; padding: 0px;">3</td>                                        
                </tr>
                
                <tr>
                    <td style="width: 20px; text-align: center; padding: 0px;">3</td>
                    <td><img src="images/case_vide.gif"></td>    
                    <td><img src="images/case_vide.gif"></td>    
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img onmouseover="Cellule_ressource('pierre', '0', '5');" onmouseout="Cellule_ressource('-', '-', '-');" src="images/case_chateau.gif"></td>
                    <td><img onmouseover="Cellule_ressource('bois', '0', '5');" onmouseout="Cellule_ressource('-', '-', '-');" src="images/case_chateau.gif"></td>
                </tr>
                <tr>
                    <td style="width: 20px; text-align: center; padding: 0px;">2</td>                    
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img onmouseover="Cellule_chateau('test1', 'test', '28');" onmouseout="Cellule_chateau('-', '-', '-');" src="images/case_chateau.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                                </tr>
                <tr>
                                  <td style="width: 20px; text-align: center; padding: 0px;">1</td>
                         <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                                </tr>
                <tr>
                    <td style="width: 20px; text-align: center; padding: 0px;">0</td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img onmouseover="Cellule_chateau('fingolfin', 'liashnal', '53');" onmouseout="Cellule_chateau('-', '-', '-');" src="images/case_chateau.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                </tr>
                <tr>
                    <td style="width: 20px; text-align: center; padding: 0px;">-1</td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                        <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                </tr>
                <tr>
                    <td style="width: 20px; text-align: center; padding: 0px;">-2</td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>                                           </tr>
                                <tr>
                    <td style="width: 20px; text-align: center; padding: 0px;">-3</td>
                              <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                    <td><img src="images/case_vide.gif"></td>
                </tr>
            </table>        
        </div>

                
    <a style="margin-left: 279px;" href="carte.php?action=y&amp;sens=neg&amp;aymax=3&amp;axmax=3"><img src="images/fleche_bas.gif"/></a><br/><br/> 


Voilà donc cette partie c'est celle qui affiche toutes les cases ainsi que les flèches de déplacements.

ps: je suis désolé pour la présentation du code mais c'est pas simple de bien placé avec les forums ^^ (==> bon j'ai réussi à ce qu'il ressemble tout de même à quelque chose de convenable ^^)

[Korfuri]

Pour avoir eu des problèmes similaires (quelle vérole, l'existence de plusieurs navigateurs ) je crois me souvenir que c'est un probleme avec l'attribut "position" qu'il faut mettre à "absolute" si ma mémoire est bonne

[alfanor]

Rah flut, faudras donc que je test sa en rentrant (je part six jours la), mais à ce que je me rapelle, j'ai déjà testé sa, mais en mettant en absolute on va dire que tout se chevauche (enfin je retesterais pour voir ^^)