compatibilité IE/Mozilla

Tadpole · Message par **Tadpole** » 30 mai 2007, 17:59

Bonjour,
J'ai quasiment fini mon site et je change d'ordinateur à un moment et je vois qu'avec IE toute la mise en page est autre (voire horrible). J'ai comme l'impression que j'ai un problème de compatibilité. Par contre je ne vois pas du tout comment le résoudre et comment faire pour que ce soit aussi joli dans Mozilla que dans IE.
Si quelqu'un pouvait me donner un coup de pouce ce serait génial
MErci par avance
Bonne soirée

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11

Message par **myahoo** » 30 mai 2007, 18:04

Il nous faudrait avoir l'adresse du site pour savoir où est le problème !

À la limite, mets-le ici entre les balises [cоde] et [/cоde].

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Tadpole · Message par **Tadpole** » 30 mai 2007, 18:27

Je ne l'ai pas encore mis en ligne mais quand je le visualise cela pose problème.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11

Tadpole · Message par **Tadpole** » 30 mai 2007, 18:32

Voici le code de ma page index

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html style="direction: ltr;" lang="fr">
<head>
  <meta content="text/html;charset=ISO-8859-1"
 http-equiv="Content-Type">
  <title>Page d'accueil de la M&eacute;diath&egrave;que
de Preuilly-sur-Claise</title>
  <style type="text/css">
.Titre { font-family: Bookman Old Style;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: xx-large;
color: rgb(51, 0, 0);
}
.Menu { font-family: Bookman Old Style;
font-style: italic;
font-weight: bold;
text-align: center;
color: rgb(107, 18, 50);
font-size: x-large;
}
.Texte { font-family: Bookman Old Style;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: x-large;
line-height: normal;
color: rgb(255, 153, 0);
}
.Adresse { font-family: Bookman Old Style;
font-weight: bold;
font-style: italic;
text-align: center;
font-size: large;
color: rgb(51, 255, 255);
}
  </style>
  <meta content="M&eacute;diath&egrave;que Municipale de Preuilly-sur-Claise"
 name="author">
  <meta content="Horaires d'ouverture et abonnements"
 name="description">
  <meta name="keywords"
 content="accueil, horaires d&rsquo;ouverture, horaires, ouverture, abonnements, Internet, abonnement Internet, M&eacute;diath&egrave;que de Preuilly-sur-Claise, M&eacute;diath&egrave;que, Preuilly-sur-Claise">
</head>
<body
 style="color: rgb(51, 0, 0); background-color: rgb(255, 255, 255); background-image: url(img/med.jpg);"
 alink="#330000" link="#330000" vlink="#330000">
<br>
<div style="position: absolute; top: 8px; left: 22px;"><a
 href="http://www.preuillysurclaise.fr"><img
 style="border: 0px solid ; width: 84px; height: 104px;"
 alt="Blason de la ville" src="img/Blason2.JPG"></a>
</div>
<span class="Titre">
<br>
</span><br>
<a href="index.html"><span
 style="color: rgb(204, 0, 0);"><br>
<br>
</span></a>
<div class="Adresse"
 style="position: absolute; width: 570px; color: rgb(204, 0, 0); height: 58px; top: 1077px; left: 433px;"><span
 class="Menu Adresse">M&eacute;diath&egrave;que de
Preuilly-sur-Claise - 14 bis route du Grand Pressigny - 37</span><span
 class="Adresse"> </span><span class="Menu Adresse">290
PREUILLY-SUR-CLAISE - 02</span><span class="Adresse">
</span><span class="Menu Adresse">47 94 67 54</span><br>
</div>
<a href="index.html"><span
 style="color: rgb(204, 0, 0);"><span class="Titre"></span><br>
</span></a>
<div style="position: absolute; top: 24px; left: 323px;"><a
 href="index.html"><span style="color: rgb(204, 0, 0);"><br>
</span></a>
<div style="text-align: center;"><a href="index.html"><span
 style="color: rgb(204, 0, 0);"><span class="Titre">M&eacute;diath&egrave;que
