28220 sujets

CSS et mise en forme, CSS3

Compatibilité firefox

J’ai cette page -http://www.hotels-hotelclub.com/index.html qui s’affiche très bien sur IE mais qui est tronquée sous firefox. Pourriez vous m’orientez, je ne parvient pas à comprendre d’ou vient le problème.
bonsoir,

un extrait de ton code source

 <div id="petit-bandeau"> <img src="/images/petit_bandeau.gif" width="642" height="15" alt=""> </div>
  <div id="titre-content"> <img src="/images/titre_content.gif" width="642" height="40" alt=""> </div>
  <div id="bandeau-bleu"> </div> [#red]<= enleve ce </div> et met le apres le </div> de fermeture de id="content" qui se trouve avant la ligne de code du footer [#black]
  <div id="content">
merci beaucoup!

par contre peux tu m'expliquer pourquoi il faut la fermer après les autres?

Smiley smile j'ai peut etre un raisonnement un peu trop "tablé"
bah en fait non cela ne fonctionne pas! Smiley confused

on dirait que "bg.gif" qui devrait faire toute la longueur de "Tableau_01" ne se répète pas, et que le "content" ne s'affiche pas! Smiley decu
on dirait que lorsqu'il y a un attribu "float" cela pose problème!

j'ai retiré celui qui se trouvait sur le "div id=content-home", maintenant firefox affiche ce bloc mais il ne tien pas compte de la hauteur du menu (qui lui a un un "float=left")!

comment contourner le probleme?


#Tableau_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:775px;
	background-image: url(/images/bg.gif);
	background-repeat:repeat-y;
	margin-top:0px;
}
#title {
	position:absolute;
	left:0px;
	top:0px;
	width:109px;
	height:299px;
}
 
#photo {
	position:absolute;
	left:109px;
	top:0px;
	width:163px;
	height:244px;
}

#bande-top {
	position:absolute;
	left:272px;
	top:0px;
	width:479px;
	height:53px;
}

#bande-right {
	position:absolute;
	left:751px;
	top:0px;
	width:24px;
	height:299px;
}

#home {
	position:relative;
	left:272px;
	top:53px;
	width:61px;
	height:23px;
}

#about-us {
	position:absolute;
	left:333px;
	top:53px;
	width:103px;
	height:23px;
}

#services {
	position:absolute;
	left:436px;
	top:53px;
	width:102px;
	height:23px;
}

#partners {
	position:absolute;
	left:538px;
	top:53px;
	width:108px;
	height:23px;
}

#contacts {
	position:absolute;
	left:646px;
	top:53px;
	width:105px;
	height:23px;
}

#main4 {
	position:absolute;
	left:272px;
	top:76px;
	width:479px;
	height:97px;
}

#main4016 {
	position:absolute;
	left:272px;
	top:173px;
	width:57px;
	height:71px;
}

#page-description {
	position:absolute;
	left:329px;
	top:173px;
	width:383px;
	height:71px;
	background-image: url(/images/page_description.gif);
	background-repeat: repeat-x;
}

#main4018 {
	position:absolute;
	left:712px;
	top:173px;
	width:39px;
	height:71px;
}

#petit-bandeau {
	position:absolute;
	left:109px;
	top:244px;
	width:642px;
	height:15px;
}

#titre-content {
	position:absolute;
	left:109px;
	top:259px;
	width:642px;
	height:40px;
	margin: 0px;
}

#bandeau-bleu {
	position:relative;
	left:0px;
	width:109px;
	height:295px;
	top: 299px;
	display:block;
}

#content {
	position:relative;
	left:109px;
	width:643px;
	padding:5px;
	visibility: visible;
}
#menu {
	width:150px;
	position: relative;
	float: left;
	left: 0px;
	height: 100%;
}
#menu a {
	text-decoration:none;
	color:#000000;
	text-transform:capitalize;
}
#content-home {
	position:relative;
	width: 433px;
	left: 0px;
	height: 100%;
}

#bande-right2 {
	position:relative;
	left:752px;
	top:299px;
	width:23px;
	height:295px;
}

#hotels-hotelclub-2-20 {
	position:relative;
	width:775px;
	margin-top: 0px;
	background-color: #42474A;
}
Bonjour,

IE tient compte de la hauteur de l'élément flottant pour calculer celle du conteneur où se trouve... ce qu'il ne devrait pas faire selon CSS2.

Pour que les navigateurs conformes (Firefox, Opera, Safari...) fassent de même, ajouter la propriété overflow: auto à ce conteneur.
Sujet clos
Aller à