28172 sujets

CSS et mise en forme, CSS3

Probleme de min-height

Bonjour,
je rencontre un problème de CSS avec I6 7 et 8

ma page de s'adapte pas à son contenu..
http://hazemann.celeonet.fr/index.php/raquettes-et-marche.html


div#content {
    height:470px;
	overflow: hidden
}
div#page{
    position: relative;
	padding:0px;
	width:950px;
	min-height:260px;
    border:0px solid #000000;
	z-index: 100;
}

*+div#page{
    position: relative;
	float:left;
	padding:0px;
	width:650px;
    border:0px solid #000000;
	z-index: 100;
}

Modifié par thomasv (08 Jul 2010 - 15:56)
Bonsoir Thomas,

Tu as résumé le style pour #content, et le résumé que tu en as fais contient la clé du problème : tu donne une hauteur à ton #content, height:470px, et comme il est overflow:hidden, alors inévitablement, il ne s’agrandit pas !

Pourquoi tu ne rencontre ce problème qu’avec IE7 et IE8 ? Ben parce que les spécifications height:470px; et overflow:hidden; n’apparaissent que dans le “ie.css”.

Comme tu as ajouté une feuille qui ne s’applique qu’à IE, alors IE7 et IE8 voient :


#content {
   ...
   min-height: 470px;
   height: 470px;
   overflow: hidden;
   ...
}


Tandis que tous les autres navigateurs voient :


#content {
   ...
   min-height: 470px;
   ...
}


C’est normal que ça ne fonctionne pas sous IE7 et IE8, et ce n’est pas un bug d’IE, c’est parce que tu empêche IE d’appliquer le bon rendu en lui indiquant d’appliquer un mauvais rendu.

Pourquoi une overflow:hidden ?
Pourquoi un height et un min-height de la même valeure ?

Au choix, deux options :

+ Supprime le “ie.css” pour ne conserver que le “site.css”, parce qu’avec IE7, il n’y a plus autant besoin de bricoler, et il n’y a plus du tout besoin avec IE8, et de plus quand c’est mal géré, comme ici, ça peut être source d’erreurs et tu peux bugger toi-même le site Smiley confus

+ Si tu as vraiment besoin de ie.css (par exemple si tu prévois la compatibilité avec IE6), alors retire les height:470px; et overflow:hidden; qui sont donnés à #content.

La clé réside dans height, et le overflow qu’il faut supprimer.


P.S. Si tu as IE7 ou IE8, quand tu as la page ouverte dans ton navigateur, tu peux faire “F12”, puis selectionner l’onglet HTML et à sa droite, selectionner Style. C’est quelque chose qui t’aidera à comprendre ce qu’il se passe.
Modifié par hibou57 (08 Jul 2010 - 23:57)
Bonjour Hibou57, merci pour ton aide et tes expliquations !
j'utilise une feuille de style pour corriger les bug sous ie7 et 8. J'ai laissé tomber ie6 depuis peu !

j'ai encore une un problème avec sous ie8. Le background de ma page ne suis pas le contenu ! !
http://www.auberge-hazemann.com/index.php/raquettes-et-marche.html

merci pour l'astuce du F12, je ne connaissais pas cette fonctionnalitée.. pourquoi certain style sont barrés ?
Modifié par thomasv (09 Jul 2010 - 09:51)
Ooops je viens de trouver la solution....
j'avais un float qui trainait...
float:left;


pour résumer il faut éviter quand un site ne s'adapte pas au contenu, les float, height, et le overflow

merci pour ton aide
Modifié par thomasv (09 Jul 2010 - 10:34)
thomasv a écrit :
pour résumer il faut éviter quand un site ne s'adapte pas au contenu, les float,

Ça dépend dans quoi est contenu le float. S’il est contenu dans un autre float c’est OK. Par exemple si un float B dans un float A, donne un float A qui grandit à mesure que le float B grandi.

thomasv a écrit :
height,

Sauf avec overflow:scroll, qui fait alors défiler le contenu (mais ce n’était pas ce que tu recherchais).

thomasv a écrit :
et le overflow

Le overflow:auto peut convenir, le plus souvent, mais il est un peu ambigu, parce que la spécification CSS ne fait pas d’obligation à son sujet : il peut faire s’agrandir l’élément, ou alors agir comme overflow:scroll, tout dépend de l’agent utilisateur (le navigateur), au moins en théorie, parce que en pratique, ça fait plutôt s’agrandir l’élément.

Bonne journée
Modifié par hibou57 (09 Jul 2010 - 10:55)
Sujet clos
Aller à