Webmaster Hub > Différences entre IE et FF que je ne comprends pas

Version complète: sur le forum Webmaster Hub : Différences entre IE et FF que je ne comprends pas

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Alomon

jeudi 27 juillet 2006 à 22:07

Bonjour,

Je vais vous déranger une nouvelle fois, mais cette fois-ci c'este pour tout autre chose : il y a des différences d'interprétation de mon code par IE et FF.

Tout d'abord, l'adresse : http://f1results.info/v3

Voilà ce qui change :

- le champ de recherche et le bouton sont placés je ne sais comment sur FF
- au niveau du menu, dès que je ferme un div, il y a un petit saut de ligne sous FF et c'est pourquoi on voit des espaces gris ou bleus : c'est la couleur de fond de la page pour le bleu, du menu pour le gris

Voilà le HTML et a CSS liés :

Problème avec le champ de recherche :

CODE

HTML :

<div class="barre">
    <form method="get" action="<?php echo $add_site ?>/recherche.php" id="formulaire" style="display:inline; vertical-align:bottom;">
        <fieldset>
        <label>
            [i][Partie "PROCHAIN GP..."; je vous passe les détails : il y a du SPIP et ce n'est pas le sujet du problème][/i]
        </label>
        <p>
        <input type="text" id="motsCles" class="champ_recherche" value="Rechercher" />
        <input type="submit" id="submit" class="bouton_recherche" value="GO" />
        </p>
        </fieldset>
    </form>
</div>

CODE

CSS :

.barre {
width:785px;
height:22px;
font:bold 11px Verdana;
color:#222222;
background-color:#cfcfcf;
margin-bottom:1px;
margin-top:1px;
border-top:#000000 1px solid;
border-bottom:#000000 1px solid;}

.champ_recherche {
width:122px;
height:15px;
background-color:#ececec;
border-right: #555555 1px solid;
border-top: #222222 1px solid;
border-left: #222222 1px solid;
border-bottom: #555555 1px solid;
font:bold 10px Verdana;}

.bouton_recherche {
width:20px;
height:19px;
background-color:#ececec;
border-right: #555555 1px solid;
border-top: #222222 1px solid;
border-left: #222222 1px solid;
border-bottom: #555555 1px solid;
font:bold 10px Verdana;}

form fieldset {
border:0;
float:right;
width:97%;}

form p {
float:right;
clear:none;
margin:0;}

form label {
float:left;}

Pour le menu, c'est beaucoup de PHP et je pense que le mieux est que vous vous référiez au code source, je vous l'autorise bien évidemment

Si vous avez besoin d'autres précisions, n'hésitez surtout pas.

Merci d'avance !!

@++

steph13

jeudi 27 juillet 2006 à 22:58

Salut,

De mémoire, je crois que le fieldset pose quelques soucis de mise en page.
Il faut jouer avec le margin ou le padding pour faire rentrer tout cela dans l'ordre.

Concernant tes menus, je ne saurais trop te conseiller de les mettre au point d'abord pour FF et ensuite seulement des les adapter pour IE.
Si tu vas dans le sens inverse, tu vas finir pas peter un cable.

Ensuite, il fortement conseillé d'utiliser les listes pour afficher ton menu.
Balise <ul><li>.
L'emploi de div comme tu le fais est plutôt à proscrire.
Je ne peux que t'inviter à faire un tour à cet endroit pour avoir une idée de l'emploi de ces balises, qui sont faites pour ce type d'emploi, entre autres.

Ensuite pour des images de séparation, il faut les mettre dans une classe, dans ton css, sinon, tu auras toujours ce décalage disgracieux.

Fais toi une page de test avec uniquement un menu, géré dans ton css par les balises <ul> et <li>.
Avant de placer des images en background, utilise des couleurs, ca te donneras une bonne vision, et tu pourra affiner tes réglages de bases.
Incorpore ensuite tes images de fonds.

Tu vas avoir un peu de boulot.
Mais le jeu en vaut la chandelle.

Bon courage à toi.

Alomon

jeudi 27 juillet 2006 à 23:16

Ok, ben je vais voir...

Pour la barre ("prochain GP" + recherche), j'ai mis le margin à 0, sans toucher au padding, et ca ne fonctionne pas. La technique du fieldset/label m'a été donnée sur le forum de all html (je ne sais pas si on peut citer d'autre sites ici...

) et ca marchait bien jusqu'à un moment où j'ai fait je ne sais plus quelle manip

Pour le menu, je n'avais effectivement pas pense aux listes... j'essaierai ca

Je vous tiens au courant plus tard, demain après-midi au minimum

@++ et merci beaucoup !!

Alomon

vendredi 28 juillet 2006 à 10:44

Maintenant, c'est bon pour la barre, je n'ai pas encore touché au menu, mais il ne reste "plus que" ca...

@++

mejr

vendredi 28 juillet 2006 à 14:17

Pour la page principale de ton site (http://www.f1results.info/v2/) (enfait un peu partout sur le site ou le font doit etre blanc) tu devrais metre <body BGCOLOR="white" > (je suis surement un rare cas ou j'ai mi le fond gris d'origine^^) et en meme temp (http://www.f1results.info/v2/2005/res_fra.php) en bas de la page,13 K. Räikkönen McLaren + 0'00"147 ==>3 au lieu de 13?

Alomon

vendredi 28 juillet 2006 à 14:43

Ah, oui, c'est vrai que ca force le navigateur à afficher du blanc...

Pour Räikkönen, il était bien 13ème et c'est la raison pour laquelle il est en rouge : il avait très certainement changé de moteur, ce qui lui a fait perdre 10 places sur la grille... D'ailleurs, j'aurais dû mettre "3" en face de Schumi, "4" pour Sato, etc, "12" pour Webber et bien "14" pour Heidfeld ; mais à l'époque, je débutais dans l'affichage complet des résultats : la V2 date de décembre 2005, il suffit de regarder les autres archives (2004 et antérieures) pour se redre compte que je n'étais pas tout à fait au point

))

@++

Alomon

vendredi 28 juillet 2006 à 18:08

Re tout le monde,

Alors, j'ai avancé un peu pour le menu, mais là je rame. Regardez la page avec son code et voilà à quelle classe correspond chaque couleur :

- rose/violet : body
- vert (on ne le voit pas, il est derrière) : menu
- jaune : menu_unique
- rouge : menu_sous_menu
- noir : separation (c'est la solution pour éviter le saut de ligne)

Déjà, je ne comprends pas pourquoi avec ce code, le contenu de la page (les news), ne sont pas au milieu comme avant.
De plus, je ne vois pas pourquoi on voit du noir à gauche du rouge alors que "separation" ne continet que les 2 images de séparation...

Au cas où, je vous passe la partie de la CSS correspondant au menu :

CODE

.menu {
width:196px;
float:left;
background-color:#009900;}

.menu_unique {
width:196px;
background-color:#FFFF00;}

.menu_titre {
width:170px;
float:left;
text-align:left;
margin-left:8px;
font:bold 11px Verdana;
letter-spacing:2px;
border-bottom:#999999 1px solid;}

.menu_sous_menu {
width:155px;
float:right;
text-align:left;
font:11px Verdana;
background-color:#FF0000;}

.menu_unique_clas {
height:50px;
width:196px;
margin:0;}

.separation {
margin:0;
padding:0;
heighy:0;
background-color:#000000;}

Merci vraiment de votre aide !!!

_AT_bientôt

P.S. : ces questions n'ont de sens que pour FF, je bosse avec FF maintenant...

ghost

vendredi 28 juillet 2006 à 22:45

Bonjour,

Va jeter un oeil (même les 2) là :

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Alomon

samedi 29 juillet 2006 à 05:11

Cool, ca peut toujours servir cette page !!! Merci beaucoup !!!

@++

Alomon

samedi 29 juillet 2006 à 22:03

Hello,

J'ai galéré dessus toute la journée et je n'ai rien trouvé !

Le modèle correspondant à mon site est celui-ci : http://css.alsacreations.com/modeles/modele3.htm

Voilà les correspondances entre leurs classes css et les miennes :

- header -> entete
- concteneur -> centre
- centre -> contenu
- gauche -> menu
- pied -> pied

Voilà la css qu'ils proposent, suivie de la mienne :

CODE

CSS D'ALSA

#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

CODE

MA CSS

#entete {
font:bold 12px Verdana;
background-color:#cfcfcf;}

#centre {
position:absolute;
width:785px;
left:50%;
margin-left:-394px;
border-left:#1D508D 1px solid;
border-right:#222222 1px solid;
background-color:#1D508D;}

#contenu {
background-color:#f5f5ef;
margin-left:196px;
border-left:#222222 1px solid;
background-color:#FFFFFF;}

#menu {
position:absolute;
left:0;
width:196px;
background-color:#1D508D;}

#pied {
width:588px;
float:right;
background-color:#cfcfcf;
margin-bottom:1px;
margin-top:1px;
border-top:#000000 1px solid;
border-bottom:#000000 1px solid;
text-align:right;
font:10px Verdana;}

Là je sèche totalement ; si vous voyez quelque chose qui diffère et qui peut faire que le "contenu" (les "news") n'est pas en face du menu, faites-moi signe...

Merci beaucoup !!!

@++

ghost

samedi 29 juillet 2006 à 23:17

Bonjour,

Sinon regarde un peu du coté de ton html, tu utilises je pense un peu trop de <div> du genre <div class="titre"> aisément remplacable par<h2> etc ce qui complique ton code presque à la limite de ce que l'on peut faire avec des <table>

Tu verras avec un html plus clair et un modèle sur 2 colonnes tu devrais y parvenir, juste un autre détail si tu places tes blocs linéairement par un float, fais attention au bordures, elles rentrent en compte dans la largeur de tes blocs et pour 1px, un bloc peu "passer dessous".

Bon courage

<edit>
Je pense que tu as une mauvaise "imbrication" de tes blocs notamment des blocs news dans ton html
</edit>

Alomon

dimanche 30 juillet 2006 à 00:34

Ok, je vais regarder tout ca, mais peut-être pas là tout de suite

Je vous tiens au courant de toute façon.

Merci encore !!!

@++

Alomon

lundi 31 juillet 2006 à 11:10

Bon ben voilà, j'y suis presque

C'était un truc tout bête : je m'étais concentré sur le menu et je n'avais pas vu que j'avais mis

CODE

alors que c'est

CODE

#contenu{...}

qui est défini dans la CSS...

Je continue à vous tenir au courant

@++

Alomon

dimanche 13 août 2006 à 16:55

Hello,

Juste pour vous dire que je n'ai toujours pas trouvé la cause des espaces enter les menus (petites barres grisses) et que j'ai vraiment besoin de votre aide !

Merci beaucoup !!!!

@++

ghost

dimanche 13 août 2006 à 17:52

Bonjour,
il semble que ce soit le background de ton menu_unique qui ressorte après ton image séparation_bas.
Essayes de d'associer à ton image une class avec un margin: 0 pour vraiment la coller au bas de ton bloc et ta barre grise devrait disparaitre.
En tout cas c'est un problème de cet ordre.

Alomon

lundi 14 août 2006 à 23:47

Le truc c'est que tous les margin sont déjà à 0... Et c'est bien pour ça que je galère depuis tant de temps dessus : ca doit venir d'autre part, mais je ne vois pas du tout d'où

Alomon

samedi 19 août 2006 à 14:33

Visiblement, personne ne peut m'aider ; auriez-vous alors un moyen de contourner le problème : il faudrait, je pense, changer totalement le code du menu pour que ca marche. Je ne dis pas "utiliser un tableau", hein

Mais bon, peut-être autre chose...

Merci d'avance !!

@++

Dan

samedi 19 août 2006 à 14:47

Je pense que tu as une chance de te débarrasser de ces barres grises en réécrivant:

CODE

</div>
<img src="http://f1results.info/v3/images/separation_bas.gif" width="186px" alt="" />
</div>

comme ceci:

CODE

</div><img src="http://f1results.info/v3/images/separation_bas.gif" width="186px" alt="" /></div>

En veillant à éviter tout espace...
Et tu aurais intérêt à donner aussi une hauteur à ton image...

Dan

La Gerance

samedi 19 août 2006 à 15:37

Il peut aussi éventuellement donner une class à l'image avec margin et padding à 0
Je n'ai pas tout lu mais si la solution de Dan ne marche pas, tu peux essayer ca

ghost

lundi 21 août 2006 à 21:58

Bonjour,

Essaye un {vertical-align: top;} qui devrait éliminer la ligne de base ??

Alomon

mercredi 23 août 2006 à 20:26

Hello,

J'essaye ces solutions et je vous recontacte

_AT_tte

P.S. : _AT_La Gerance : cette solution ne marche pas : c'est déjà fait

Alomon

mercredi 23 août 2006 à 20:38

Re,

J'ai essayé la solution de Dan, c'est-à-dire d'enlever les sauts de ligne, et elle marche parfaitement bien sous IE, mais pas sous FF ! Je précise que quand je regarde la source de la page sous FF, tout est bien sur une seule ligne.

Et les autres solutions proposées ne changent malheureusement rien au problème

Donc ca avance, mais je pense qu'il soit encore falloir autre chose... décidemment...

Merci encore beaucoup de votre aide !!

@++

ghost

jeudi 24 août 2006 à 02:51

Bonjour,

J'ai un brin de ménage dans le code de ton menu (c'est pas fini mais bon, le sommeil m'arrive) avec ça tu devrais peut être t'en sortir.

CODE

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>problème menu</title>
 <style type="text/css">

/******************** Style du menu ********************/
/* Les liens */
a.menulink {
display:block;
font:11px Verdana;
width:150px;
color:#222222;
text-decoration:none;
padding:0;
margin:0;}

a.menulink:hover {
border:0px solid;
font:11px Verdana;
width:150px;
color:#222222;
background-color:#EEEEEE;
text-decoration:none;}

/* La pr�sentation des menus */
#menu {
position:absolute;
left:0;
width:186px;
background-color:#fff;
margin:0;
padding:0;
}

.menu_unique {
width:186px;
background-color:#CFCFCF;
height:1%;
}

.separateur {
width:186px;
height:19px;
}

.separateur img {
width:186px;
height:19px;
}

h1 {				/* Titres */
width:170px;
text-align:left;
text-indent:8px;
margin-bottom:10px;
margin-top:0;
font:bold 11px Verdana;
letter-spacing:2px;
border-bottom:1px solid #999999;
background-color:#CFCFCF;}

.menu_sous_menu {
width:186px;
text-indent:15px;
text-align:left;
font:11px Verdana;
background-color:#CFCFCF;


}

h2 {/* Points de suspension */
width:170px;
text-align:right;
font:11px Verdana;
margin-bottom:0;}


</style>
 </head>
<body>
<!-- Menu -->
<div id="menu">

<div class="menu_unique">
<h1>Généralités</h1>
<div class="menu_sous_menu">
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> ACCUEIL</a>
<a href="contact.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> CONTACT</a>
<a href="Forum/index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> FORUM</a>
<a href="partenaires.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> PARTENAIRES</a>
<a href="newsletter.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> NEWSLETTER</a>
</div> 
<div class="separateur"><img src="http://f1results.info/v3/images/separation_bas.gif" alt="" /></div>
</div>

<div class="separateur"><img src="http://f1results.info/v3/images/separation_haut.gif" alt="" /></div> 
<div class="menu_unique">
<h1>Saison 2006</h1>
<div class="menu_sous_menu">
<a href="2006/res_all.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> RESULTATS</a>
<a href="2006/clas.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> CLASSEMENTS</a>
<a href="2006/cal.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> CALENDRIER</a>
<a href="2006/pilotes.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> PILOTES</a>
<a href="2006/reg.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> REGLEMENTS</a>
<a href="2006/pres.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> MONOPLACES</a>
</div>
<div class="separateur"><img src="http://f1results.info/v3/images/separation_bas.gif" alt="" /></div>
</div>

<div class="separateur"><img src="http://f1results.info/v3/images/separation_haut.gif" alt="" /></div> 
<div class="menu_unique">
<h1>Archives</h1>
<div class="menu_sous_menu">
<a href="2005/2005.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> 2005</a>
<a href="2004/2004.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> 2004</a>
<a href="2003/2003.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> 2003</a>
<a href="2002/2002.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> 2002</a>
<a href="2001/2001.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> 2001</a>
<a href="2000/2000.htm" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> 2000</a>
</div>
<div class="separateur"><img src="http://f1results.info/v3/images/separation_bas.gif" alt="" /></div>
</div>

<div class="separateur"><img src="http://f1results.info/v3/images/separation_haut.gif" alt="" /></div> 
<div class="menu_unique">
<h1>Partenaires</h1>
<div class="menu_sous_menu">
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> RACING LIVE</a>
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> AMAZON</a>
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> GOF1</a>
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> F1CLASSEMENT</a>
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> STAGE-PILOTAGE</a>
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> WORLDAUTOCLUBS</a>
<a href="index.php" class="menulink"><img src="http://f1results.info/v3/images/pucemenu.gif" class="noborder" alt="" /> 1&1</a>
</div>
<div class="separateur"><img src="http://f1results.info/v3/images/separation_bas.gif" alt="" /></div>
</div>

<div class="separateur"><img src="http://f1results.info/v3/images/separation_haut.gif" alt="" /></div> 
<div class="menu_unique">
<h1>Classements</h1>
<div class="menu_sous_menu">
<span style="text-align:center;"><b>Pilotes 2006</b></span>
<table width="100%">
<tr>
<td>1. </td>
<td>F. Alonso </td>
<td>
100
</td></tr>
<tr>
<td>2. </td>
<td>M. Schumacher </td>
<td>
89
</td></tr>

<tr>
<td>3. </td>
<td>F. Massa </td>
<td>
50
</td></tr>
<tr>
<td>4. </td>
<td>G. Fisichella </td>
<td>
49
</td></tr>
<tr>

<td>5. </td>
<td>K. Räikkönen </td>
<td>
49
</td></tr>
</table>
<h2>(...)</h2>
<br />
<span style="text-align:center;"><b>Ecuries 2006</b></span>
<table width="100%">
<tr>
<td>1. </td>

<td>Renault </td>
<td>
149
</td></tr>
<tr>
<td>2. </td>
<td>Ferrari </td>
<td>
139
</td></tr>
<tr>
<td>3. </td>
<td>McLaren </td>

<td>
77
</td></tr>
<tr>
<td>4. </td>
<td>Honda </td>
<td>
37
</td></tr>
<tr>
<td>5. </td>
<td>Toyota </td>
<td>

23
</td></tr>
</table>
<h2>(...)</h2>
</div>
</div>
<div class="separateur"><img src="http://f1results.info/v3/images/separation_bas.gif" alt="" /></div>
</div>

</div>
</body>

</html>

Dudu

jeudi 24 août 2006 à 04:48

Règle d'or de IE: si la première ligne de code n'est pas un doctype, IE passe en quirks mode.

Ceci est valable si la première ligne est:

un prologue XML (cas bien connu)
un
un "hjfhzejjihiqshkl" ou autre série de mots de votre imagination
une ligne blanche

PS: pour les codes longs, prière d'utiliser la balise codebox. Ce n'est pas faute de le répéter pourtant

Alomon

jeudi 24 août 2006 à 13:42

Voilà le verdict : http://f1results.info/v3/menu_test.htm. Si vous regardez cette page sous FF? il n'y a pas les barres grises !!!

Alors là, je suis encore plus noyé :~~

Arf, je viens juste de voir le div "separateur" ; je regarde ca de plus près

_AT_tte

Alomon

jeudi 24 août 2006 à 15:57

Et voilà, j'ai apportées toutes les modifications qu'a apporté ghost au code et ca marche nikel

Merci beaucoup pour votre aide !!! C'est génial !!

@++

ghost

jeudi 24 août 2006 à 17:44

Salut,

Satisfait de t'avoir un peu aidé, mais surtout si tu as compris là où ça bloquait.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.