Gros problème CSS sous IE

Bonjour à tous,
Je suis nouveau sur ce forum mais vu le reste du site, je me dit que vous allez pouvoir m'aider

Je développe actuellement un site et alors que en test sur mon pc il passait trés bien sur FF et IE... une fois en ligne, c'est la chianlie sur IE!!!
Je n'ai pas du prendre toutes les précautions CSS pour IE mais je ne sais pas trop desquelles il s'agit ici...
Voici l'url de mon site http://camillegirard86.ifrance.com .

Y'a aussi le problème des ces bordures de liens autours de mes images du menu que je voudrais faire disparaitre mais c'est secondaire pour l'instant par rapport au bazar du positionnement des blocs et leurs débordements sous IE...

Le site a été validé par W3C.
Je m'en remet à vous pour me dire ce qui ne va pas... merci d'avance


Je vous balance le css :

a écrit :
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}

Body {
background-color:#000000;
}

#Top {
width:730px;
background-color:#B49E53;
height:100px;
border-bottom:none;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 3px;
padding-left: 30px;
}

#menu {
width:760px;
height:60px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 3px;
background-image: url(Img/menu.png);
}

#Corps {
width:760px;
margin-left: 3px;
}

.bulG {
background-color:#B49E53;
width:320px;
margin-left: 15px;
margin-bottom: 30px;
margin-top: 30px;
background-image: url(Img/topbloc.gif);
background-repeat: no-repeat;
color: white;
text-align: center;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
}

.bulD {
background-color:#B49E53;
padding:5px;
width:320px;
margin-right: 15px;
margin-bottom: 30px;
margin-top: 30px;
background-image: url(Img/topbloc.gif);
background-repeat: no-repeat;
color: black;
text-align: center;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
}
.col1 {
background-color:#FFFFFF;
width:190px;
margin-left: 25px;
margin-top: 15px;
background-image: url(Img/topcol.gif);
background-repeat: no-repeat;
color: #000000;
text-align: center;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
float: left;
}
.col2 {
background-color:#FFFFFF;
width:190px;
margin-left: 25px;
margin-bottom: 15px;
margin-top: 15px;
background-image: url(Img/topcol.gif);
background-repeat: no-repeat;
color: #000000;
text-align: center;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
float: left;
}
.col3 {
background-color:#FFFFFF;
width:190px;
margin-left: 25px;
margin-bottom: 30px;
margin-top: 15px;
background-image: url(Img/topcol.gif);
background-repeat: no-repeat;
color: #000000;
text-align: justify;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
float: right;
margin-right: 25px;
}
div.titre {
background-image: url(Img/titre.png);
width: 680px;
padding: 5px 15px 5px 15px;
font-size: 1.1em;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 25px 0px 25px;
text-align: center;

}
.bul {
background-color:#FFFFFF;
padding:5px;
width:320px;
margin-right: 7px;
margin-bottom: 30px;
margin-top: 30px;
background-image: url(Img/topblocwh.jpg);
background-repeat: no-repeat;
color: black;
text-align: center;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
margin-left: 15px;
}
.bul ul {
font-size: 0.9em;
text-align: justify;
padding: 10px 15px 0px 15px;
font-weight: normal;
}
#menu img {
margin-left: 10px;
margin-top: 18px;
text-decoration: none;
}
#menu a:visited {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

Heu... si il faut que je vous donne plus d'informations, faite moi signe.
Cette histoire me rend , suis désespéré...

J'ai vu sur certains sites des choses du style <-- if IE 7.0> et là un autre CSS </>

Je pense que c'est ce qu'il me faut, mais je n'en sait pas plus..
Est-ce que IE a du mal avec float???

Salut et bienvenue ,

camillegirard86 a écrit :
Le site a été validé par W3C.

Hem... non, pas tout à fait et d'ailleurs avec le code que rajoute ifrance il me semble bien que c'est impossible ! Tu devrais peut-être regarder du côté de free pour ton hébergement...

Pour ce qui est des liens qui pourraient t'aider :

- les commentaires conditionnels.

- la FAQ qui donne notamment une solution à la plupart des bugs d'IE6.

- Éléments flottants qui dépassent de l'élément parent.

- et plus globalement les tutos : Bases et indispensables.

Bon courage... !

Bonjour, merci pour les ressources, je vais me pencher dessus...

Euh, au passage, les sites ne se comporte pas toujours pareil selon les hébergeurs????

camillegirard86 a écrit :
Euh, au passage, les sites ne se comporte pas toujours pareil selon les hébergeurs????

