28173 sujets

CSS et mise en forme, CSS3

Petit problème de height avec Netscape.

Salut a tous,

j'ai un petit soucis avec netscape. En fait si je ne lui impose pas un height défini il me met un height de 0 alors que les autres navigateurs s'adapte au contenu.

Voici mon code pour info:


<div class="page2">
		<div class="left">
			Text
		</div>
		<div class="center">
			Test
		</div>
		<div class="right">
			Test
		</div>
		<div class="separe"></div>
	</div>


et la feuille de style associée:


.page2{
width: 1001px;
}
.top {
width: 1001px;
height: 150px;
}
.left {
min-height:1px;
width: 158px;
float:left;	
}
.center {
width: 685px;
float:left;
}
.right {
min-height:1px;
width: 158px;
float:left;
}
Salut,

Je "up" car je rencontre le même problème qui est assez pénible.
Netscape n'adapte pas la hauteur d'un conteneur dés lors que ses blocs de contenu sont disposés en float.

J'ai fais beaucoup de recherches et de bidouilles mais je n'ai pas encore trouvé la solution.
C'est quand même curieux comme comportement...

death83, as-tu trouvé un palliatif depuis ton dernier message ?

Mon code...
  <div id="Container">

    <div id="BlocMenu">
      <p>Menu</p>
    </div>

    <div id="BlocContenu">
      <p>Contenu</p>
      <p>Contenu</p>
    </div>

  </div>


#Container { background-color: red; width: 700px; float: left;}
#BlocMenu { background-color: yellow; width: 200px; float: left; }
#BlocContenu { background-color: orange; width: 500px; float: left;}
Eureka !

A force de tests je viens de trouver une solution, et propre qui plus est...
Il suffit d'ajouter la propriété suivante au bloc conteneur et le tour est joué ! 
display: table-cell;

Depuis le temps que je me prends la tête sur ce problème... Je n'arrive pas à croire que la solution soit aussi simple... Smiley ravi
Modifié par Basil (05 Nov 2006 - 17:47)
Modérateur
bonjour,

en fait il y a plusieurs options 
 
    *  display:table;
    *  display:table-cell;
    *  display:table-row;
    *  display:inline-block;/* ff ne connait pas */
    *  float:left; ou right; (he oui [smile] )
    *  overflow:hidden;
    *  overflow:auto;

, inserer une balise supplementaire en dernier dans le flux du conteneur a etirer avec un clear:both; left ou right ,

user du pseudo elment :after et creer de toute piece une balise de type block avec a nouveaux le clear:both , left ou right; (reponse sur le forum ou dans la faq en fait pour l'ensemble des trucs rappeler ici )

....

dans IE , il suffit de provoque le layout avec au choix et selon les circonstances :


    * display:inline-block;/* attention IE le gere a sa maniere */
    * width:xx;
    * height:xx;
    * float:left; ou right; 
    * zoom:1; (non valide , mais utile a connaitre pour tester rapidement si un probleme vient de la )



la liste est surement incomplete , et chaques possibilités sera a choisir en fonction des besoins et possibilités de la page ou le souci apparait.

bonsoir
Modifié par gcyrillus (05 Nov 2006 - 21:26)
@Vero : Certes, mais je ne suis pas l'initiateur du sujet...


Revenons à nos moutons :

Préférez display: table à display: table-cell pour pouvoir centrer le conteneur à l'aide de margin: 0 auto.

Toutefois attention, un autre problème fait surface : Netscape (<7 j'crois) ne gère pas border-collapse: collapse (ben voyons !), du coup un espacement que l'on ne peut pas supprimer est ajouté autour du bloc étant donné qu'il est traité comme un tableau...

Je suis de bonne volonté, je fais tout pour pouvoir être compatible sur un maximum de navigateurs, mais là j'en ai ras la frange, Netscape c'est carrément la fête du slip, on ne code pas pour ce navigateur, on bidouille...

Bilan, j'abandonne la compatibilité Netscape pour ce projet...
Dorénavant je ne charge aucune feuille de style pour ce navigateur, texte brut seulement, c'est moins pire que d'avoir des blocs qui partent dans tous les sens...

Affaire classée.
@gcyrillus : je vais lui laisser encore une petite chance et voir avec ce que tu me proposes...
Youpi !
Merci pour ton message salvateur gcyrillus.

Pour info je viens de rendre mon site compatible Netscape grâce à la pseudo-classe "after" :
http://forum.alsacreations.com/faq/#item6 (voir "la troisième solution")

Ebéh... Je reviens de loin... Que de temps perdu...
Maintenant ça me fait tout drôle de voir mon site tourner sur Netscape.... ^^

Merci à tous !
Sujet clos
Aller à