Re-, je suis en train de regarder
Il semble effectivement y avoir des problèmes entre ce site et Opera, parce que
DragonFly n’arrive pas explorer la page correctement et m’affiche un peu n’importe quoi à la place des propriétés CSS. Je regarde donc avec FireFox
(je vais présenter le cas sur le forum Opera).
Pourquoi styles-tu l’élément HTML ? Height: 100% sur l’élément HTML, ça me semble étrange.
Sous IE7 et IE8, il y a un problème spécifique : ça affiche « <!--[if IE lte IE 8]> <![endif]--> » dans le coin en haut à gauche de la page. Des erreurs dans les scripts également
(des erreurs de syntaxe, ça se corrige toujours).
#center a un overflow:auto, donc OK, ça peut produire un défilement, mais ça n’est pas obligatoire, car :
La référence CSS2 dit
a écrit :
auto
The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
Si c’est un défilement que tu recherche, que dirais-tu d’utiliser directement “overflow:scroll” qui est spécialement faite pour ça ?
Je ne peux pas tester sous Opera, à cause des problèmes que rencontre DragonFly sur ton site, mais sous FireFox, j’ai essayé de remplacer overflow:auto par overflow:scroll, et le résultat est le même.
Je ne vois rien dans les propriétés CSS de #center, qui contraigne sa hauteur maximum, et il n’y a aucune obligation de se baser sur une hauteur déterminée plus ou moins arbitrairement comme semble le faire FireFox et IE7 ou IE8, alors je comprend qu’Opera ne produise peut-être pas le défilement que tu attend, et qu’il affiche le contenu tel quel, en agrandissant #center.
Dans #center, tu as deux colonnes, #article et #media, toutes deux float. OK.
Mais pourquoi ne laisse-tu pas #media s’agrandir librement ? Tu le contrains à une hauteur fixée d’avance, et seuls ses deux .media passent dedans, tandis que ses trois .note en débordent. Alors inévitablement, les trois .note sortent du #media, peuvent légitimement passer sous #footer, car les trois .note sont dans le flux de #media, et ne participe pas au positionnement de #footer, et comme dans la pile d’affichage, #media est derrière #footer, alors Opera ne fait pas d’erreur en les faisant passer sous #footer... c’est son droit, parce que #footer aura tendance à venir se caler sous #media, et si le navigateur ne fait rien contre, c’est son droit aussi.
Bon, mon impression est que ce n’est pas un bug d’Opera, mais une différence d’interprétation entre navigateur, et cette différence et légitime
(mais il faudrait que je vois d’autres choses pour être sûr, seulement, ça prendrait du temps)
Je te propose de remplacer
div#media {
float: left;
height: 200px;
margin-left: 10px;
width: 420px;
}
par
div#media {
float: left;
height: auto;
margin-left: 10px;
width: 420px;
}
ou encore plus simplement par
div#media {
/* No more height property */
float: left;
margin-left: 10px;
width: 420px;
}
et il y a de bonnes chances pour que ça s’arrange sous
Opera
Note : si tu veux un center qui défile, donne lui une hauteur. À moins que tu ne recherchais quelque chose de plus précis que ça ? Dis toujours alors ...
P.S. Des ID et classes du même nom
(media) : pourquoi ?
Modifié par hibou57 (08 Jul 2010 - 03:09)
, tous n'est peut être pas perdu pour moi ^^