Souci d'affichage sur IE et sur mozilla Résolu/Fermé

Question

Bonjour, 

Je viens ici car, la renommé de ce site m'est venu au oreilles, j'ai un souci d'affichage pour mon site internet.

J'ai fais mon site sur notpad++ et bien entendu avec google chrome HORS, quand je test avec IE ou mozilla PAF!! j'ai un de mes menus qui se place pas au bon endroit sachant que dans IE et mozzila ce menu s'affiche au même endroit.

Si vous avez une solution pour que je puisse régler ce problème je suis preneur.

Il s'agis seulement du menu rapide (soit le menu du haut)
Je ne peux pas mettre le lien de mon site car, il est encore en localhost.
L'hébergement avec nom de domaine est fais, reste plus qu'à attendre qu'il soit en ligne (sous 48H, je mettrais le lien ici pour que vous voyez mon souci plus précisément à moins que vous ayez une solution à mon problème).

Je vous remercie par avance pour vos solutions possible.

Ika Pro · Answer

up, une solution ?

Ika Pro · Answer

up, personne peut m'aider ?

astuces72 · Answer

slt

sans code tu veux que l'on fasse quoi ?

Ika Pro · Answer

Ah vi mince ^^ voila le code html : Voila code CSS : #menu1 { border: 6px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-top: 12px; width: 650px; margin-top: 30px; float: center; margin-top: 10px; clear: both; background-color: grey; opacity: 0.7; color: #6ed065 } Voila la partie qui me fait défaut sur IE et mozilla mais pas sur google chrome.

astuces72 · Answer

slt

c'est quoi le problème exact, sur chrome, ie et ff j'ai ça:
http://astuces72.free.fr/photoforum/Capture.JPG

Ika Pro · Answer

bin justement, tu as du voir que j'ai centré le menu mai ston affichage est différent que le mien car, sur mon IE le menu s'affiche un peu plus bas.

Moi je veux qu'il soit centré.

Mais le souci n'est pas sur chrome mais sur FF et IE ;) 
Sur chrom l'affichage est nikel vue que je l'ai fais avec lui le site.

astuces72 · Answer

par ordre de test
chrome
ie
ff
http://astuces72.free.fr/photoforum/Capture2.JPG

je n'arrive pas a comprendre 
tu parle de la hauteur des liens dans ton cadre ?

Ika Pro · Answer

en faite, se serais plus facile si mon site été déjà dispo en ligne mais il ne l'ai pas encore sa fais pas 48H d'après ce que le support technique me dis fin bref.

Je vais faire mieux, je vais faire la structure et te dire ce qu'il ne va pas.

Voila c'est plus claire comme ça ? http://nsa32.casimages.com/img/2012/11/13/121113023841369289.png

Ika Pro · Answer

dis moi si tu comprend pas, je pourrais te mettre l'image des 3 navigateurs que tu puisse comparer ;)

astuces72 · Answer

arf 

ah ba c'est plus pareil !!! 
il faut ton code entier et pas que ce morceau. 

au passage, ton site, il est comment dire...coloré :D

Ika Pro · Answer

vi ^^ très coloré
heu par contre,  mon code entie?? juste le code CSS ??

astuces72 · Answer

juste le code ne donnera rien, il faut voir la structure de tes div
en privé si tu veux :)

Ika Pro · Answer

pour te donner une idée sous FF : 
http://nsa31.casimages.com/img/2012/11/13/121113024351631329.png

sous IE : 
http://nsa32.casimages.com/img/2012/11/13/12111302462449421.png

tryan44 · Answer

Salut,

float: center;  
Je ne crois pas que ce style css existe ...

Ika Pro · Answer

Ah mais oui, il existe pas ce style tu aurais une solution pour que je modifie le code pour avoir ce j'attend ?

astuces72 · Answer

float:left;

si c'est que ça je suis mauvais, bien joué tryan :)

Ika Pro · Answer

j'ai retiré le float: center; et maintenant sa m'affiche pareil sur les 3 navigateurs sauf que mon affichage est comme ça  

http://nsa31.casimages.com/img/2012/11/13/121113024351631329.png

Il existe pas un style pour qu'il soit comme ça http://nsa32.casimages.com/img/2012/11/13/121113023841369289.png

sur tous les navigateurs ?

astuces72 · Answer

................. 

edit: 

ah non zut, tu veux le contraire :)

envoi ton code en mp

Ika Pro · Answer

