problème d'affichage avec fire fox

<question></question>
Bonjour,
je suis en train de réaliser un site de vente en ligne et j'ai donc besoin d'une certaine similarité d'affichage entre les navigateurs et d'une compatibilité maximale avec un large choix de navigateur.

après avoir étudié le cours Css, Php et Xhtml, m'être renseigné au maximum, (forum, tuto, site spécialisé) j'ai décidé de réaliser mon site moi meme pour un résultat personnel, spécifique et original.

Mais voilà, je galère dure dure, mon code Css fonctionne sous IE (bon résultat) mais pas sous fire fox . je n'arrive pas a obtenir le résultat souhaité sous fox, et si parfois j'y arrive alors ça plante complètement sous IE. bon de quoi devenir fou... j'y suis depuis 15 jours, et j'espère que vous m'aiderez à trouver le problème, merci.

Je développe à la fois sous notepad++, et dreamweaver8, images sous paintshop pro et photoshop CS2.

voici le code de la page d'acceuil (pas entièrement fini... mais

<html>
<head>
<title>
</title>
<style> <gras></gras>
body
{
background-color:#FDD9EC;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#menuH
{
background-color:#ee319c;
width:1000px;
margin:0px;
}
#connect
{
float:left;
width:150px;
height:20px;
}
a img
{
border:none;
}
#menuHD
{
position:absolute;
left:585px;
top:165px;
height:15px;
float:right;
}
#newsletter
{
font-size:xx-small;
position:absolute;
left:590px;
top:165px;
display:inline;
width:250px;
height:20px;
}
#menuD
{
padding:10px;
float:right;
position:absolute;
left:800px;
top:200px;
background-color:#fdd2ea;
}
img
{
border:thin solid #CCFFFF;
}
#menuG
{
background-color:#fdd2ea;
width:150px;
margin:0px;
float:left;
position:absolute
top:170px;
}
a
{
color:#000000;
text-decoration:underline;
font-weight:bold;
}
a:hover
{
color:red;
background-color:#000000;
border:outset;
}
a:visited
{
color:fushia;
}
.box1
{
padding-top:5px;
padding-bottom:5px;
text-align:center;
background:url(boxe_nouveaute.jpg) no-repeat;
width:170px;
margin-left:10px;
margin-bottom:10px;
border:outset;
}
.box2
{
padding-top:5px;
padding-bottom:5px;
background:url(boxe_selection.jpg) no-repeat;
width:170px;
text-align:center;
margin-left:10px;
margin-top:10px;
border:outset;
}
#foot
{
background-color:#ee319c;
font-size:xx-small;
width:950px;
position:absolute;
top:750px;
}
form
{
display:inline;
}
.autre_lien
{
background:url(autres_liens.jpg) no-repeat;
padding:40px 5px 5px 5px;
border:outset;
width:170px;
height:200px;
}
</style> <gras></gras>
</head> <gras></gras>
<body>
<img src="images/head.jpg" width="1000" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="12,11,140,140" href="#index.php">
</map>
<div id="menuH">
<div id="connect"> <gras></gras>
<a href="connexion.php">Connexion</a>
</div>
<div> <gras></gras>
<a href="nouveaute.php"><img src="bout_news.jpg" alt="nouveauté"></a>
<a href="faq.html"><img src="bout_faq.jpg" alt="faq"></a>
<a href="promotion.php"><img src="bout_promotion.jpg" alt="promotion"></a>
<a href="contact.html"><img src="bout_contact.jpg" alt="contact"></a>
</div>
<div id="menuHD"> <gras></gras>
<form method="post" action="newsletter.php">
<label>Newsletter : <input type="text" name="newsletter"/></label> <input type="submit" value="ok"/>
</form>
<a href="panier.php"><img src="images/panier.png">Caddie</a> <gras></gras>
</div>
</div>
<div id="menuG"> <gras></gras>
<a href="lingerie.php"><img src="images/bout_lingerie.jpg" alt="lingerie"><br/></a>
<a href="cosmetique.php"><img src="images/bout_cosmetique.jpg" alt="cosmetique"><br/></a>
<a href="accessoire.php"><img src="images/bout_accessoire.jpg" alt="accessoire"><br/></a>
<a href="chaussure.php"><img src="images/bout_chaussure.jpg" alt="chaussure"><br/></a>
<a href="vetement.php"><img src="images/bout_vetement.jpg" alt="vetement"><br/></a>
<p class="autre_lien"> <gras></gras>
<a href="Liv_retour.html">Livraison et retour</a><br/>
<a href="affiliation.html">Affiliation</a><br/>
<a href="conseils.html">Nos conseils</a><br/>
<a href="cgv.html">Conditions de vente</a><br/>
<a href="avantage.html">Vos avantages</a><br/>
</p>
</div>
<div id="body">
<gras></gras>
</div>
<div id="menuD"> <gras></gras>
<table>
<tr>
<div class="box1">
<br/>
<?php
mysql_connect("localhost","root","");
mysql_select_db("sophy-sophy");
$reponse=mysql_query('SELECT * FROM string');
WHILE ($donne=mysql_fetch_array($reponse))
{
?><p><b>
<?php
echo $donne['description'];?><img class="img" src="string/<?php echo $donne['image'];?>.jpg" alt="string"><br/><?php echo $donne['prix'];?></b></p><?php
}
mysql_close();
?><br/>
<form method="post" action="commande.php"><input type="button" value="Commander"/> <input type="button" value="Plus..."/></form>
</div>
</tr>
<tr>
<div class="box2">
<br/>
<?php
mysql_connect("localhost","root","");
mysql_select_db("sophy-sophy");
$reponse=mysql_query('SELECT * FROM string');
WHILE ($donne=mysql_fetch_array($reponse))
{
?>
<p><b>
<?php
echo $donne['description'];?><img class="img" src="string/<?php echo $donne['image'];?>.jpg" alt="string"><br/><?php echo $donne['prix'];?></b></p><?php
}
mysql_close();
?><br/>
<form method="post" action="commande.php"><input type="button" value="Commander"/> <input type="button" value="Plus..."/></form>
</div>
</tr>
</table>
</div>
<div id="foot"> 
<a href="index.php">Accueil</a> <a href="cgv.html">Conditions de vente</a> <a href="societe.html">La société, Sophy-Sophy</a>
<address>
Copyrigth 2006 Sophy-Sophy © Sophy-sophy, 3 rue André Père, 32000 AUCH, Service Clients 0 892 680 631 code 26146 du lundi au vendredi de 10h à 12h et de 14h à 18h</address>

</div>
</body>
</html>

merci pour toute l'aide que vous m'apporterez!

merci, pour ta réponse.
en ce qui concerne le css, je le met bien sur sur une feuille à part, mais là pour vous le mettre dans le message, je voyais mal le mettre sur 2 page different... c pour ça que je l'ai inclu. voilà.

sinon, mon souci avec fire fox, c'est qu'il y a plusieurs chose que je veux faire et qui ne fonctionne pas sous ce navigateur, parfois, il donne un résultat absurde... par exemple, dans le code html, les boutons "commade" et "plus..." du menu de gauche se trouve dans un tableau et une division (qui porte une image de fond). pour l'affichage IE met bien les bouttons, dans la division et elle s'afffiche donc sur l'image de fond, mais fox, lui les mets sous l'image. j'ai tenté d'agrandir l'image en espérant que fox comprendrais, et bien non, il agrandi bien l'image, mais du coup il repousse les boutons plus bas...
par ailleurs, il affiche la boite de la newsletter, au mauvais endrois que je lui donne une position (en px ou en %) ou que je ne lui donne pas de position, j'ai essayé de le mettre dans une division et le résultat était catastrophique...

je ne peux malheureusement pas mettre ma page en ligne pour le moment désolé...
merci

daureluc

12 avril 2006 à 10:50:31

Phnx

12 avril 2006 à 10:57:27

Alors je te conseille de coder ton site avec FireFox ou un autre navigateur au normes et d'utiliser des astuces pour que ton design soit compatible sous IE ( y eb a des tonnes qui trainent sur se site ) :-°

et si tu pouvait nous donner un appercut de ton site en ligne sa serait pas mal pour savoir ou chercher

sinon en regardant ton code j'ai trouver quelques anomalies:

-> met ton code css dans une feuille de style séparée de ta page html, sauf si ton site t'impose que ton css soit dans ta page html ( cf cour de html/css )

voila j'ai pas chercher en profondeur mais c'est se qui ma sauter aux yeux :-°

12 avril 2006 à 11:16:16

12 avril 2006 à 11:32:30

ben la je ne peut que t'encourager a essayer encore et encore d'avoir un site quitourne sous FireFox ou d'autre navigateur qui respectent les standars ( comme Opera ).

désoler de ne pas pouvoir t'aider plus

css qui fonctionne sous IE mais pas sous fox

problème d'affichage avec fire fox

Supprimer

Modérer

Signaler le message aux modérateurs