Bonjour.
Je viens vous rabacher les oreilles avec un "très original" problème de compatibilité IE/Firefox. Ca fait à peu près une journée que je cherche sur le forum et que j'essaie diverses manips...en vain.
Tout d'abord, la page problématique, c'est ici. Le résultat que je veux obtenir, c'est avec firefox, et le bug, c'est IE (tiens donc?)
Je ne veux pas de défilement principal. J'ai donc un conteneur qui s'arrête en bas de la page, qui contient un block "titre", un block "menu", et un block "corp" les uns au dessus des autres.
Dans mon block corps, je met un block "photo" (à gauche) de dimension fixe, et un block "aperçu" à droite sensé arriver jusqu'en bas du conteneur. Ce dernier block doit pouvoir fair défiler son contenu.
=> Mais pourquoi ce $#%*#! de IE ne veut pas afficher ces deux derniers block ??! (il n'affiche pas non plus le block "corps", sauf si je met du texte dedans, il aura la taille du texte)
=> Je pense qu'il faudrais forcer IE à afficher le block "corp" sur tout le reste du conteneur, mais je n'y suis pas parvenu.
Voici mes sources. désolé pour la longeur
HTML
CSS
Merci d'avance pour tous les éléments de réponse susceptibles de m'aider.
Je viens vous rabacher les oreilles avec un "très original" problème de compatibilité IE/Firefox. Ca fait à peu près une journée que je cherche sur le forum et que j'essaie diverses manips...en vain.
Tout d'abord, la page problématique, c'est ici. Le résultat que je veux obtenir, c'est avec firefox, et le bug, c'est IE (tiens donc?)
Je ne veux pas de défilement principal. J'ai donc un conteneur qui s'arrête en bas de la page, qui contient un block "titre", un block "menu", et un block "corp" les uns au dessus des autres.
Dans mon block corps, je met un block "photo" (à gauche) de dimension fixe, et un block "aperçu" à droite sensé arriver jusqu'en bas du conteneur. Ce dernier block doit pouvoir fair défiler son contenu.
=> Mais pourquoi ce $#%*#! de IE ne veut pas afficher ces deux derniers block ??! (il n'affiche pas non plus le block "corps", sauf si je met du texte dedans, il aura la taille du texte)
=> Je pense qu'il faudrais forcer IE à afficher le block "corp" sur tout le reste du conteneur, mais je n'y suis pas parvenu.
Voici mes sources. désolé pour la longeur
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title> LE SITE </title>
<link href="fichiers/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="principal">
<div class="titre">
Le Titre Le Titre Le Titre
</div>
<div class="zoneMenu">
Menu Menu Menu Menu Menu Menu
</div>
<div class="corps">
<div class="zonePhoto">
Zone Photo Zone Photo Zone Photo
</div>
<div class="zonePellicule">
Pellicule Pellicule Pellicule
</div>
</div>
</div>
</body>
</html>
CSS
div.principal {
z-index: 1;
position: relative;
background-color: #005500;
top: 2em;
width : 750px;
height: 95%;
overflow : hidden;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div.titre {
z-index: 1;
position: absolute;
background-color: #559955;
width:750px;
height:175px;
padding:0px;
margin :0px;
}
div.zoneMenu{
z-index: 1;
position: absolute;
background-color: #55FF55;
height: 25px;
top:175px;
width:750px;
padding: 0;
margin : 0;
overflow: auto;
}
div.corps{
z-index: 1;
position: absolute;
background-color: #00FF55;
top : 200px;
left : 0;
right : 0;
bottom : 0;
padding: 0;
margin : 0;
overflow: auto;
}
div.zonePhoto {
position: absolute;
background-color: #33AA00;
width: 600px;
height: 450px;
left : 0;
margin: 0;
padding : 0;
overflow: auto;
}
div.zonePellicule {
position: absolute;
background-color: #55FF00;
width: 150px;
top : 0;
right:0;
bottom : 0;
margin: 0;
padding : 0;
overflow: auto;
}
Merci d'avance pour tous les éléments de réponse susceptibles de m'aider.