de
Preuilly-sur-Claise</span></span></a><br>
</div>
</div>
<br>
<div
 style="position: absolute; left: 26px; top: 189px; height: 896px;"><span
 class="Menu"><a href="accueil.html"><span
 style="color: rgb(107, 18, 50);">Accueil</span></a><br>
<br>
<a style="color: rgb(107, 18, 50);" href="motmaire.html">Le
Mot du Maire</a><br>
<a href="equipe.html">
<br>
<span style="color: rgb(107, 18, 50);">
L'&eacute;quipe</span></a>
<br>
<br>
<a style="color: rgb(107, 18, 50);" href="presentation.html">
Pr&eacute;sentation</a><br class="Menu">
</span>
<br class="Menu">
<a href="actualite.html"><span class="Menu">Actualit&eacute;s/</span><br
 class="Menu">
<span class="Menu">Animations</span></a>
<br>
<br>
<a href="abonnements.html"><span class="TitreTexte Menu">Abonnements</span></a><br
 class="Menu">
<br class="Menu">
<span class="Menu"><a style="color: rgb(107, 18, 50);"
 href="collections.html">Collections</a><br>
<br>
<a style="color: rgb(107, 18, 50);" href="reservations.html">
R&eacute;servations</a><br>
<br>
<a style="color: rgb(107, 18, 50);" href="services.html">
Services</a><br>
<br>
<a style="color: rgb(107, 18, 50);" href="visite.html">
Visite guid&eacute;e</a></span><span class="Menu"></span><span
 class="Menu"></span><br class="Menu">
<br class="Menu">
<a style="color: rgb(107, 18, 50);"
 href="mediatheque_ddbl.html"><span class="Menu">La
m&eacute;diath&egrave;que</span><br class="Menu">
</a>
<span class="Menu"><a style="color: rgb(107, 18, 50);"
 href="mediatheque_ddbl.html">et la DDBL</a><br>
<br>
<a style="color: rgb(107, 18, 50);" href="reseau.html">
Le r&eacute;seau</a><br>
<br>
<a style="color: rgb(107, 18, 50);" href="acces.html">
Acc&eacute;der &agrave; la <br>
m&eacute;diath&egrave;que</a><br class="Menu">
</span>
<br class="Menu">
<span class="Menu"><a style="color: rgb(107, 18, 50);"
 href="contacts.html">Nous contacter/ <br>
R&eacute;servations</a><br>
</span>
</div>
<span class="Titre"></span><br>
<br>
<div
 style="position: absolute; color: rgb(102, 10, 57); left: 408px; width: 590px; top: 328px; height: 647px;">
<div style="text-align: center;"><span class="Texte"><br>
<br>
<br>
</span><span class="Texte"></span><span
 class="Texte">La
m&eacute;diath&egrave;que est ouverte au public le:</span><br
 class="Texte">
</div>
<div style="text-align: center;"><span class="Texte">mardi&nbsp;de
14h &agrave; 18h3</span><span class="Titre"></span><span
 class="Texte">0</span><br class="Texte">
</div>
<div style="text-align: center;"><span class="Texte">mercredi
de 9h &agrave; 12h30 et de 14h &agrave; 18h</span><br
 class="Texte">
</div>
<div style="text-align: center;"><span class="Texte">samedi
de 9h &agrave; 12h30 et de 14h &agrave; 16h30<br>
<br>
</span><span style="color: rgb(255, 153, 0);"><span
 class="Texte"><img
 style="top: 444px; left: 738px; width: 296px; height: 177px;"
 alt="M&eacute;diath&egrave;que de Preuilly-sur-Claise" src="img/med.jpg"><br>
<br>
</span></span></div>
</div>
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11

Message par **chinon37** » 30 mai 2007, 18:41

Bonjour voisin,

Si ça ne t'ennuie pas, ce serait mieux d'avoir l'adresse du site en ligne afin d'avoir l'ensemble de la page affichée.

il serait bon également que tu précises où tu voies des problèmes.

Petite remarque perso: la taille du texte est inutilement grande ce qui a pour effet d'avoir une page qui dépasse la hauteur de l'écran.

Message par **myahoo** » 30 mai 2007, 18:56

chinon37 > Je l'avais dit mais bon, sur le Net beaucoup trop de monde n'aime pas lire les phrases entièrement

Tadpole > En allant sur validator.w3c.org, une petite erreur est trouvée :

Code : Tout sélectionner

Line 2 column 12: there is no attribute "STYLE".

<html style="direction: ltr;" lang="fr">

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Tadpole · Message par **Tadpole** » 30 mai 2007, 19:10

Comme je le disais le site n'est pas encore mis en ligne donc je ne peux pas vous donner l' adresse. Je dois avori l'accord du maire avant de le mettre en ligne.
Quand je vais dans IE l'image de fonds est mise deux fois, l'une en dessous de l'autre et le texte suit. De plus la police est beaucoup plus grande dans IE. Je pense que c'est ce qui pose problème et que donc ça décale tout.
Donc voilà si vous avez une iée je suis preneuse
Merci encore

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11

Tadpole · Message par **Tadpole** » 30 mai 2007, 19:26

Si je réduis la taille de la police le problème ne se pose plus. Par contre la taille est bien dans IE mais petite dans Mozilla. Si vous avez une solution...
Sinon je donnerai peut être des lunettes à tout internaute visitant ce site. Comm je sais que certaines personnes qui l'utiliseront ont des problèmes de vue (du à l'âge), j'aimerai ne pas laisser tout petit
Bonne soirée!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11

Message par **myahoo** » 31 mai 2007, 02:32

(Vu que tu as mis le code source, là, on peut dire que la page est quasiment "déjà en ligne"

)
Ce n'est pas forcément la meilleure solution, mais il semble que de faire une simple feuille de style précisant police et taille de caractères sera le mieux

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Tadpole · Message par **Tadpole** » 31 mai 2007, 08:11

Normalement j'ai déjà fait une feuille de style précisant la taille du menu, la taille titre, du texte (et autres). C'est pour ça que je ne sais pas trop comment faire

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.11) Gecko/20070312 Firefox/1.5.0.11

Message par **chinon37** » 31 mai 2007, 08:27

au matou excédé: J'avais bien lu ta prose, mais j'insistais car le code seul ne permettais pas de voir les éventuels problèmes d'images.
De plus, je mets quelquefois plusieurs minutes à rédiger une réponse... (c'est le problème de faire plusieurs choses en même temps)... et pendant ce temps là, je me fais griller. C'est ainsi que Tadpole a répondu à 18h 27 à la question que j'ai posé à 18h41

Tadpole: je remarque que tu fais de la divite aigue qui surcharge le code et amène à des complications. Ainsi faire des div pour chaque ligne dans les heures d'ouverture est une grosse erreur: les div sont des conteneurs, pas des éléments de mise en page. Pour la mise en page, il existe les titres de différents niveaux h1,h2,h3.... 'est ce que Kompozer /Nvu appelle titre1 (h1) titre2 (h2), etc...
J'essaie de refaire ta page de façon plus simple et je t'envoie le code...

Pour les images, il faut éviter de réduire leur taille dans Kpz/Nvu par la commande dimension > modifier la taille car:
1- la qualité en pâtit
2- le poids de l'image reste celui de l'image originale et non celui de l'image réduite.
Il vaut mieux mettre l'image à la taille voulue avec un logiciel externe (Gimp, Xnview...) et insérer l'image ainsi réduite.

Message par **chinon37** » 31 mai 2007, 09:57

rapidement un premier jet:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
    <style type="text/css">
.Titre {
    text-align: center;
    }
    #Menu {
    font-family: Bookman Old Style;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    color: #6b1232;
    float: left;
    width: 200px;
    font-size: large;
    }
    .Texte {
    font-family: Bookman Old Style;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    font-size: x-large;
    line-height: normal;
    color: #ff9900;
    }
    #adresse {
    font-family: Bookman Old Style;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    font-size: large;
    color: #33ffff;
    height: 100px;
    }
    #entete {
    height: 200px;
    }
    a {
    text-decoration: none;
    color: #6b1232;
    }
    h1 {
    font-family: Bookman Old Style;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    font-size: xx-large;
    color: #330000;
    }
    #contenu {
    font-family: Bookman Old Style;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    font-size: x-large;
    line-height: normal;
    color: #ff9900;
    margin-top: 200px;
    }
    #conteneur {
    border-style: solid;
    border-width: 1px;
    }
    li {
    list-style-type: none;
    margin-top: 12px;
    }

    </style>
  </head>
  <body>
    <div class="Titre">
      <img style="width: 289px; height: 38px; float: left;" alt="blason de la ville" src="img/Blason2.JPG" align=
      "middle" hspace="20">
      <h1>
        <a href="index.html">Médiathèque de Preuilly-sur-Claise</a>
      </h1>
    </div>
    <div id="conteneur">
      <div id="Menu">
        <ul>
          <li>
            <a href="accueil.html">Accueil</a>
          </li>
          <li>
            <a href="motmaire.html">Le Mot du Maire</a>
          </li>
          <li>
            <a href="equipe.html">L'équipe</a>
          </li>
          <li>
            <a style="color: rgb(107, 18, 50);" href="presentation.html">Présentation</a><a href=
            "actualite.html">Actualités/ Animations</a>
          </li>
          <li>
            <a href="abonnements.html">Abonnements</a>
          </li>
          <li>
            <a href="collections.html">Collections</a>
          </li>
          <li>
            <a href="reservations.html">Réservations</a>
          </li>
          <li>
            <a href="services.html">Services</a>
          </li>
          <li>
            <a href="visite.html">Visite guidée</a>
          </li>
          <li>
            <a href="mediatheque_ddbl.html">La médiathèque</a> <a href="mediatheque_ddbl.html">et la DDBL</a>
          </li>
          <li>
            <a href="reseau.html">Le réseau</a>
          </li>
          <li>
            <a href="acces.html">Accéder à la médiathèque</a>
          </li>
          <li> <a href="contacts.html">Nous contacter/ Réservations</a>
          </li>
        </ul>
      </div>
      <div id="contenu">
        La médiathèque est ouverte au public le:<br>
        mardi de 14h à 18h30<br>
        mercredi de 9h à 12h30 et de 14h à 18h<br>
        samedi de 9h à 12h30 et de 14h à 16h30<br>
        <br>
        <img style="width: 200px; height: 200px;" alt="médiathèque de Preuilly sur Claise" src="img/med.jpg">
      </div>
    </div>
    <div id="adresse">
      Médiathèque de Preuilly-sur-Claise - 14 bis route du Grand Pressigny -<br>
       37 290 PREUILLY-SUR-CLAISE - 02 47 94 67 54
    </div>
  </body>
</html>

Tu peux faire un copier-coller de ce code dans l'onglet source de Nvu, enregistrer cette page dans le même dossier que ta page actuel et visualiser pour voir. Bien sûr, il y a des choses à améliorer et à corriger, j'ai fait ça vite fait...

Tadpole · Message par **Tadpole** » 03 juin 2007, 15:00

Merci à tous

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.12) Gecko/20070508 Firefox/1.5.0.12

krystof · Message par **krystof** » 03 juin 2007, 22:21

myahoo a écrit : En allant sur validator.w3c.org, une petite erreur est trouvée :

Salut,
Comment ça marche validator.w3c.org ?
C' est tout en anglais.

*********
EDIT: j' ai rien dit, c' est bon.

HP · Message par HP » 03 juin 2007, 22:23

krystof a écrit :C' est tout en anglais.

comme souvent en informatique va falloir t'y faire, ou passer à autre chose, je crois.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.5pre) Gecko/20070601 Firefox/2.0.0.5pre (Mac Community Build, ElFurbe)

Geckozone

compatibilité IE/Mozilla

compatibilité IE/Mozilla

Qui est en ligne ?