Aller au contenu

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

Alomon

Par Alomon
dans (X)HTML et CSS

 Partager

Sujets conseillés

Alomon

Alomon

Posté
Posté (modifié)

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 :


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 :rolleyes:

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

Merci d'avance !!

@++

Modifié par Dan
steph13

steph13

Posté
Posté

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

Alomon

Posté
  • Auteur
Posté

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... :wacko: ) et ca marchait bien jusqu'à un moment où j'ai fait je ne sais plus quelle manip :nonono:

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

Alomon

Posté
  • Auteur
Posté

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

@++

mejr

mejr

Posté
Posté (modifié)

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?

Modifié par majr
Alomon

Alomon

Posté
  • Auteur
Posté

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

Alomon

Posté
  • Auteur
Posté

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 :

.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...

Alomon

Alomon

Posté
  • Auteur
Posté (modifié)

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 :

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

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 !!! :cool:

@++

Modifié par Alomon
ghost

ghost

Posté
Posté (modifié)

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>

Modifié par ghost
Alomon

Alomon

Posté
  • Auteur
Posté

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

Alomon

Posté
  • Auteur
Posté (modifié)

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 

<div class="contenu">

alors que c'est 

#contenu{...}

qui est défini dans la CSS...

Je continue à vous tenir au courant ;)

@++

Modifié par Alomon
  • 2 semaines plus tard...
Alomon

Alomon

Posté
  • Auteur
Posté

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

ghost

Posté
Posté

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

Alomon

Posté
  • Auteur
Posté

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ù :wacko:

Alomon

Alomon

Posté
  • Auteur
Posté

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

Dan

Posté
Posté

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

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

comme ceci:

</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

Charlie

Charlie

Posté
Posté

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

ghost

Posté
Posté

Bonjour,

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

Alomon

Alomon

Posté
  • Auteur
Posté

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

Alomon

Posté
  • Auteur
Posté

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

ghost

Posté
Posté

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.


<!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

Dudu

Posté
Posté

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 <!-- commentaire HTML -->
  • 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 :(

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...