comptaibilité CSS entre IE et FF

pelloq1 · Message par **pelloq1** » 16 avr. 2006, 14:07

Bonjour,

CONTEXTE :
J'utilise IE pour mes tests (ainsi que le viewer internet de mon programme de developement), tout ce passe bien. Lorsque j'ai essayé sous Firefox (FF), plus rien ne fonctionne. Comme je l'ai compris, FF utilise les vrais standards, alors que IE lui utilise en plus des standards internes. Mon but est d'utiliser les vrais standards W3C.

Il me semble que mon code respecte ces standards.

EXTRAIT DE CODE :

fichier style.css :

Code : Tout sélectionner

    @charset "windows-1252";

    body {font: normal verdana; font-size: 10 px}

    a.menu {
        background:          #FFFFFF;
        border:         thin solid silver;
        color: #7382A0;
        font-family:       verdana;
        margin-bottom: 5px;
        margin-right: 5px;
        width: 125px
    }

    a.menu:hover {
        idem avec juste :
        border: thin solid #7382A0; ...

Fichier index.php

Code : Tout sélectionner

    <head>
    ...
    <link rel="stylesheet" type="text/css" href="inc/style.css">
    </head>
    <body topmargin="0" leftmargin="0">
           

    <table width="750" cellpadding="0" cellspacing="0" align="center" >
        <tr>
            <td width="150" height="300" valign="top" align="center" >
            <br>
                <a class="menu" href="index.php?p=1">Acceuil</a><br>
                <a class="menu" href="index.php?p=2">Processus</a><br>
                <a class="menu" href="index.php?p=4">Devis online</a><br>
                <a class="menu" href="index.php?p=6">Contact</a>
            </td>
        </tr>
    </table>

RESULTAT

Dans IE : cela me donne de belles cases de la meme largeur avec un bel espace entre les cases avec un bord qui change de couleur au survol
Dans FF : toutes les case prennent la largeur minimum, et toutes les cases se chevauchent

QUESTION

Quelle est mon erreur ?

Salutation, Cédric

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

calimo · Message par **calimo** » 16 avr. 2006, 14:33

S'il y a un problème de chevauchement, c'est probablement parce qu'IE interprète (à tort) les largeurs et hauteurs comme des largeurs/hauteurs minimales (il existe des propriétés pour spécifier les largeurs/hauteurs minimales qui ne sont pas prises en compte par IE).
Mais ça ne me saute pas aux yeux.

Cela dit, un petit extrait de code comme ça ne permets généralement pas de trouver la cause du problème. Elle peut avoir de très nombreuses origines, et ce que tu nous donne ne suffit pas.

Alors je sais que ton code est précieux, que tu n'aimerais pas qu'on te le "vole" (quelle drôle de notion

), mais si tu pouvais nous donner l'adresse de ton site (ou de ta page) ça pourrait probablement nous aider beaucoup

pelloq1 · Message par **pelloq1** » 16 avr. 2006, 17:23

Mon code htm, et css n'est pas si précieux que cela, ce qui est précieux et le php !!!

Alors voici un bout de code executable, ce dernier plante chez moi sous FF et fonctionne sous IE:

fichier CSS complet :

Code : Tout sélectionner

@charset "windows-1252";


body {font: normal verdana; font-size: 10 px}

a {color: #006699; font:    bold; font-family:     verdana, Tahoma, arial; font-size: 12px; text-decoration: none}

a:hover {color: #006699; font: 300=heavy; font-family:       verdana, Tahoma, arial; font-size: 12px; text-decoration: none}

a.menu {background:          #FFFFFF; border:         thin solid silver; color: #7382A0; font-family:       verdana; margin-bottom: 5px; margin-right: 5px; width: 125px}

a.menu:hover {background:           #FFFFFF; border: thin solid #7382A0; color: #7382a0; font-family:        verdana; margin-bottom: 5px; margin-right: 5px; width: 125px}

h1 {color: #006699; font-family:   verdana; font-size: 20px; letter-spacing: 5px; margin-left: 25px ;}
h2 {color: #006699; font-family:   verdana; font-size: 15px; letter-spacing: 1px; margin-left: 25px ;}
h3 {color: #006699; font-family:   verdana; font-size: 13px; }

p {color: #006699; font-family:    verdana; font-size: 12px; margin-left: 25px}
li {color: #006699; font-family:    verdana; font-size: 12px; margin-left: 25px}

input {background: #B3CAFF; border: 1px dotted; border-color: silver; color: black; font: 8px courier}
select {background: #B3CAFF; border: 1px dotted; border-color: silver; color: black; font: 8px courier}
textarea {background: #B3CAFF; border: 1px dotted; border-color: silver; color: black; font: 8px courier}

Et voici le fichier html :

Code : Tout sélectionner

<?php
session_start() ;

						
	
	// on a une nouvelle langue alors sauve la langue ou sinon on la récupère

	// intialise les langues
	
?>
<html>
<!-- Date de création: 05.04.2006 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="key1, key 2">
  <meta name="author" content="www.pelloquin.com">
  <meta name="generator" content="WebExpert 6">
<link rel="stylesheet" type="text/css" href="inc/style.css">
</head>
<body topmargin="0" leftmargin="0">
		
<table width="750" cellpadding="0" cellspacing="0" align="center" >
	<tr>
		<td width="150" height="300" valign="top" align="center" style="filter:progid:DXImageTransform.microsoft.Gradient(gradientType=0,StartColorStr='#B3CAFF',EndColorStr='white')">
		<br>
			<a class="menu" href="index.php?p=1">Acceuil</a><br>
			<a class="menu" href="index.php?p=2">Processus</a><br>
			<a class="menu" href="index.php?p=3">Tarif</a><br>
			<a class="menu" href="index.php?p=4">Devis online</a><br>
			<a class="menu" href="index.php?p=5">Devis</a><br>
			<a class="menu" href="index.php?p=6">Contact</a>

		</td>
		<td valign="top">				 .
		</td>
	</tr>
</table>

<hr width="750" size="1px">	
<center><font face="OCR A Extended, verdana" size="1">web dev by pelloquin.com</font></center>
</body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

SB · Message par SB » 16 avr. 2006, 19:15

La raison principale de la différence entre IE et FF est l'absence de doctype. En conséquence chaque navigateur fait comme il pense. Une fois rajouté un doctype correct auxquel les navigateurs pourront prendre référence pour traiter le code (par exemple <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) tu t'apercevras que IE fait comme FF (d'où la supériorité de ce dernier

) et qu'il te faut apporter des corrections à ton code pour obtenir ce que tu veux.

Quelques erreurs que j'ai relevé :

- charset=windows-1252

essaie de passer à quelque chose de moins microsoftien (un petit iso-8859-15 voire même utf-8) même si ce n'est pas à proprement parler une erreur

- <meta name="generator" content="WebExpert 6"> puisque tu auras corrigé le code, inutile de faire de la pub à cet éditeur de site qui n'est pas de qualité

- body {font: normal verdana; font-size: 10 px}
-> font ( http://www.yoyodesign.org/doc/w3c/css2/ ... -shorthand ).
-> pas d'espace entre 10 et px

- a:hover {color: #006699; font: 300=heavy; font-family: verdana, Tahoma, arial;[...]}
-> pareil, pas font mais font-weight, et 300 seulement, le =heavy est inutile
-> les polices ne doivent pas contenir d'espace "verdana,Tahoma,arial"

- <body topmargin="0" leftmargin="0">
-> topmargin et leftmargin sont à oublier et à remplacer par style="margin:0"

- <table width="750" cellpadding="0" cellspacing="0" align="center" >
-> Pour les valeurs différentes de 0 spécifier les unités "750px"
-> cellpadding, cellspacing et align à remplacer par style='text-align:center' pour le tableau et style='padding:0; margin:0' pour les cellules

- style="filter:progid:DXImageTransform.microsoft.Gradient(gradientType=0,StartColorStr='#B3CAFF',EndColorStr='white')"
-> là rien à faire, c'est du IE only, ça ne marchera jamais pour les autres

- Acceuil
-> c'est Accueil

Pour finir n'hésites pas à nous donner l'adresse du site, le code php de toute façon n'apparait pas.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

pelloq1 · Message par **pelloq1** » 16 avr. 2006, 20:30

Salut,

merci de tes conseils, je vais les implémenter et donner suite.

WebExpert n'est pas bien ? alors que me conseilles-tu ?

Mon site n'est pas encore online, je travaille en local sur mon pc (easyphp).

merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

SB · Message par SB » 17 avr. 2006, 10:09

Nvu est plus conforme aux standards mais dans la mesure où tu dis utiliser beaucoup de php ça risque de te poser des problèmes car il privilégie l'arbre html du document en modifiant au besoin tes pages.
Personnellement j'utilise Dreamweaver qui me semble un peu mieux mais loin d'être parfait non plus.
Au final il n'y a pas encore vraiment de solution miracle, il va falloir t'habituer à corriger le code.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

calimo · Message par **calimo** » 17 avr. 2006, 10:25

Bah, avec un bon éditeur de texte on fait directement du bon code et il n'y a pas besoin de le modifier/corriger par la suite

Geckozone