Différence IE/Firefox [Résolu]

Différence IE/Firefox [Résolu] - HTML/CSS - Programmation

Marsh Posté le 15-02-2007 à 23:55:34    

Bonjour,
 
Alors avant tout je suis un novice totale en matière de programmation web, donc vous risquez de souvent avoir affaire a moi. J’essais d’apprendre différents langages et techniques de programmation. Le langage html est le seul que je ne connais pas trop mal sans en être un as.
 
Alors la je développe un site web mais je rencontre un problème au niveau du navigateur web. En effet lorsque j’utilise Internet Explorer la page s’affiche normalement tandis qu’avec Mozilla Firefox il y a quelques légères différences que je n’arrive pas a résoudre. Je sais que ce problème IE/Firefox revient fréquemment mais je ne suis pas arrivé à le résoudre.
 
Première différence :
- avec Internet Explorer :
 
http://i09.servimg.com/u/09/01/08/75/ie11.jpg
 
- avec Mozilla Firefox :
 
http://i09.servimg.com/u/09/01/08/75/mf11.jpg
 
Deuxième différence :
- avec Internet Explorer :
 
http://i09.servimg.com/u/09/01/08/75/ie_210.jpg
 
- avec Mozilla Firefox :
 
http://i09.servimg.com/u/09/01/08/75/mf_210.jpg
 
Code html :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Prodatec</title>
  6. <!-- Balises META -->
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <meta http-equiv="content-language" content="fr">
  9. <meta name="keywords" content="...">
  10. <meta name="description" content="...">
  11. <!-- Liens -->
  12. <link href="fstyle.css" rel="stylesheet" type="text/css">
  13. <!-- Styles -->
  14. <style type="text/css">
  15. <!--
  16. .Style1 {
  17. font-size: 18px;
  18. color: #FF6600;
  19. font-weight: bold;
  20. font-style: italic;
  21. }
  22. -->
  23. </style>
  24. </head>
  25. <body>
  26. <div id="grandcadre" >
  27.  <table width="150" bordercolor="black"  bgcolor="#006198" border="1" >
  28.           <tr>
  29.             <td><img src="images/ban.gif"></td>
  30.           </tr>
  31.         </table>
  32. <div id="style2">
  33. <br><br>
  34.  <p><center>
  35.    <span class="Style1">...Texte...</span><br>
  36. <br><br><br><br>
  37. <a href="presentation/indexpre.htm">- Présentation -</a>
  38. <br><br>
  39. <a href="realisations/indexreal.htm">- Réalisations -</a>
  40. <br><br>
  41. <a href="evenements/indexeven.htm">- Evènements -</a>
  42. <br><br>
  43. <a href="contact/indexcont.htm">- Contact -</a>
  44. <br><br>
  45. </center></p>
  46. </div>
  47. </div>
  48. </body>
  49. </html>


 
Code CSS :
 

Code :
  1. body {
  2. background-image:url(images/fond.jpg);
  3. background-position:center;
  4. background-attachment:fixed;
  5. background-repeat:no-repeat;
  6. margin:50px 120px 50px 125px;
  7. border: double;
  8. border-color: #006198;
  9. overflow:visible;
  10. }
  11. #grandcadre {
  12. position:static;
  13. padding:0px;
  14. margin:0px 0px 0px 0px;
  15. }
  16. #style2 {
  17. padding:5px;
  18. }


 
Moi je voudrais que ça s’affiche comme avec IE.
 
Peut être qu’il y a du code qui n’est pas très "professionnel". Alors si vous remarquez des choses qui ne vont pas merci de me le faire savoir.
 
J’espère que j’ai été assez claire.
 
Merci de votre aide.
 
Chris


Message édité par Chris6969 le 26-03-2007 à 17:17:22
Reply

Marsh Posté le 15-02-2007 à 23:55:34   

Reply

Marsh Posté le 16-02-2007 à 10:18:17    

je ne vois pas pourquoi tu utilises des div pour faire ça, un simple table aurait suffit.
 
<table cellpadding=0 cellspacing=0 style="width: auto; height: auto; border: 1px #006198 double">
 <tr><td>
 <table cellpadding=0 cellspacing=0 style="width: auto; height: auto; border: 1px #000000 solid">
 <tr><td><img src="images/ban.gif"></td></tr>
 </table>
</table>
 
ps : ne définie pas de choses telles les bordures toussah dans le body ;)

Reply

