Pb XHTML entre IE et FF

meudah · 15 Mars 2006

Bonjour à tous, voilà je suis webmaster indépendant et j'ai décidé (et je crois que c'est une bonne décision) de revoir toutes mes habitudes de conception de sites en HTML et de passé au XHTML, donc je suis en train de faire des petits exercices pour transitionner une page HTML en XHTML.

Mon problème est le suivant : j'ai un problème de compatibilité entre IE et FF, c'est un décalage du menu. Mais juger par vous même les images parlent plus que des mots.

Menu sous FF :

Menu sous IE

Pour que le menu sous IE passe correctement je suis obliger d'augmenter la taille de mon menu de 3px et donc de le passer a 763px au lieu de 760px. A noter que la somme de mes images font bien 760px.

Et voici le code que j'utilise.

POUR LE XHTML :

<body>
<div id="container">
  <!-- ENTETE DE LA PAGE -->
  <div id="titre"><span></span></div>
  <!-- MENU DE LA PAGE -->
  <div id="menu">
	  <span><img src="image/trait_bas.gif" width="20" height="22"    alt=""/></span>
	  <img src="image/accueil_1.gif" name="Image1" width="71" height="22"  border="0" alt="" id="Image1" />
	  <img src="image/reservation_1.gif" name="Image2" width="99" height="22" border="0" alt="" id="Image2" />
	  <img src="image/tarifs_1.gif" name="Image3" width="64" height="22" border="0" alt="" id="Image3" />
	  <img src="image/vehicule_1.gif" name="Image4" width="88" height="22" border="0" alt="" id="Image4" />
	  <img src="image/agences_1.gif" name="Image5" width="82" height="22" border="0" alt="" id="Image5" />
	  <<img src="image/guide_1.gif" name="Image6" width="65" height="22" border="0" alt="" id="Image6" />
	  <span><img src="image/logo_bas.jpg" width="271" height="22" alt="" /></span>
  </div>
</div>  
</body>

ET VOICI POUR LE CSS :

/* specific divs */

#container {
	background-color: #FFFFFF;
	border: 1px solid #333333;
	margin-left: auto;
	margin-right: auto;
	width: 760px;
}
#titre {
	background-image: url(../image/logo.jpg);
	background-repeat: no-repeat;
	height: 88px;
}
#menu {
	height:22px;
	margin:0px;
	padding:0px;
}
#menu a, span {
	float:left;
	margin:0px;
	padding:0px;
}

Voila si quelqu'un pouvait m'éclairer ce serait cool parceque c'est chiant de buter sur un truc comme ça. Merci d'avance.

Julien L · 15 Mars 2006

Bonjour,

Il est impensable que logo_bas.jpg soit une image codé en IMG.

Alors comment faire ?

1 div "Header" de background-color bleu et background-image avce le visuel de TOUTE la voiture en top right.

Puis dans le div HEADER tu viens créer ton menu en UL LI que tu calle en position: absolute.

Le menu passera au dessus du backgeround et tu auras le même effet sans pb.

JL

meudah · 15 Mars 2006

Ok, je crois avoir compris ce que tu me propose de faire, c'est vrai que ca simplifie grandement les choses puisqu'on ne crée qu'un seul <div>. C'est un reflexe qu'il faut que j'arrive a chopé, car je réfléchi encore en <table> pour strucutré ma page.

Bon j'essaye et je vous tiens au courant.

meudah · 15 Mars 2006

Ok j'y suis arrivé, mais je trouve que c'est quand même pas évident. e sais pas si pour vous c'etait pareil quand vous débutiez mais je m'embrouille entre ces "position", "display", "float".

Est-ce qu'il est mieux de faire une page qu'avec des <div> etc... ou bien on peut quand meme mettre des tableaux ?

Sinon j'aimerai bien savoir quels sont les règles syntaxique pour affecter un CSS à une balise via un parent. Ex : "#menu li" ou "div.fenetre dl dd img" est-ce que vous pouvez m'expliquer les différences ?

Merci d'avance pour vos réponses !

Julien L · 15 Mars 2006

#menu li va styler les LI qui sont dans la balise avec ID=menu.

Exemple, si tu met un premier DIV nommé MENU puis le LI dedans, cela va l'affecter.

Si le LI est après la balise /DIV alors il ne sera pas affecter

div.fenetre dl dd img va affecter l'image qui est dans le DD, lui même dans le DL du DIV de classe FENETRE

meudah · 16 Mars 2006

Ok merci Julien pour tes reponses. Je vais continuer à m'entrainer.

Connexion

Pb XHTML entre IE et FF

Sujets conseillés

meudah

Julien L

meudah

meudah

Julien L

meudah

Veuillez vous connecter pour commenter

Parcourir

Activité