CSS compatible avec Firefox mais pas IE

Bonjour

Après avoir passé plusieurs heures à lire et essayer des tutoriels sur le net , je me résigne à lancer une bouteille à la mer, et en appelle à vot' bon coeur, msieurs, dam'.

Je suis débutant en CSS et je me tire les cheveux pour rendre ma feuille CSS compatible avec le maximum de navigateurs (dont IE).

A noter que j'aimerais que la partie centrale (menu + contenu principal) s'adapte en hauteur à la résolution de l'écran.

Vous pouvez visualiser le site tel que je le souhaite sous Firefox ici: http://www.gacg.org/unifab/index.php

Pouvez-vous m'aiguiller pour permettre un affichage correct particulièrement sous IE ?

Merci d'avance.
sergio

body {
height:100%;
width:100%;
margin:0px;
padding:0px;
font-family:verdana, arial, sans-serif;
background-color:#106899;
}

p {
margin:0px;
padding:0px;
}

table{
font-size:9px;
}

#header {
position:absolute;
top:0px;
left:0px;
height:100px;
width:100%;
background:#ccfeff;
color:#000;
margin:0px;
padding:0px;
}

#navi {
position:absolute;
top:100px;
left:0px;
top:100px;
width:240px;
bottom:40px;
background-color:#083465;
color:#000;
padding:0px;
text-align:center;
}


#content {
position:absolute;
top:100px;
left:240px;
right:0px;
bottom:40px;
background:#fff;
color:#000;
margin:0px;
padding:0px;
}


#footer {
position:absolute;
left:0px;
bottom:20px;
height:20px;
width:100%;
background-color:#E4F6FF;
color:#000;
margin:0px;
padding:0px;
text-align:center;
}



#menuURL
{
top:0px;
left:0px;
width:240px;
height:30px;
background-color:#E4F6FF;
}

#menuLOGO
{
bottom:0px;
left:0px;
text-align:center;
background-color:#083465;
color:white;
}

.titrecontenu 
{
text-align:center;
left:0px;
height:30px;
width:100%;
background-color:white; /* #000; */
}

#textecontenu 
{
position:inherit;
overflow:auto;
top:30px;
left:0px;
right:0px;
bottom:23px;

margin:0px;
padding:5px;

color:#000033;

background-color:#E4F6FF;
scrollbar-face-color:#E4F6FF; 
scrollbar-shadow-color:#fff;
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#fff; 
scrollbar-darkshadow-color:#000; 
scrollbar-track-color:#000; 
scrollbar-arrow-color:#000;
font-size:9px;
}


#bascontenu 
{
position:absolute;
bottom:0px;
height:23px;
left:33%;
background-color:white;
text-align:center;
}

Salut,

Pour adapter ton site à la résolution de l'écran, il va te falloir utiliser du javascript.
En effet, une feuille de style ne connaît pas la notion de "taille de fenêtre", puisque l'élément le plus haut hiérarchiquement est le document.
La fenêtre n'est qu'un moyen d'accéder au document. Exemple : la notion disparaît dans un navigateur texte.

Conseil : fais une recherche sur "footer" dans le forum, tu devrais trouver ton bonheur.

Marvin Le Rouge a écrit :

Conseil : fais une recherche sur "footer" dans le forum, tu devrais trouver ton bonheur.

... ou dans la FAQ

Malgré vos conseils, je n'ai pas réussi à adapter selon la résolution. J'ai finalement remodelé ma feuille pour une mise en page fixe en 800x600 qui pose moins de problèmes de compatibilité.

Cela dit, de nouveaux problèmes de scroll et de position sont apparus entre temps, en 800x600.

- Je ne trouve pas quel(s) élément(s) dépassent 800px en largeur et obligent l'affichage d'un scroll horizontal. Je voudrai au final éviter tout scroll, et que l'ensemble de la page soit visible.

- Un autre souci est que Firefox décale le container ".bascontenu" ("Accueil / plan du site / mentions legales") plus bas que dans IE.

Site en chantier à l'adresse : http://www.gacg.org/unifab/index.php?page=missions〈=FR

merci pour toute votre aide
sergio

body 
{
margin:0px;
padding:0px;
position:absolute;
font-family: verdana, arial, sans-serif;
background-color:#106899;
width:100%;
height:100%;
}

table
{
font-size:9px;
}

.titre 
{
width: 100%;
height: 100px;
background-color:#cefeff;
}

.menu 
{
text-align:center; 
position: absolute;
left: 0px;   
width:240px;
height:343px;
background-color:#083465;
}


.menuURL
{
width:240px;
background-color: #E4F6FF;
}

.contenu 
{
margin-left: 240px; /* on place ce bloc à droite du bloc menu de 180px de large */
width:557px;
height: 343px;
font-size:9px;

}

.titrecontenu 
{
text-align:center; 
height: 30px;
background-color:white; /* #000; */
}

.textecontenu 
{
height: 290px;
color:#000033;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */

padding:5px;

background-color:#E4F6FF;
scrollbar-face-color: #E4F6FF; 
scrollbar-shadow-color: #fff;
scrollbar-highlight-color: #000;
scrollbar-3dlight-color: #fff; 
scrollbar-darkshadow-color: #000; 
scrollbar-track-color: #000; 
scrollbar-arrow-color: #000;
}


.bascontenu 
{
text-align:center; 
height:23px;
background-color:#fff; /* #000; */
}

.pied 
{
width:797px;
height: 20px;
background-color: #E4F6FF;
color: #fff;
font-size: 12px;
}