Marsh Posté le 16-02-2007 à 10:55:46    

ta craqué ?
les tableaux ça puuux !
 
utilise des divs, et pour tes liens une liste.
 
le stableaux ne doivent servir qua... faire des tableaux (au sens tableur, pas de mise en forme)


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 16-02-2007 à 11:55:04    

je ne suis pas d'accord, les tableaux evitent bien des problèmes d'incompatibilité entre les divers navigateurs...

Reply

Marsh Posté le 16-02-2007 à 14:14:52    

ouai ta raison on va tous coder en tableaux imbriqués, c'est les standards les responsables des problemes de compatibilité.
conanrds de standards :-(
 
edit: effectivement :o


Message édité par zecrazytux le 16-02-2007 à 15:49:38

---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 16-02-2007 à 15:32:10    

standards avec un d ;)

Reply

Marsh Posté le 16-02-2007 à 16:22:16    

Mxtrem a écrit :

je ne vois pas pourquoi tu utilises des div pour faire ça, un simple table aurait suffit.


Tu craques toi, ou quoi ? [:johneh]  [:johneh]  [:johneh]

Reply

Marsh Posté le 16-02-2007 à 16:31:19    

Bon là sinon c'est assez simple à faire :

Code :
  1. ....
  2. <body>
  3.   <div id="conteneur">
  4.     <div id="header">
  5.       <h1>Prodatec</h1>
  6.     </div>
  7.     <div id="contenu">
  8.       <p>
  9.          Texte ici
  10.       </p>
  11.       <ul id="menu">
  12.         <li><a href="presentation/indexpre.htm">- Présentation -</a></li>
  13.         <li><a href="realisations/indexreal.htm">- Réalisations -</a></li>
  14.         <li><a href="evenements/indexeven.htm">- Evènements -</a></li>
  15.         <li><a href="contact/indexcont.htm">- Contact -</a></li>
  16.        </ul>
  17.     </div>
  18.   </div>
  19. </body>


Ton menu est une liste, il faut donc le mettre dans un <ul>. La banière ira en fond du header, dans le h1 y'aura le logo ou le nom de la boîte sous forme de texte. Pour centrer tout le truc, on mettera une taille au conteneur, + la bordure :

Code :
  1. #conteneur {
  2.   border: 3px double #006198;
  3.   margin: 0 auto;
  4.   width: 760px;
  5. }


N'oublie pas de préciser le bon doctype pour que le centrage fonctionne sous IE.
Pour la banière :

Code :
  1. #header {
  2.   border: 1px solid black;
  3. }


Rien besoin d'autre...
Et enfin pour ton menu, supprimer les puces et centrer :

Code :
  1. #menu {
  2.   list-style-type: none;
  3. }
  4. #menu li {
  5.   text-align: center;
  6. }


 
N'oublie pas de ne jamais utiliser de tableaux pour la présentation, il faut les réserver pour des trucs genre affichage de données statistiques, etc. Attention à bien utiliser les balises pour leur sens, et pas pour leur présentation.
 
Bref, t'as encore plein de choses à apprendre, mais ça viendra avec l'expérience

Reply

Marsh Posté le 16-02-2007 à 16:37:41    

ben voilà :)
l'a tout maché le florent :D


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 16-02-2007 à 16:38:46    

un petit tour sur http://css.alsacreations.com/ et ça ira mieux :)

Reply

Marsh Posté le 16-02-2007 à 16:38:46   

Reply

Marsh Posté le 16-02-2007 à 16:42:11    

mxtrem, tu devrais y fair eun petit tours aussi
openweb aussi


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 16-02-2007 à 19:30:41    

Oki merci pour vos réponses je verrais ca dimanche dans la soiré car je suis pris tout le week end.

Reply

Marsh Posté le 26-03-2007 à 17:21:48    

Voila j'ai vraiment pas eu le temps de faire ces modifications avant.
Je les ai effectués et c'est un succès total !! :sol:  
De plus le site de Rufo m'a permit de comprendre d'autres choses qui me seront utiles plus tard.
 
Encore une fois merci a vous tous pour votre aide.

Reply

Marsh Posté le 29-03-2007 à 09:51:05    

Bonjour,
Quand vous parlez de bon doctype, c'est lequel qu'il faut mettre ?

Reply

Marsh Posté le 29-03-2007 à 09:54:07    

Un doctype strict par exemple :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


(les vrais le tape par coeur :o)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed