Bloc vide sans hauteur sous FF, mais pas IE

Bonjour,

IE6 peut- il afficher un container de height: 0, vide (qui est juste un clear:both). Sous FF ce div est invisible, sous IE il reste avec une hauteur d'une 15zaine de px dont je n'arrive pas à me débarrasser (zéro hauteur est indospensable). il s'agit du pseudo pied de page #footer

http://www.cetavoir.com/modx

Merci pour toute idée

-----
Toute l'histoire :
Dans l'historique de ce template le footer fut d'abord inégré dans le container principal.

Il s'agit d'un modèle assez classique avec - en gros- 2 colonnes en float et dessous (toute la largeur un footer en clear both)

Le tout dans un container pour faire des bords ombrés et l'ensemble dans un container de centrage.

Depuis, le contenu du footer s'est vu positionné en "dehors" au niveau de l'ombre du bas. (#real-footer)

Afin de conserver le mécanisme d'adaptation en hauteur des colonnes j'ai laissé le bloc #footer à sa place, vide, sans rien en esayant de le forcer en height :0, line height:0..

Mais si sous FF il disparait visuellement (sans rien faire ds la css) sous IE il ne veut rien savoir et affiche une bande blanche d'une 15zaine de px de haut.
Modifié par elz64 (08 Mar 2007 - 17:36)

IE laissera toujours une hauteur égale à la hauteur de texte, tu peux donc rajouter un font-size:1px (ou même 0 ?) ton bloc ne fera alors plus que 1px de haut

Bon enfin laisser un bloc vide pour ça c'est pas très propre, un <hr /> serait plus approprié (mais sa hauteur se modifie difficilement aussi donc en fait ça t'arrange pas

Bonjour,

Alternativement, remplacer l'antique technique du "div clear" (souvenirs, souvenirs...) par un contexte de formatage (overflow:hidden ou auto sur le conteneur), nettement plus hype.

(Et, il faut bien l'avouer, plus pratique puisque sans conséquences sur le code HTML)
Modifié par Laurent Denis (08 Mar 2007 - 17:43)

Merci de ces suggestions

a écrit :
IE laissera toujours une hauteur égale à la hauteur de texte, tu peux donc rajouter un font-size:1px (ou même 0 ?) ton bloc ne fera alors plus que 1px de haut

Effectivement je veux 0. Et il n'y a pas de texte dedans.

le HR... hum 0px C'est possible ca ?

a écrit :
...par un contexte de formatage (overflow:hidden ou auto sur le conteneur)

Heu ... ben là je ne vois pas trop : en général sans un bloc de 'fond' dans le conteneur global les contenus des colonnes peuvent dépasser selon le taux de remplissage et la taille de police.

(Il y a plein de modèles ds les tuto ici (ou ailleurs) qui ne fonctionnent en fait que si la colonne (souvent les menus) offre un remplissage inférieur au contenu mais déborde si on joue avec . )

Je rencontre aussi ce problème.....
En fait, ma div_contenu contient des données "textes" récupérés d'une BDD.
Parfois cependant, la donnée BDD est "vide" donc la div_contenu ne contient rien.

Dans FF, pas de prob, la div_contenu appelant une donnée BBD vide n'apparait pas à l'affichage
(sachant que cette div_contenu a height:auto; witdh: 600px;)

Dans IE, cette div_contenu affiche un espace blanc... d'environ 15px.

Donc, en mettant pour la div_contenu :

{ height:auto; witdh: 600px;}

ou

{ witdh: 600px;} 

ou

{ height: 1%; witdh: 600px;}

même problème d'affichage sous IE

Par contre

{ height:1px; witdh: 600px;}

pour div_contenu avec donnée BDD contenant du texte OU vide, celle-ci fait bien 1px de hauteur ?!?
Modifié par wobo (14 Mar 2007 - 19:15)

pour wobo, je ne suis pas sure que ton problème ait une solution css.
En effet, c'est si on définit la hauteur du texte à 1px que ie accepte de réduire là div. Or tu ne peux pas faire ca.

Par contre, je vois une solution serveur simple :
teste si tu as du contenu avant de créer la div en html !

Après quelques temps de recherche, pas de solutions encore...
Effectivement, seul moyen de réduire l'affichage d'une div "vide" sous IE, c'est de jouer sur line-height ou font-size dans le css.....mais vu que je récupère du texte de ma BDD....

côté css:

.titre_txt { 
	height: auto;  
	width : 660px;
	line-height: normal;
	margin: 0px;
	padding: 0px;
	border: none;
	font-family: verdana;
	font-size: 10px;
	color: #000000;
	font-weight: bold;}

.contenu_txt { 
	height: auto; 
	width : 660px;
	line-height: normal;
	margin: 0px;
	padding: 0px;
	border: none;
	font-family: verdana;
	font-size: 10px;
	color: #000000;
	text-align: justify;}

J'essaye de mettre des attributs supplémentaires qui auraient une influence mais rien pour l'instant.

côté html:

    <div class="titre_txt"><?php echo $donnees['titre_op1']; ?></div>
    <div class="contenu_txt"><?php echo $donnees['option1']; ?></div>
    <div class="titre_txt"><?php echo $donnees['titre_op2']; ?></div>
    <div class="contenu_txt"><?php echo $donnees['option2']; ?></div>
    <div class="titre_txt"><?php echo $donnees['titre_op3']; ?></div>
    <div class="contenu_txt"><?php echo $donnees['option3']; ?></div>

Sachant que je récupère beaucoup + de choses de ma BDD, donc pour chaque div où le contenu de la BDD est vide, j'ai une ligne vide avec IE, alors que sous FF c'est impect.
Modifié par wobo (14 Mar 2007 - 19:14)

comment je peux tester si j'ai du contenu, PUIS générer une div en fonction?

quel langage serveur tu utilises pour prendre les donnees dans ta bdd ?

je vois que tu utilises du php;

et bien c pas tres difficile

supposonds que tu aies fait ta requêtes et que tu aies mis ton contenu dans le table $donnees

if (sizeof($donnes)!=0) {
     echo "<div class='contenu'>";
     /** affichage des donnees **/
     echo "</div>";
}

Cool....c'est exactement ce type de soluce qu'il me faut je pense...

Pas de données, pas de div, donc pas de "ligne blanche" ds IE...... et ds FF c'est idem.

donc pour mon cas:

if (sizeof($donnees['titre_op1'])!=0) {

     echo "<div class="titre_txt'>";
     echo $donnees['titre_op1'];
     echo "</div>";

}

!=0 signifie "n'est pas égal à zéro"? C'est ça?

NB. autodidacte acharné, donc comme un musicien qui compose sans connaitre le solfège.... me pose quelques soucis de vocabulaire..... [code]
Modifié par wobo (14 Mar 2007 - 19:13)

Salut wobo.

Merci d'éditer tes messages pour mettre en forme ton code à l'aide des balises adéquates ([ code] & [ /code] sans les espaces), comme demandé dans les règles du forum, que tu as évidemment lues et approuvées en t'inscrivant

Sorry..... Merci de me le rappeler.
Modifié par wobo (14 Mar 2007 - 19:19)

hum bon ..

Donc effectivement si le div en question n'est là QUE pour son clear:both, alors ie lui donne TJS une hauteur de 1 px, quoiqu'in fasse.

IE6 oui, MAIS PAS IE7 qui fait comme FF et affiche une hauteur nulle (donc aucune visibilité.)

Salut,

Il me semble que Laurent t'a donné la solution un peu plus haut : utiliser un contexte de formatage ...

désolé, mais je ne vois pas sa soluce.


en quoi jouer sur l'overflow peut aider ?

Le container est fluide verticalement.

et doit le rester qqsoit les contenus à droite ou à gauche.
Modifié par elz64 (15 Mar 2007 - 12:44)

As-tu pris la peine de lire les articles que je t'ai donnés en lien ?

Créer un contexte de formatage sur le conteneur l'oblige à prendre en compte les éléments flottants dans le calcul de sa hauteur. On n'a donc plus besoin d'un élément vide en clear: both; en fin de div.

La propriété overflow permet simplement de générer ce contexte de formatage.

merci,

je vais revoir tout ca tranquillement

Salut à tous,
j'ai perso utilisé une autre soluce... :

Faire une feuille de style spéciale pour IE inf au 7 avec :

<!--[if lt IE 7]>
<link href="feuille_de_style.css" rel="stylesheet" type="text/css" />
<![endif]-->

Et pour le bloc vide sous ie je rajoute :

.bloc_vide {
	(...)
	display: none;	
}

Salut,

Une solution brutale consiste effectivement à jouer sur le line-height ET le font-size.

Mais quitte à être brutal, autant l'être jusqu'au bout, quitte à rompre avec toute logique...

En mettant le line-height à 0, mais EGALEMENT le font-size à 0, sous IE7 on n'a absolument plus aucun vide.

Par contre, il faut bien mettre simultanément les DEUX conditions à 0.

div { line-height:0; font-size:0; }

Ciao !
Modifié par footao.net (26 Jun 2007 - 12:33)