Figer la hauter d'une box sans la figer

Il faut utiliser min-height pour FF et height pour IE ; un petit hack pour faire cohabiter les 2 et le tour est joué  

Petit ajout : IE ne connaît pas "min-" et "max-".. (IE 7, je ne sais pas, je ne l'ai pas encore essayé et d'ailleurs je ne suis pas pressé  )

Par exemple : IE fait se comporter "height" comme si c'était "min-height", alors que "height" indique une dimension fixe, ce que respectent bien les autres navigateurs (FF, Opera, Konkeror, Safari et bien d'autres)..

Quant au "max-", il n'existe tout simplement pas dans la logique IE (toujours IE 5 ou 6).. Il faut alors passer par un hack CSS utilisant du JS (le fameux "expression()" à la place de la valeur de la règle ; fortement peu standard et heureusement inconnu des autres !!).

 

ah wai, c'est cool ça, je connaissais pas! et du coup j'ai mis les deux ensemble pour mon "main" (height: 900px; min-height: 900px;) l'un au dessous de l'autre, et chaque navigateurs reconnait le sien, et tout est parfait! Merci les gars !

Ah wai mais nan, en fait, c con ce que je dis, c pas bon! FF reconnais pas min-height, même tout seul... y'a un bins là

faut utiliser les include conditionnels de ie ...

C'est un peu normal..... On n'utilise pas de dimension fixe avec une dimension semi-variable : la fixe prend le pas sur l'autre.. Voici le code CSS qu'il te faut, avec le hack pour IE :

#mon_objet { width: 500px; min-height: 900px; } // Règle correcte pour ton cas de figure ; évidemment, le 'width' n'est là que pour l'exemple ;-)

  * html #mon_objet { height: 900px; } // '* html' = hack reconnu seulement par IE ; à utiliser avec parcimonie : ça ne passe aucun prog de validation des CSS

Par contre, gare à une chose : le "min-height" ne peut fonctionner qu'avec du contenu en flux dit "relatif" ('position: relative'), type de flux par défaut pour tout objet, notamment du texte continu. Avec des objets placés en flux "absolu", ça ne fonctionne pas ('position: absolute', 'position: fixed' ou 'float: left/right'), les objets sont soit totalement retirés du flux "normal" ('position: absolute/fixed'), soit partiellement retiré ('float' : il influence le positionnement des objets immédiatement voisins, mais pas directement la taille du bloc conteneur)..

Pour faire qu'un objet placé en "float" agisse sur le bas du bloc qui le contient, il faut parfois inclure une règle horizontale <hr /> à la fin de ce bloc pour qu'il prenne bien en compte l'emplacement complet du 'float', en donnant une épaisseur nulle à la <hr />. Mais c'est du bidouillage et IE ne gère pas les <hr /> comme les autres : il ne fait pas les épaisseurs nulles avec les mêmes attributs CSS.. Utiliser les <hr /> est source de soucis de mise en page : un décalage plus prononcé d'un navigateur à l'autre ou carrément l'affichage inopportun de la <hr />..

 

pas de hack a la * html
utilisez les commentaire conditionnels pour inclure une seconde feuille de style spécifique a ie qui écrasera les valeurs de la feuille de style standard ...

de plus cela permet de ne pas affecter ie7 ...

Dit comme ça, c'est plus clair  .... Je les oublie toujours, ceux-là..

'Faudra que je me penche dessus un jour.. Vu que j'articule généralement mes sites sur PHP, j'en profite pour passer par là pour éventuellement ajuster les noms de mes class & id CSS (c'est comme ça que je remplace les '* html').. De cette façon, je les ai toutes sous la main dans une même feuille de style quand je fais une modif de règles CSS.. C'est juste pour ça que je ne les utilise pas pour le moment et que j'oublie d'y penser, à ces commentaires conditionnels  ..

 

wai, ok, mais j'ai un pb avec la base: FF ne prend pas en compte mon min-height. Alors pour le crack, je verrai quand min-height marchera.
Mais alors pourquoi min-height ne marche pas? Voici mon code:

#main {

	margin: 0;

	padding: 0;

	width: 900px;

	min-height: 900px;

	color: #FFF;

	background: url('fondpage.jpg');

}

Non IE permet de faire des include conditionnel.

<!--[if IE 5]>

<style type="text/css">

div { width: 140px; }

</style>

<![endif]-->

cf: http://darkmag.net/darkBlog/index.php?2004/01/30/11-css...

et
http://msdn.microsoft.com/library/default.asp?url=/work...

Allez hop ! Ajouté à mes favoris le MSDN sur le (D)HTML (mieux vaut tard que jamais)  .. (et au TU de tête de liste, tant qu'à faire)

 

spu un forum stun wiki....  
Vivent la cat' Programmation et ses forumeurs  

Pourquoi un tel comportement positif en cat programmtion, et très peu dans les autres cat ?

Elément de réponse :

public trié par le thème

public plus mature que la moyenne

modos de qualité  

membres actifs d'encore meilleure qualité  

En tout cas merci Kangol et Boubposysteam pour les techniques de switcher CSS  

On devrait peut-être changer le look de la cat' en lui donnant un aspect clairement WikiMedia.. Chiche on le demande en 'Remarques & suggestions' ?  

Et +1 avec marsien : tout simplement et en toute humilité, nous ne sommes juste que de modestes Dieux   !!



Pour revenir au sujet, dartyduck, tu pourrais nous mettre les codes HTML et CSS qui correspondent à ton bloc et à son contenu ? Parce que je n'ai jamais connu le moindre pb de 'min-height' avec FF, d'autant plus que je l'utilise quasiment toujours pour chaque "corps" de page (la partie centrale), sauf lorsque le bloc concerné contient des éléments sortis du flux relatif "normal"..