Hauteur qui ne s'aggrandit pas sur IE6..

Bonjour à tous,

Voici mon code HTML

			<div class="titre04">

				<div class="titre04_a_bis">
					<input type="checkbox" name="suppr" value="1">						
				</div>
				<div class="titre04_b_bis">
					Expéditeur			
				</div>
				<div class="titre04_c_bis">
					Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.
				</div>
				<div class="titre04_d_bis">
					Date
				</div>
				<div class="titre04_e_bis">
					Répondu
				</div>
			
				
			</div>

Mon souci c'est que ma class titre04_c_bis ne aggrandit pas automatiquement sur IE6

Et pourtant il me semble avoir fait le nécessaire au niveau CSS

.titre04_c_bis
{
width:320px;
min-height:20px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}


/* ci dessous non interprété par IE */
html>body .titre04_c_bis
{
height: auto;
min-height:20px;
} 

Auriez-vous une idée ?

Salut,

Déjà ça fait toujours plaisir de voir qu'on n'a pas parlé dans le vide.

Ensuite :

samb01 a écrit :
Et pourtant il me semble avoir fait le nécessaire au niveau CSS

Pas vraiment puisque les hacks css pour IE6 sont dépassés et avantageusement remplacés par les commentaires conditionnels. D'ailleurs je ne vois même pas ce que tu cherches à faire...
Modifié par Heyoan (05 Mar 2010 - 13:29)

Salut,

d'une part tu n'a pas parlé dans le vide mais comme je tiens à garder mon élément de type bloc et que je ne veux pas mettre d'élément inline, je ne vais pas mettre le poste résolu alors que je considère qu'il ne l'est pas.

Pour réponse à ta question :

D'ailleurs je ne vois même pas ce que tu cherches à faire...


Il suffit de lire mon message :

Mon souci c'est que ma class titre04_c_bis ne s'aggrandit pas automatiquement sur IE6



Je te rassures, cette fois non plus tu n'as pas parlé dans le vide. Mais je ne veux pas utiliser les code conditionnel pour résoudre mon problème.

Merci et bonne journée.

samb01 a écrit :
je ne vais pas mettre le poste résolu alors que je considère qu'il ne l'est pas.

Il n'était pas question de cela.

samb01 a écrit :
je tiens à garder mon élément de type bloc et que je ne veux pas mettre d'élément inline
[...]
je ne veux pas utiliser les code conditionnel pour résoudre mon problème.

Par conviction politique... ou religieuse ?

Pour rappel Alsacréations est dédié aux standards du web et à l'accessibilité donc si ni les uns ni l'autre ne t'intéressent pourquoi poser ta question sur ce forum ?
* un élément LABEL avec attribut for (plutôt qu'un élément DIV) associé à un INPUT permet de le rendre accessible aux personnes qui n'utilisent pas d'agents utilisateurs graphiques et facilite l'ergonomie des autres puisqu'il permet lors du clic de donner le focus à l'INPUT associé.
* pour avoir un rendu de type block pour un élément en-ligne il suffit de lui affecter un display:block.
* les commentaires conditionnels sont bien plus robustes et pérennes que les hacks CSS.

En bref je ne vois aucune raison de ne pas coder proprement.

Bonne journée également.

OK tu as gagné

Je vais cherché du côté code conditionnel.

Merci

Ceci dit le "hack" dans le code donné en exemple n'est pas vraiment un hack, et il est plutôt fiable.
Mais les commentaires conditionnels c'est très bien, of course.
Moi je dis ça, je dis rien.

Et sur le fond du problème je n'ai pas trop d'idée, mis à part que:
- Ce code m'a l'air bien peu sémantique, et à l'instar du précédent sujet donné en lien par Heyoan ça semble indiqué une méconnaissance importante de HTML. (Ce n'est pas un reproche, tout le monde passe par là. )
- Le code CSS donné est insuffisant pour comprendre le problème. Un code plus complet ou un lien vers une page en ligne seraient plus efficaces.
Modifié par Florent V. (05 Mar 2010 - 19:18)

