[Résolu] Height: 100%, au delà des problèmes habituels...

Bonjour,

Jusqu'ici cet article de la FAQ et cet autre excellent m'ont énormément aidé

J'ai aujoud'hui un autre problème, beaucoup plus subtil. En effet, height:100% est normalement utilisé pour qu'un bloc ou un div prenne toute la hauteur de la fenêtre en cours... Or ici il ne s'agit pas de cela...

Je m'explique:

Sans spécifier de hauteur, le corps de la page (div#page) s'affiche à merveille sous Firefox mais IE bugge pour une raison que j'ignore, concrêtement c'est ça:

le code suivant...

/* Structure
-------------------------------------------------------- */
#page {
	background : #eef6ff url(images/col-a.jpg) repeat-y; 
	border : 3px solid #663300;
}

donne...
> ceci sous Firefox (bon):


> ceci sous IE (pas bon, la bordure est fermée au milieu de la page ):


Tandis que le code suivant spécifiant height: 100%...

/* Structure
-------------------------------------------------------- */
#page {
	background : #eef6ff url(images/col-a.jpg) repeat-y; 
	border : 3px solid #663300;
	height: 100%;
}

donne...

> ceci sous Firefox (pas bon car Firefox place la ligne du bas au bas de la fenêtre - taille de l'écran - et non pas au bas de la page, ce qui est logique en fait)


> Pas de problème sous IE


Tantôt ça marche sous firefox, tantôt sous IE...
A noter que j'ai bien entendu mis puis ôté le 100% au body,html... sans aucun effet. La déclaration xml n'a rien donné non plus.

Je suis dans un vrai dilemme. Si vous aviez une idée... merci infiniment par avance

EDIT: Merci pour le répertoire des upload
EDIT 2: L'adresse de la page concernée est http://blog.lovedido.net
Modifié par philocss (27 Nov 2005 - 12:34)

Bonjour,

pour l'edit du message en cours (?), les images sont dans le répertoire /upload/ (à rajouter entre forum.alsac....com et 1234-nom.ext)

Bonjour,

Le height:100% n'agit pas ici comme il le semble. Ce n'est pas le fait de spécifier cette hauteur précise (100%) qui corrige le bug d'IE, mais le fait de donner à ton #page une des propriétés CSS (height, width, zoom, position:absolute...) qui lui confère, dans ce navigateur, un état particulier, appelé haslayout. N'importe quelle autre valeur ou propriété de cette liste fera aussi bien l'affaire.

En particulier zoom: 1 qui a l'avantage de ne pas provoquer d'effets inattendus (il est ignoré par tous les autres navigateurs et se contente de dire à IE que ce bloc doit être affiché avec un facteur de zoom de 1 pour 1, c'est à dire sans zoom). C'est donc le correctif le plus indiqué ici.

Et pour éviter que cette correction du bug d'IE ne pose de problème de validité CSS , il suffit de la masquer en la plaçant dans une CSS en commentaires conditionnels (voir la FAQ du forum).

Sinon, une remarque en passant : la déclaration XML n'a rien à faire dans tes pages qui sont en text/html. Inutile d'activer le mode de rendu quirks d'IE...
Modifié par Laurent Denis (27 Nov 2005 - 06:32)

Merci beaucoup Laurent Denis, je ne connaissais pas du tout cette propriété zoom: 1. De plus, je crois que ta réponse va me permettre de résoudre bien d'autres problèmes que j'avais maladroitement arrangés à coup de !important, solution risquée puisque ce hack risque de ne plus fonctionner sous IE7...

En tout cas, je crois que j'ai encore pas mal de choses à apprendre en CSS
Modifié par philocss (27 Nov 2005 - 12:32)

philocss a écrit :
De plus, je crois que ta réponse va me permettre de résoudre bien d'autres problèmes que j'avais maladroitement arrangés à coup de !important, solution risquée puisque ce hack risque de ne plus fonctionner sous IE7...

Microsoft invite en effet depuis quelques temps à "déhacker" les CSS au profit de techniques plus sûres (dont les commentaires conditionnels).

Un complément à propos de zoom: 1 pour agir sur le haslayout : cette propriété est supportée par IE 5.5 et 6.0, mais pas IE5.0. Lorsque le rendu doit être corrigé dans celui-ci, force est d'utiliser en commentaires conditionnels un height ou un width, en s'assurant de l'absence d'effets pervers.