[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Site compatible avce IE, mais pas avec Firefox : Problème ! > Lecture du sujet

Site compatible avce IE, mais pas avec Firefox : Problème !

Vous devez être inscrit pour pouvoir poster des messages

Auteur	Message
Page : 1
1 visiteur sur ce sujet (1 anonyme)
Page : 1
IroShimO	# Posté le 25/07/2007 à 11:07:57
Groupe : Membres	Bonjour tout le monde, Un problème se pose dans la continuation de mon Site. Etant donné qu'une grande partie des internautes utilisent Firefox comme Naviguateur, je me vois dans l'obligation de recourir à de l'aide. Voila, le site fonctionne très bien sous IE, mais une fois sur Firefox, des bugs apparaissent, notamment entre le milieu et le bas du menu de gauche, et ossi dans la zone à droite, une partie du décore se décale a la ligne au lieu de rester dans la lignée de la zone. Voila monde html et css au cas où vous en avez besoin. Code : HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Iro is watching You !</title> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> </div> <div id="top-menu"> <div id="top-menu-1"><img src="images/space.png" width="35" height="20" />Accueil</div> </div> <p> </p> <div id="menu"> <div id="menu-haut"> <table width="180" height="42" border="0"> <tr> <td> </td> <td> </td> </tr> </table> </div> <div id="menu-centre"> <br /> <blockquote> <p>Accueil</p> <p>Membres</p> <p>Tutorials</p> <p>Telechargement</p> <p>Contact</p> </blockquote> </div> <div id="menu-bas"> </div> </div> <div id="fenetre"> <div id="fenetre-haut-1"> </div> <div id="fenetre-haut-2"> </div> <div id="fenetre-centre-1"> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="fenetre-centre-2"> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="fenetre-bas-1"> </div> <div id="fenetre-bas-2"> </div> </div> </body> </html> Code : CSS /* CSS by Germain / / Body / body { width:100%; font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif; font-size:0.8em; margin:0; background:url('images/bg.png') repeat-x; background-color: #E8F0F4; } #header { background-image:"..."; width:500px; height:150px; margin-top:20px; margin-bottom:40px; } #top-menu { width:90%; height:30px; margin-left:0.5%; margin-right:0.5%; } #top-menu-1 { background-image:url(images/top-menu-1.png); width:520px; height:30px; margin-left:1%; } #menu { width:180px; height:auto; float:left; padding: 0; margin: 0px; margin-left:1%; max-width:180px; max-width:180px; } #menu-haut { width:100%; height:42px; background-image:url(images/menu-haut.png); margin-left:1%; max-width:180px; } #menu-centre { width:100%; height:auto; background-image:url(images/menu-centre.png); margin-left:1%; max-width:180px; } #menu-bas { width:100%; height:20px; background-image:url(images/menu-bas.png); margin-left:1%; max-width:180px; margin-top:0px; } #fenetre { width:80%; height:auto; margin-left:20%; max-width:880px; min-width:500px; / overflow:hidden;/ } #fenetre-haut { width:80%; height:42px; } #fenetre-haut-1 { width:90%; height:42px; background-image:url(images/fenetre-haut-1.png); float:left; } #fenetre-haut-2 { width:50px; height:42px; background-image:url(images/fenetre-haut-2.png); } #fenetre-centre { width:80%; height:100px; } #fenetre-centre-1 { width:90%; height:100%; background:url(images/fenetre-centre-1.png) left repeat-y; float:left; } #fenetre-centre-2 { width:50px; height:100%; background:url(images/fenetre-centre-2.png) repeat-y; } #fenetre-bas-1 { width:90%; height:42px; background-image:url(images/fenetre-bas-1.png); float:left; } #fenetre-bas-2 { width:50px; height:42px; background-image:url(images/fenetre-bas-2.png); } .Style-top-menu { vertical-align:middle; } / CSS by Germain */ ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Xann_71	# Posté le 25/07/2007 à 11:17:22
Groupe : Membres	Salut Euh... il y a déjà long de code là pour retrouver une erreur . Pour le retour à la ligne dans ton div du milieu, si j'ai bien comprit, essai de réduire tes dimensions de div. J'avais eu un problème similaire avec une page web car les deux navigateur n'interprète pas les dimensions de la même manière. Le plus simple pour te repérer (ce que je fais quand j'ai un problème d'affichage ) c'est de donner une couleur de fond à tes div pour repérer la place qu'il prennent les un par rapport aux autreset ainsi les modifier en conséquence. C'est clair ce que je dis? Parce que moi je me comprend mais pour me faire comprendre j'ai un peu de mal des fois ;). J'espère que sa va t'aider. A plus
IroShimO	# Posté le 25/07/2007 à 11:29:55
Groupe : Membres	Oui, enfin je pense avoir compris ^^. J'ai fais un Screen de ce que j'ai coloré : ! ScreenShot ! ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Rep	# Posté le 25/07/2007 à 11:52:30
Groupe : Membres	Si tu ne veux pas t'arracher les cheveux, crée deux css, avec une condition dans chaque page html ou php que tu vas créer, un pour firefox, l'autre pour IE. D'après ce que j'ai vu de ton dessin, je dirais qu'il manque un float right pour la fenêtre et un margin négatif pour le menu. Proverbe capitaliste : "Ce qui est à moi est à moi. Ce qui est à toi est négoçiable."
IroShimO	# Posté le 25/07/2007 à 12:12:22
Groupe : Membres	Code : CSS margin:0px; Cela ne fonctionne pas. Code : CSS float:right; Cela case l'image tout a droite. Et pour régler le probleme avec float:right, un problème se pose, je fonctionne en %, en px cela n'aurait posé aucun problème, vu que tout est fixe, tandis que là, c'est un site modulable. Un Screen avec tes indications ! ScreenShot ! ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Xann_71	# Posté le 25/07/2007 à 12:26:13
Groupe : Membres	Désolé, mais je ne te recommande pas la solution deux css alors que tu peux faire avec un seul. Visiblement c'est un problème de margin en effet. Les deux navigateurs ne l'interprète pas de la même manière comme j'ai déjà du le dire. J'ai pas trop le temps de regarder tout ton code css pour retrouver quels bouts correspondent à tes 4 div mais je vais essayer de t'aider. tu vois que ton div noir et ton div vert son écartés sur FF et pas sur IE, commence par enlever tout les margin et padding qu'il y a dans ton css pour ces deux éléments puis test ce que donne ta page avec les deux navigateurs (faudra t'habituer à tester avec les deux à chaque fois si tu ne veux pas que ce genre de problème ce reproduise ). Ensuite rajoute les margin et padding un par un sur chaque élément et à chaque fois, test à nouveau sur les deux navigateur en actualisant. De cette manière, tu verra à quel moment survient ton problème et tu pourra y remédier. Bonne chance, et si un souci ce produit en chemin, hésite pas à meprévenir, ce n'est pas dit que je verrai tout de suite ton post it mais j'essairais de t'aider dés que je pourrai. ( j'ai mes petits problèmes moi aussi ). A plus Édité le 25/07/2007 à 16:32:33 par Xann_71
IroShimO	# Posté le 25/07/2007 à 18:45:44
Groupe : Membres	J'ai trouvé d'où vient le problème en ce qui concerne le menu : Code : CSS #menu-centre { width:100%; height:auto; background-image:url(images/menu-centre.png); margin-left:1%; max-width:180px; } La valeur de height est de auto. C'est ça qui pose problème. Si je met une valeur fixe, le problème disparait, et l'espace blance est supprimé. Mais ce qui est du Corps (la partie de droite), je ne vois pas du tout comment résoudre ce problème. ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Xann_71	# Posté le 26/07/2007 à 09:46:28
Groupe : Membres	Tu peux rétrécir un peu ton div rouge? tu le rétrécie jusqu'à ce que le bleu ce mette à coté. Et tu essai de voir, sinon c'est un problème de float. Je sais pas, essaye et dis moi
IroShimO	# Posté le 26/07/2007 à 14:34:05
Groupe : Membres	J'ai deja essayé : Admettons que ma fenetre de droite fasse 600px de large. le bleu fait au max 50px de alrge. Donc je peux mettre le rouge dans une tranche allant de 50px (un peu petit^^) à 550px. je le fait, mais le bleu reste au dessous. Ensuite, si je fais un float:right, le rouge fait la largeur spécifiée dans le css, masi le bleu va se casé tout a droite, laissé un grand espace entre ces couleurs, et cela peu importe la largeur du rouge, ou de la fenetre de droite. Que le fentre fasse 100px ou 800px de large, la zone bleue va toujours se caser a l'extrème droite de la page. ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Xann_71	# Posté le 26/07/2007 à 15:17:09
Groupe : Membres	oui normale, c'est le principe du float: right de mettre ton div tout a droite . Mais sa m'a permis de penser à une solution que je pensais que tu avais faite. Ton div rouge, tu lui a mis un float: left; ? Si ce n'est pas le cas, essaye et la ça devrait marcher comme par magie . Je vais t'expliquer, les div sont par défaut organisés en bloc, c'est çà dire que quand tu a un div quelque part, l'élément qui le suit sera affiché en dessous. pour corriger çà, tu peux utiliser les float comme je viens de te le proposer. il y a aussi la fonction display: inline; mais par expérience, je sais que sa marche mal avec les div . Voila, dis moi si ça résoud ton problème ou non. A+
IroShimO	# Posté le 27/07/2007 à 13:51:16
Groupe : Membres	J'ai presque trouvé la solution : Code CSS du départ : Code : CSS #fenetre-centre { width:80%; height:100px; } #fenetre-centre-1 { width:90%; height:100%; background:url(images/fenetre-centre-1.png) left repeat-y; float:left; } #fenetre-centre-2 { width:50px; height:100%; background:url(images/fenetre-centre-2.png) repeat-y; } ==> Résultat Code CSS de mainenant : Code : CSS #fenetre-centre { width:600px; height:500px; } #fenetre-centre-1 { width:80%; height:500px; /background:url(images/fenetre-centre-1.png) left repeat-y;/ background-color:#FF0000; float:left; margin-top:0px; } #fenetre-centre-2 { width:50px; height:500px; /background:url(images/fenetre-centre-2.png) repeat-y;/ background-color:#0000FF; margin-left:80%; /* C'est ici la grand différence, car le div "fenetre" prend ici toute son importance. J'ai maintenant comme point de repère l'extreme gauche de la fenetre et non plus l'extreme gauche de l'écran. et le fait de régler la premiere partie de la fenetre à "80%" fixe une limite concrète, tout en gardant la flexibilité du design. */ } ==> Résultat Seul problème, une marge est toujours présente en haut de la bande bleue (environ 5px), et par conséquent en bas de la bande rouge. Je n'ai pas réussi à la supprimer, que ce soit en supprimant les marges, avec margin:0px, ou bien en la réduisant à 1 ou 2, cela reste toujours apreil tant que le margin est inférieur à 5px. ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Xann_71	# Posté le 27/07/2007 à 15:40:53
Groupe : Membres	Oula doucement, tu vas trop vite pour moi . Tu as essayer le float left comme je te l'avais proposé? Faudrait peut etre en mettre sur le div rouge et le div bleu a mon avis. Édité le 27/07/2007 à 15:41:50 par Xann_71
IroShimO	# Posté le 27/07/2007 à 21:52:37
Groupe : Membres	En fait, float:left était toujours présent (ou presque, je l'ai retiré pour tester plusieurs choses). Ce sont surtout les choses ajoutées qui ont fait que cela fonctionne de cette manière. Édité le 27/07/2007 à 21:57:56 par IroShimO ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Gambit2099	# Posté le 27/07/2007 à 22:10:21
Crow never dies... Groupe : Membres	http://www.siteduzero.com/forum-83-170767-p1-hs-vous-avez-un-probleme.html -> lien meci Mon Blog-Art (dessins, recherches, croquis) Mon compte Dailymotion (animations)
IroShimO	# Posté le 27/07/2007 à 22:11:51
Groupe : Membres	Si tu avait suivi un minimum le sujet, ou que tu ai lu le post au dessus, tu n'aurait aps eu besoin d'ajouter un commentaire inutile ^^. ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Gambit2099	# Posté le 27/07/2007 à 22:16:55
Crow never dies... Groupe : Membres	Si tu avais lu le mien tu aurais vu que je demande un lien palpable != d'un screenshot Mon Blog-Art (dessins, recherches, croquis) Mon compte Dailymotion (animations)
IroShimO	# Posté le 27/07/2007 à 22:18:30
Groupe : Membres	Depuis le début je met des screeshots. Et ils sont représentatifs des posts précédents ou des posts en question. ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
Gambit2099	# Posté le 27/07/2007 à 22:21:45
Crow never dies... Groupe : Membres	Okay Bonne chance Mon Blog-Art (dessins, recherches, croquis) Mon compte Dailymotion (animations)
IroShimO	# Posté le 04/08/2007 à 11:01:48
Groupe : Membres	Plus personne pour m'aider ? Sniff. Mon Topic est tombé aux oubliettes :S. ----------------------------http://www.eaglesknownow.c.la---------------------------- ---------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////