Florent V. a écrit :
Ceci dit le "hack" dans le code donné en exemple n'est pas vraiment un hack

C'est vrai que ce n'est pas un hack en soi mais il me semblait que cette définition s'appliquait également aux ruses qui consistent à utiliser des sélecteurs qu'IE6 ne comprend pas.
Modifié par Heyoan (05 Mar 2010 - 19:40)

En ce qui concerne mon css, le voici plus complet

.titre04
{
width:750px;
min-height:22px;
height:22px;
margin-top:5px;
margin-bottom:2px;
margin-left:10px;
border:none;
overflow:hidden;
}


/* ci dessous non interprété par IE */
html>body .titre04
{
height: auto;
min-height:22px;
} 



.titre04_a_bis
{
width:25px;
min-height:20px;
height:20px;
margin-left:1px;
border:none;
float:left;
}

/* ci dessous non interprété par IE */
html>body .titre04_a_bis
{
height: auto;
min-height:20px;
} 

.titre04_b_bis
{
width:205px;
min-height:20px;
height:20px;
margin-left:2px;
margin-top:3px;
border:none;
float:left;
}

/* ci dessous non interprété par IE */
html>body .titre04_b_bis
{
height: auto;
min-height:20px;
} 

.titre04_c_bis
{
width:320px;
min-height:20px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}


/* ci dessous non interprété par IE */
html>body .titre04_c_bis
{
height: auto;
min-height:20px;
} 

.titre04_d_bis
{
width:160px;
min-height:20px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}

/* ci dessous non interprété par IE */
html>body .titre04_d_bis
{
height: auto;
min-height:20px;
} 


.titre04_e_bis
{
width:20px;
min-height:20px;
height:20px;
margin-left:2px;
margin-top:1px;
border:none;
float:left;
}

/* ci dessous non interprété par IE */
html>body .titre04_e_bis
{
height: auto;
min-height:20px;
} 

Je ne sais pas comment mettre ma page html en ligne...

Ne serait ce pas du a ca :

.titre04 
{ 
overflow:hidden; 
}  

sans en mettre ma main a couper je dirais que tout ce qui depasse du bloc titre 4 est coupe.
Hors comme .titre04_a_bis est contenu dans .titre04 :
alors .titre04_a_bis ne peut s'etendre aux dela des limites imposees par .titre04

Rien a voir :
Je ne comprend pas du tout comment tu regles le probleme du min-height non interprete par ie.
Ca a l'air interessant mais je ne connais pas cette technique

Bonsoir ,
overflow:hidden; modifie le contexte de formatage et permet d'englober les elements flottants enfants et de se demarquer des elements flottants adjacent et anterieur dans le flux .
IE6 n'implemente pas ce comportement sur cette regle et un : zoom:1; palie avantageusement a ce defaut sans perturber les autres navigateurs , si l'on ne fixe pas de hauteur bien evidement mais dans ce cas c'est tout les navigateur qui restreignent la hauteur.

Cordialement

GC.

Pour gerer le min-height dans IE , on prefera les commentaire conditionnels ou au moins l'usage de la regle !important (tout depend du nombre de regle alternative ou de correction qui seront necessaire a IE6 , un fichier en plus ou pas ? , dans l'entete ou pas ? ...) .
Height et overflow:hidden; sont incompatible dans IE6 pour laisser un element s'agrandir.

Dans IE6 , un element block vide fera par defaut 1em de hauteur si l'on modifie son contexte de formatage , on peut donc estimer que IE6 appliquera un min-height de 14px . si l'on declare ceci :
div {font-size:14px;zoom:1;}

page pour demonstration a copier coller :

<!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>
<title>demo comportement IE6</title>
<style type='text/css'>
div {background:gray;font-size:22px;zoom:1;overflow:hidden;min-height:22px;}
</style>
</head>
<body>
<div></div>
<br/>
<div><br/><br/></div>
</body></html>

Modifié par gc-nomade (09 Mar 2010 - 21:24)

J'ai juste retirer le height et ça fonctionne !!!

Je ne pensais pas que c'était si bête
Modifié par samb01 (12 Mar 2010 - 16:07)