Simuler min-height sans hack CSS ni Javascript

[php_addict]

bonjour

on connait tous le problème en css avec min-height notament sur ie5 et ie6. Le problème est qu'il semble y avoir le même bug sous le navigateur du samsung galaxy (je crois que c'est ce mobile) mobile LG

enfin bref, vous me direz: laisse tomber ie5 et ie6..ok pas de problème . mais pour les navigateurs exotique comme ceux de certains téléphones mobiles j'ai du mal à les laisser de côté...

j'en viens à ma question du jour:

est il possible de rendre cross-browser le min-height sans utiliser de hack css ni de javascript ?

et s'il n'est pas possible, alors quel hack ou autre technique me conseillerez-vous ?

bonne fin de journee

[Sephi-Chan]

Pourquoi tu ne veux pas de hack CSS ?


Sephi-Chan

[Holy]

Ca serait bien d'avoir le nom du navigateur du samsung galaxy.

Sans cela, il me semble assez difficile de pouvoir t'aider.

Et à ta question : "est il possible de rendre cross-browser le min-height sans utiliser de hack css ni de javascript ?"

La réponse est non, si ton problème vient effectivement de la propriété min-height.

[php_addict]

ok...quel hack me conseillerez vous car j'en ai vu des tonnes pour le min-height

PS: je me renseigne sur le nom du navigateur en question car ce n'est pas mon mobile...

EDIT: il s'agit d'un mobile LG ku990i

[php_addict]

Pour répondre à Sephi-Chan, je n'aimes tout simplement pas trop les hack css je trouve ca laid

bon...il semblerait qu'il y ai la possibilité de se passer de hack ou de JS:

http://www.greywyvern.com/code/min-height-hack

j'ai testé sur IE 5, 6, 7, 8 (avec IEtester) et chrome, opera...

cela semble fonctionner à merveille...

[Sephi-Chan]

Pourtant c'est un hack aussi.
Ce n'est pas un terme péjoratif.


Sephi-Chan

[php_addict]

Pourtant c'est un hack aussi.

oui mais c'est quand meme plus propre que:

selector {

  min-height:500px;

  height:auto !important;

  height:500px;

}

ou que:

/* for Mozilla/Safari/Opera */

*>.box {

 padding-top: 200px;

 min-height: 1px;

}

*>.box p {

 margin-top: -200px;

}

/* for IE, with IE5/Mac backslash filter \*/

* html .box {

 height: 200px;

}

/* end filter */

non ?

[Sephi-Chan]

Je ne suis pas convaincu qu'il soit plus propre d'ajouter du balisage dans le seul but de régler un problème de CSS.
Je trouve plus élégant de tirer profit de la capacité des navigateurs à interpréter ou non certains sélecteurs ou certaines règles. C'est dans l'esprit de graceful degradation.


Sephi-Chan

[Viciousity]

Entièrement d'accord avec Sephi.
CSS évolue de plus en plus en parallèle avec le XHTML pour alléger un max le code source (balise div, span, etc ...).
Ainsi on dissocie la couche MARKUP et la couche DESIGN.

Par exemple au mieu d'avoir :

Code :

<ul>
  <li class='first'>Premier item</li>
  <li>Middle item</li>
  <li class='last'>Dernier item</li>
</ul>

li { border-top:1px solid #FFF;border-bottom:1px solid #000; }
li.first { border-top:none }
li.last { border-bottom:none }

On va le "Simplifier" en utilisant les sélecteurs :

Code :

<ul>
  <li>Premier item</li>
  <li>Middle item</li>
  <li>Dernier item</li>
</ul>

li { border-top:1px solid #FFF;border-bottom:1px solid #000; }
li:first-child { border-top:none }
li:last-child { border-bottom:none }

Et hop, séparation des couches

[php_addict]

dans un sens tu as raison, mais le hic c'est qu'il y a de plus en plus de navigateur: mobile, tablettes, etc...et j'ai l'impression chacun y vas de sa propre interprétation des standards.

si demain un constructeur de téléphone mobile sort un nouveau navigateur propriétaire alors qui sait si les graceful degradation en place dans nos css vont avoir leurs petits effets...

je m'attarde sur des faux problèmes je te l'accordes mais je serais navré si un internaute ne peut pas surfer sur mon site correctement même avec un navigateur un peu pourri...