Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1334 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Différence IE/Firefox [Résolu]

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Différence IE/Firefox [Résolu]

n°1515301
Chris6969
Posté le 15-02-2007 à 23:55:34  profilanswer
 

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
mood
Publicité
Posté le 15-02-2007 à 23:55:34  profilanswer
 

n°1515372
Mxtrem
Posté le 16-02-2007 à 10:18:17  profilanswer
 

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 ;)

n°1515402
zecrazytux
Posté le 16-02-2007 à 10:55:46  profilanswer
 

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
n°1515452
Mxtrem
Posté le 16-02-2007 à 11:55:04  profilanswer
 

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

n°1515507
zecrazytux
Posté le 16-02-2007 à 14:14:52  profilanswer
 

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
n°1515612
rufo
Pas me confondre avec Lycos!
Posté le 16-02-2007 à 15:32:10  profilanswer
 

standards avec un d ;)

n°1515660
FlorentG
Unité de Masse
Posté le 16-02-2007 à 16:22:16  profilanswer
 

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]

n°1515667
FlorentG
Unité de Masse
Posté le 16-02-2007 à 16:31:19  profilanswer
 

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

n°1515676
zecrazytux
Posté le 16-02-2007 à 16:37:41  profilanswer
 

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


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
n°1515678
rufo
Pas me confondre avec Lycos!
Posté le 16-02-2007 à 16:38:46  profilanswer
 

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

mood
Publicité
Posté le 16-02-2007 à 16:38:46  profilanswer
 

n°1515682
zecrazytux
Posté le 16-02-2007 à 16:42:11  profilanswer
 

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


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
n°1515747
Chris6969
Posté le 16-02-2007 à 19:30:41  profilanswer
 

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

n°1533848
Chris6969
Posté le 26-03-2007 à 17:21:48  profilanswer
 

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.

n°1535595
xavior_el_​barbor
Posté le 29-03-2007 à 09:51:05  profilanswer
 

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

n°1535597
FlorentG
Unité de Masse
Posté le 29-03-2007 à 09:54:07  profilanswer
 

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)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Différence IE/Firefox [Résolu]

 

Sujets relatifs
Probleme de différence firefox/ie[Ruby] [Resolu] Nettoyage de caractères accentués
[html] mailto + modification adresse mail [Résolu]probleme d'overflow avec variables type Double [résolu]
VBA - application.match et Majuscules [Résolu]VUE javais pas vue... [RESOLU]
[CSS] (Résolu) Pourriez-vous tester mon site avec IE6?Processus métier et règle métier ? c'est quoi la différence ?
[Resolu] Une class sur une "font" pas fonctionnelle sous FF :o 
Plus de sujets relatifs à : Différence IE/Firefox [Résolu]


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR