[RESOLU] Decalage entre firefox et IE

pika28 a écrit :
je les ai concu sous ie

Ah ben voilà.

(Le pire c'est que si le rendu est problématique sous Firefox, il le sera sans doute aussi sous Safari, Chrome, Opera et... Internet Explorer 8.)

Dans les pistes de solutions:
1. Toujours travailler sur des pages HTML avec un Doctype en bonne et due forme.
2. Ça serait quand même mieux de séparer clairement HTML et CSS, ça faciliterait la maintenance. C'est loin d'être compliqué.
3. Toujours tester sur deux navigateurs autres que IE. Par exemple Opera et Safari, ou Firefox et Chrome.
4. Faire attention aux versions d'IE utilisées. Pour un site professionnel, il faut actuellement tester le site sur IE6, 7 et 8. Ce qui est difficile car on ne peut théoriquement pas installer plusieurs versions d'IE sur un même système. Dans le cas où on utilise IE8, faire attention au mode de rendu utilisé.

Salut,

Cela vient du fait que l'interprétation des propriétés CSS est complète, partielle ou inexistante dans certains navigateurs, ce qui donne des résultats différents. Les navigateurs les plus anciens sont souvent ceux qui en interprètent le moins, donc ils les ignorent tout simplement.
Mais même dans les navigateurs plus récents, ils ne sont pas tous capable d'interpréter à 100% la norme actuelle.
Internet explorer fait souvent office de vilain petit canard, car il subsiste encore une énorme part de leur navigateur en version 6, qui date du début du siècle ! Le 7 est déjà un peu mieux mais souffre encore de lacunes importantes par rapport aux navigateurs coexistant à l'époque de sa sortie. Le 8 semble avoir pas mal rattrapé son retard.

Il est donc toujours mieux de concevoir ses sites en les testant sur les différents navigateurs simultanément, ça aide à éviter de tout refaire une fois qu'ils sont achevés.

J'avais bien essayé de séparé CSS et HTML mais tout parté dans tout les sens....

Je rajoute la source que j'avais pas mis dans le premier post si ca peux aider
source : www.bluebox-chartres.com

Merci

pika28 a écrit :
Je crois savoir également d'ou viens mes décalage. IL y a une grosse différence d'interligne entre les IE et FF. L'espace entre ligne est plus important sous FF, et c'est ca qui plante tout je pense.
Vous savez d'ou ca peut venir?
pika

Bonjour pika28,
(Tiens je passe à Chartres en fin de semaine )

Il serait bien de valider/corriger ton code avant toutes autres actions (le Strict est stricte !)
Cela se passe ici : http://validator.w3.org/
Ensuite enlève toute déclaration faite avant le doctype (le code PHP...)
Ajoute une déclaration d'encodage à ton document.
Suis les conseils de Florent V.
Et tu devrais commencer à y voir plus clair

Cordialement,
Sylvain

Il faut écouter à la lettre le site http://validator.w3.org/ ??? car il m'indique qu'il n'y a pas de balise de fin de <br> or on ne met pas de balise de fin pour un retour à a ligne???

Grace à l'outils de validation, je me suis rendu compte que j'avais XHML 1.0 au lieu de HTML 4.01 qui correspond mieux à ce que j'ai fait. Du coup, je passe de 157 erreurs à 26 erreurs.

Concernant les 26 erreurs restantes, elles concernent tous les balise DIV et LI. Ne peut-on pas les utiliser avec le HTML 4.01?

Les erreurs sur les DIV sont à priori dues à la balise <font> que tu utilises avant le DIV signalé en erreur. Tu devrais supprimer tous les éléments FONT, et reporter leurs styles en CSS (les propriétés CSS color, font-size et font-family devraient t'intéresser).

De même pour les LI, c'est la présence d'un élément B comme enfant d'un élément UL qui pose problème. UL n'accepte que des LI comme enfant, et rien d'autre. Donc plutôt qu'écrire:

<ul>
<b>
<li><a href="index.html">Accueil</a></li>
<li><a href="conseils.html">Conseils</a></li>
<li><a href="solariums.html">Solariums</a></li>
<li><a href="produits.html">Produits</a></li>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="photos.html">Photos du Centre</a></li>
<li><a href="contact.html">Contact / Plan</a></li>
</b>
</ul>

Il faudrait écrire:

<ul style="font-weight: bold;">
<li><a href="index.html">Accueil</a></li>
<li><a href="conseils.html">Conseils</a></li>
<li><a href="solariums.html">Solariums</a></li>
<li><a href="produits.html">Produits</a></li>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="photos.html">Photos du Centre</a></li>
<li><a href="contact.html">Contact / Plan</a></li>
</ul>

Même si dans l'idéal on écrira plutôt:

<ul id="nav">
<li><a href="index.html">Accueil</a></li>
<li><a href="conseils.html">Conseils</a></li>
<li><a href="solariums.html">Solariums</a></li>
<li><a href="produits.html">Produits</a></li>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="photos.html">Photos du Centre</a></li>
<li><a href="contact.html">Contact / Plan</a></li>
</ul>

Et en CSS:

#nav {
  font-weight: bold;
  /* D'autres propriétés, en fonction du rendu souhaité */
}

Florent V. a écrit :

Même si dans l'idéal on écrira plutôt:

<ul id="nav">
<li><a href="index.html">Accueil</a></li>
<li><a href="conseils.html">Conseils</a></li>
<li><a href="solariums.html">Solariums</a></li>
<li><a href="produits.html">Produits</a></li>
<li><a href="tarifs.html">Tarifs</a></li>
<li><a href="photos.html">Photos du Centre</a></li>
<li><a href="contact.html">Contact / Plan</a></li>
</ul>

Et en CSS:

#nav {
  font-weight: bold;
  /* D'autres propriétés, en fonction du rendu souhaité */
}

Merci, j'ai retenu cette dernière solution pour les LI, il me reste plus qu'à me pencher dans le CSS.
Si j'ai bien compris le principe, il faut créer un CSS et le mettre en lien dans le META du html puis créer des ID lié avec chaque DIV correspondant. Je vais y aller à taton comme d'hab

Si je confond, je viens de corrigé.

Suite à un post exemple du net, j'ai remis les balise h1 en les formatant dans le css avec h1{ et non .h1{ qui créer une class. Par contre du coup, le décalage revient quand je place les balise h1.

Elles sont encore utilisable ces balises?

Et voila, j'ai validé tout mon site et tout corrigé. Plus de différence entre firefox et internet explorer. (enfin presque, juste la taille du bloc de saisie texte dans la page contact)

A ce niveau, faut-il que je passe également le positionnement et la taille de chaque div dans le CSS, ca va changer quelque chose à part le clareté?

Si quelqu'un a une observation .... www.bluebox-chartres.com