[CSS] Probleme sous ie footer

[pauline24030]

Voila

Sous firefox sa marche impeccable mais sous ie sa ne fonctionne, la colonne de gauche est sur le footer et j'aimerais quel soit en dessous le footer comme sur mozilla.

Existe t'il une solution? un hack? voici mon adresse htt://www.lost-lesdisparus.net

et mon code css

/* body */ 

body, html { 
scrollbar-face-color: #ffffff; 
scrollbar-arrow-color: #898989; 
scrollbar-shadow-color: #ffffff; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-highlight-color: #ffffff; 
scrollbar-track-color: #ffffff; 
scrollbar-3dlight-color: #ffffff; 

margin: 0px; 
padding: 0px; 
background-color:#FEFEFE; 
font-size: 7pt; color:#000000; font-family: Tahoma; font-weight: normal 

} 

/******* design *******/ 

.layout { 
position:absolute; 
top: 0px; 
left: 45px; 
margin: 0px; 
padding: 0px;  
background: url(../design/haut.jpg) no-repeat; 
width: 800px; 
height: 405px; 
text-align: left; 
} 

.bas { 
float : left; 
position:absolute; 
top: 404px; 
left: 45px; 
margin: 0px; 
padding: 0px; 
background: url(../design/bas.gif) repeat-y; 
width: 800px; 
_height:100%; 
text-align: left; 
} 

.colonnegauche { 



position:RELATIVE; 
top: 7px; 
left:71px; 
font-family:verdana; 
font-size:8px; 
color:#000000; 
font-weight:bold; 
width: 210px; 
height: AUTO; 
text-align: left; 
} 

.colonnedroite { 

position:absolute; 
top: 7px; 
left: 286px; 
width: 474px; 
height: AUTO; 
text-align: left; 

} 

.footer { 

clear: both; 

top:100%; 
background: url(../design/footer.jpg) no-repeat; 
width: 800px; 
height: 80px; 
text-align: left; 
} 



.footertexte { 


position:RELATIVE; 
Top: 18px; 
left:300px; 
font-family:verdana; 
font-size:8px; 
color:#FFFFFF; 
font-weight:bold; 
width: 419px; 
text-align: left; 
}

[Yangzebul]

Bon excuse moi d'avance mais je vais répondre un peu en vrac car j'ai plein de trucs en tête en plus firefox m'a planté tout à l'heure à la moitié du message. (en plus je suis en cours)

1 / Graphiquement ton site est sympa mais la typo est trop petite : tout le monde n'a pas le lissage des polices !

2 / Ton problème je pense que tu pourras le régler comme ca :

.bas //retire le float

.colonnegauche //reste en absolu pas besoin de compliquer inutilement.

.footer //clear:both inutile car footer est contenu dans bas et donc lui même sortit du flux

3 / .footer : top=100% //Gné... pourquoi?

4 / Dsl, mais c'est un bazar pas possible dans ta css et dans ton xhtml, nettoie un peu ça et il est fort possible que le problème se règle de lui même. Ta page n'est pas valide contrairement à ce que tu indique en bas.

5 / Un survol rapide de ta css, le relevé n'est pas exhaustif je vais pas tout corriger non plus :

/* body */ 

body, html { 
scrollbar-face-color: #ffffff; 
scrollbar-arrow-color: #898989; 
scrollbar-shadow-color: #ffffff; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-highlight-color: #ffffff; 
scrollbar-track-color: #ffffff; 
scrollbar-3dlight-color: #ffffff;  //scrollbar, attribut css non valide, seulement pour IE, tu retire

margin: 0px; //pas besoin d'unité car 0px=0cm=0em=0caribous=0cequetuveux
padding: 0px; 
background-color:#FEFEFE; //utilise les formes réduites : background:#FEFEFE;
font-size: 7pt; color:#000000; font-family: Tahoma; font-weight: normal // idem, forme réduite font te permet de définir les 3 attributs d'un coup
//font-weight: normal //par défaut c'est déja sur normal donc tu retire

} 

/******* design *******/ 

.layout {  //utilise des ID pour les éléments structurants et uniques, ca évite les conflits lorsque tu essaye de cibler un élément
position:absolute; 
top: 0px;  //unité
left: 45px; 
margin: 0px; //unité comme pour tout les autres...
padding: 0px;  
background: url(../design/haut.jpg) no-repeat; 
width: 800px; 
height: 405px; 
text-align: left; 
} 

.bas {  //ID
float : left; //retire
position:absolute; 
top: 404px; 
left: 45px; 
margin: 0px; 
padding: 0px; 
background: url(../design/bas.gif) repeat-y; 
width: 800px; 
_height:100%; //Gné?
text-align: left; 
} 

.colonnegauche { 



position:RELATIVE; //absolue
top: 7px; 
left:71px; 
font-family:verdana; //forme réduite font
font-size:8px; 
color:#000000; //forme réduite type #RVB, ici #000
font-weight:bold; //forme réduite font (les deux en une ligne)
width: 210px; 
height: AUTO; //inutile
text-align: left; //inutile car hérité de.bas
} 

.colonnedroite { 

position:absolute; 
top: 7px; 
left: 286px; 
width: 474px; 
height: AUTO; //inutile
text-align: left; //inutile car hérité de.bas

} 

.footer { 

clear: both; //retire

top:100%; //Gné?
background: url(../design/footer.jpg) no-repeat; 
width: 800px; 
height: 80px; 
text-align: left; //inut...
} 



.footertexte { 


position:RELATIVE; //absolue
Top: 18px; 
left:300px; 
font-family:verdana; //forme réduite
font-size:8px; //forme réduite
color:#FFFFFF; //forme réduite #FFF
font-weight:bold; //forme réduite : les 3 en une ligne
width: 419px; 
text-align: left; //inutile car héritée...
}

6 / Pour ton fichier html il y a quelques ecceuils aussi :

- ton DTD et ton mime type sont en conflits, utilise application/xml + xhtml si tu veux pas que certains navigateurs passent en mode quircks

- y'a deux malheureux td qui se baladent tout seuls sans raison

- ton dernier div a un style qui est définit en ligne : met ca dans le css

- pour ton flash tu utilise des balises dépréciées (embed) google est ton ami pour trouver le bon code

- tu utilise un mauvais charset, utilise utf-8 si tu veux mettre les caractères spéciaux (accents ect...) sans entitées

- balises b : dépréciées, utilise ta css

- met ton code en forme avec des alinéas, ce sera bien plus lisible et tu auras plus de réponses quand tu demandera de l'aide.

Tu rajoutes à ca un coup de validateur w3c pour corriger ce que je n'ai pas vu et ce sera déjà bien mieux...

Bonne chance.