Je t'envoie le code css et html ici du menu seulement, si tu veux plus, dis moi et je t'enverrais en mp. CODE HTML : Pokemon Forever : "Jeux en ligne" //CODE CSS: // html { height: 100% } body { background-color: grey; /* le fond de la page en couleur*/ background-image: url("images/fond.png"); /* le fond de la page en image*/ background-repeat: repeat; color: blue; height: 100%; } footer { clear: left; width: 1140px; padding: 10px; color: #f6e07b; background-color: #a21200; opacity: 0.7; text-align: justify; border: 6px blue groove; border-radius: 5px; margin: 20px auto; margin-top: 20px; text-align: center; } h1 { color: red; font-size: 40px; font-family: "comic sans ms","time new roman",arial,serif; text-decoration: blink; text-decoration: underline; text-align: justify; /*right = droit, center = centré */ } #cen { color: #000000; font-size: 30px; font-family: "comic sans ms","time new roman",arial,serif; margin-top: 350px; margin-right: 250px; } #cen2 { color: #000000; font-size: 30px; font-family: "comic sans ms","time new roman",arial,serif; margin-top: 350px; margin-right: 150px; } header { color: blue; text-align: center; font-size: 40px; font-family: "comic sans ms","time new roman",arial,serif; text-decoration: blink; text-decoration: underline; } h2 { color: #000000; font-size: 30px; font-family: "comic sans ms","time new roman",arial,serif; } p { color: black; font-size: 14px; font-family: "comic sans ms","time new roman",arial,serif; background-color: black; color: white; opacity: 0.7; text-shadow: 2px 2px 4px black; /* mettre le texte en ombre */ } mark /*Mettre un mot en valeur grâce à cette balise en surlignement et une couleur différente */ { background-color: #ff2822; color: blue; border: 2px blue groove; } nav { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 150px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ margin-top: 20px; float: left; font-family: "comic sans ms","time new roman",arial,serif; } #menu1 { border: 6px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-top: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 650px; margin-top: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ margin-top: 10px; clear: both; background-color: grey; opacity: 0.7; color: #6ed065 } #menu2 { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 150px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ margin-top: 10px; clear: both; float: top; background-color: grey; opacity: 0.7; color: #6ed065 } #menu3 { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 150px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ float: top; margin-top: 10px; clear: both; background-color: grey; opacity: 0.7; color: #6ed065 } #menu4 { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 150px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ float: left; margin-top: 20px; clear: both; background-color: grey; opacity: 0.7; color: #6ed065 } } a /* liens par défaut (non survolé) */ { } a:hover /* apparence des liens survolé */ /*hover peut être utilisé pour le texte aussi */ { text-decoration: underline; color: green; } a:active /* couleur au moment du clique*/ { background-color: pink; } a:focus /*quand le lien est selectionné */ { background-color: orange; } section { margin-left: 230px; margin-top: 20px; border: 4px red groove; box-shadow: 6px 6px 10px blue inset; width: 1000px; text-align: center; border-radius: 10px; float: center; } #visiteur { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 180px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ float: right; margin-top: 20px; clear: both; background-color: grey; opacity: 0.7; color: #23e6ff; font-size: 16px; font-family: "comic sans ms","time new roman",arial,serif; } #menu5 { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 250px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ float: right; margin-top: 20px; clear: both; background-color: grey; opacity: 0.7; color: #ffff00; } #menu6 { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 250px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ float: right; margin-top: 20px; clear: both; background-color: grey; opacity: 0.7; color: #6ed065 } #menu7 { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 250px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ position: absolute; bottom: 0; right: 0; margin-top: 20px; clear: both; background-color: grey; opacity: 0.7; color: #ffff00; } #JUKBOX { border: 4px blue groove; border-radius: 10px; border-top:3px solid blue; border-bottom: 3px solid blue; box-shadow: 6px 6px 10px red inset; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 250px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ position: absolute; top: 190px; left: 0; margin-top: 20px; clear: both; background-color: grey; color: #6ed065; } #don { border-top: 4px blue groove; border-left: 4px blue groove; border-right: 4px blue groove; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 250px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ margin-top: 20px; color: #ffff00; margin-bottom: 20px; background-color: red; color: black; } #corps { color: black; font-size: 20px; font-family: "comic sans ms","time new roman",arial,serif; color: white; text-shadow: 2px 2px 4px black; /* mettre le texte en ombre */ background-color: black; opacity: 0.7; color: white; border-radius: 10px; } #corps1 { border-top: 4px blue groove; border-left: 4px blue groove; border-right: 4px blue groove; padding-left: 12px; /* top = haut; bottom = bas; left = gauche; right = droite */ width: 250px; margin-left: 30px; /* top = haut; bottom = bas; left = gauche; right = droite */ margin-top: 20px; color: #ffff00; margin-bottom: 20px; background-color: red; color: black; float: center; } #corps3 { border: 4px blue groove; color: black; width: 1000px; font-size: 16px; margin-left: 230px; box-shadow: 6px 6px 10px red inset; font-family: "comic sans ms","time new roman",arial,serif; color: white; text-shadow: 2px 2px 4px black; /* mettre le texte en ombre */ background-color: black; opacity: 0.7; color: white; border-radius: 10px; font-style: bold; } #jeu { margin-left: 30px; }

Rodolphe_ · Answer

Pour centrer un div il faut lui appliquer en css margin: 0 auto;
et de pas de text-align ou autre float bizarroïde.

Ika Pro · Answer

Merci rodolhpe_ ça à résolu mon souci.

Et merci à ceux qui m'ont aidé ;)

Souci d'affichage sur IE et sur mozilla

21 réponses

Discussions similaires