Certains hébergeurs gratuits (notamment ifrance et lycos) ont la mauvaise habitude de rajouter du code à chacune de tes pages (essentiellement de la pub sous forme de javascript) ce qui, en plus d'être irritant pour tes visiteurs, rend ta page invalide ! Ce n'est pas le cas de free qui est lui aussi gratuit ...

camillegirard86 a écrit :
Bonjour, merci pour les ressources, je vais me pencher dessus...

Euh, au passage, les sites ne se comporte pas toujours pareil selon les hébergeurs????

Oui c'est le cas de hébergeurs gratuits (pas tous) qui tirent des revenus de tes contenus en rajoutant de la pub (toi tu touches rien ). Parfois ces derniers rajoutent des scripts comme ifrance pour rajouter de la pub, des statistiques etc. qui ruinent tout efforts de conformité et de validation.
Le plus sûr est de prendre un hébergement mutualisé avec un nom de domaine. C'est bon marché .

Effet de bord de ces scripts placés avant ta DTD ils font basculer IE en mode quirk:
A propos du Modèle de boîte Microsoft (ou "quirks")
Modifié par Igor (04 May 2008 - 13:32)

En principe, si seul un bandeau publicitaire, ou un autre code plus ou moins indépendant de ta volonté rend la page invalide, le W3C permet l'utilisation de l'image "Valide".

A vérifier, toutefois.

Lpu8er a écrit :
En principe, si seul un bandeau publicitaire, ou un autre code plus ou moins indépendant de ta volonté rend la page invalide, le W3C permet l'utilisation de l'image "Valide".

A vérifier, toutefois.

Tu t'appuis sur une étude pointue ?

Non, sur les sites que j'ai déjà croisé.
D'où le "à vérifier".

C'est en quelque sorte logique: pour l'accessibilité, la publicité peut sauter, ainsi que les codes externes indépendants de la volonté du site.

Mais comme j'ai dit, si on peut poser la question au W3C c'est encore mieux, histoire d'avoir le fin mot de l'histoire

Lpu8er a écrit :
C'est en quelque sorte logique: pour l'accessibilité, la publicité peut sauter, ainsi que les codes externes indépendants de la volonté du site.

Mais comme j'ai dit, si on peut poser la question au W3C c'est encore mieux, histoire d'avoir le fin mot de l'histoire

Le but du jeu n'est pas tant d'avoir l'icône "Valide" mais bel et bien que ta page le soit... ce qui n'est pas le cas en mettant des <script> avant le DOCTYPE et quand IE bascule en mode quirk ! Donc je ne vois pas bien comment un validateur pourrait te valider une telle page !

Heyoan a écrit :
ce qui n'est pas le cas en mettant des <script> avant le DOCTYPE et quand IE bascule en mode quirk

Problème IE, simplement. Dans la logique, tu ne peux pas assurer la validation d'un tel comportement, qui est complétement indépendant de ta volonté.
La validation est pour prévoir les problèmes d'accessibilité et intercompatibilité, sauf erreur. Si le site est accessible et intercompatible par ta volonté, le but est atteint.
Si par cause d'un code non-contrôlable par ta volonté (script de pub, cas typique) le bandeau en question ne s'affiche pas, c'est "presque" mieux (je plaisante, hein).
Il est clair que ça reste, sur le papier invalide.
Mais dans le principe, je trouve ça valide, et je ne suis pas visiblement le seul.

Après, je rajoute ce que j'avais mis: "le mieux serait d'avoir l'avis du W3C".

En fait je ne comprends pas bien ton point de vue :

la page en question n'est pas invalide que pour IE mais pour tous les navigateurs... Et d'ailleurs comment demanderais-tu au W3C : "Ma page est invalide mais ce n'est pas de mon fait... je pourrais mettre l'icone Valide quand même SVP ?"

Ou plutôt "ma page est invalide à cause du bandeau publicitaire ne servant absolument pas à la navigation ou au contenu".

Comme j'ai dit, reste à voir. Et quand je disais pour IE, c'est vis-à-vis de son "amour" de JS, qui réagit un peu comme il le souhaite... C'était un peu hors-sujet sur le coup, j'avoue.

Merci d'arrêter là cette digression dans le sujet de camillegirard86, ou bien poursuivre la discussion dans un autre sujet.

@Lpu8er: une page est valide ou invalide. Pas "ma page est valide malgré...ce qui la rend invalide". Il n'y a pas de question à posé au W3C. C'est binaire: oui ou non.
Modifié par Igor (04 May 2008 - 14:32)