Divers problèmes avec IE6

Question

Maxime VIRY

10 Mar 2009 à 16:13

Bonjour à tous,

Je suis actuellement chargé du développement d'un site pour une communauté de communes.

J'intègre en ce moment les maquettes xhtml/css et je ne vous cache pas que j'ai un certain nombre de problèmes avec Internet Explorer 6 (étonnant non? Smiley lol

). Problèmes que je n'ai pas pu résoudre à ce jour malgré mes recherches sur ce forum.

Je me permets de vous les présenter ci-dessous, avec l'espoir que vous pourrez me venir en aide :

http://www.maxime-viry.com/cchm/ trois soucis principaux : anarchie dans l'affichage de mes différents blocs, problèmes de background (j'ai pourtant fait plusieurs essais avec overflow), formulaire de la newsletter étrangement affiché.

http://www.maxime-viry.com/cchm/categ.html le bloc de droite ne respecte pas le padding du conteneur. Petits soucis également avec le bouton de validation du formulaire à gauche.

http://www.maxime-viry.com/cchm/page.html idem

voici le css :

body{
background-color: #c5cacd;
background-image: url(body.jpg);
background-repeat: repeat-x;
color: #414040;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
}
a{
color: #ff0000;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #ff7800;
}
#conteneur{
width: 992px;
margin: 0 auto;
}
#welcome{
width: 100%;
height: 19px;
background-image: url(h1_top.jpg);
background-repeat: no-repeat;
margin: 0;
}
#welcome h1{
color: #fff;
font-style: italic;
font-weight: normal;
font-size: .8em;
margin: 0;
padding: 2px 0 0 20px;
vertical-align: middle;
}
#welcome a{
border-bottom: 1px dotted;
color: #fff;
text-decoration: none;
}
#welcome a:hover{
color: #ff7800;
}
#banner{
height: 140px;
width: 100%;
margin: 0;
background-image: url(banner.jpg);
background-repeat: no-repeat;
}
#logo{
border: 0;
margin-top: 15px;
margin-left: 15px;
}
#nav{
margin: 6px 0 0 6px;
list-style: none;
padding:0;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav a{
display: inline;
height: 28px;
background-image: url(menu.jpg);
background-repeat: repeat-x;
color: #fff;
text-decoration: none;
padding:8px 9px 8px 8px;
font-size: 1em;
line-height: 2em;
font-weight: bold;
}
#nav a:hover{
background-image: url(menu_hover.jpg);
}
#nav li {
margin-top:0px;
float: left;
padding:0;
}
#menu{
background-image: url(bg_menu.jpg);
background-repeat: no-repeat;
height: 36px;
overflow: hidden;
margin: 0;
}
#contenu{
background-image: url(contenu.jpg);
background-repeat: repeat-y;
overflow: hidden;
padding: 10px 25px 10px 25px;
margin: 0;
height: 100%;
}
#breadcrumb{
width: 100%;
margin: 0;
height: 20px;
font-size: .8em;
padding: 0;
color: #a7a6a6;
}
#accueil{
background-image: url(contenu.jpg);
background-repeat: repeat-y;
overflow: hidden;
padding: 0 20px 10px 20px;
margin: 0;
height: 100%;
font-size: 0.8em;
}
#accueil h1{
font-size: 1.4em;
color: #0180b0;
background-image: url(h1.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
margin: 0;
}
#accueil a{
color: #ff7800;
}
#edito{
width: 607px;
float: left;
text-align: justify;
position: relative;
}
#editop{
background-image: url(editop.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#gauchedito{
width: 490px;
float: left;
margin-left: 10px;
}
#editomil{
background-image: url(editomil.jpg);
overflow: hidden;
margin: 0;
padding: 0;
background-repeat: repeat-y;
}
#editomil p{
text-indent: 20px;
margin: 16px 0 15px 0;
}
#editomil img{
float: right;
margin-right: 15px;
margin-top: 20px;
}
#editobas{
background-image: url(editobas.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
clear: both;
}
#map{
width: 329px;
float: right;
}
#map h2{
color: #0180b0;
font-style: italic;
font-size: 1.6em;
margin: 10px 0 0 25px;
}
#map p{
font-weight: bold;
font-size: 1.4em;
margin: 0 0 0 25px;
}
#map img{
float: right;
margin: 0 5px 0 0;
}
#coord{
width: 329px;
float: right;
}
#coordtop{
background-image: url(coordtop.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#coordmil{
background-image: url(coordmil.jpg);
overflow: hidden;
margin: 0;
padding: 0 10px 0 10px;
background-repeat: repeat-y;
}
#coordbas{
background-image: url(coordbas.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#coord a{
font-size: 1.1em;
background-image: url(enveloppe.jpg);
background-repeat: no-repeat;
margin-top: 2px;
padding-left: 25px;
line-height: 16px;
float: right;
}
#actu{
width: 246px;
float: left;
margin-top: 15px;
}
#actutop{
background-image: url(actutop.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#actumil{
background-image: url(actumil.jpg);
overflow: hidden;
margin: 0;
padding: 0 10px 0 10px;
background-repeat: repeat-y;
}
#actubas{
background-image: url(actubas.jpg);
height: 30px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
text-align: right;
}
#actubas a{
color: #a95001;
line-height: 30px;
margin-right: 10px;
}
#actu ul{
list-style: disc url(puce.gif);
margin-left: 30px;
padding: 0;
margin-bottom: 0;
margin-top: 15px;
}
#actu li{
margin: 10px 0 5px 0;
}
#accesrapide{
width: 210px;
float: left;
margin: 15px 0 0 15px;
}
#accesrapidetop{
background-image: url(accesrapidetop.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#accesrapidemil{
background-image: url(accesrapidemil.jpg);
overflow: hidden;
margin: 0;
padding: 0 10px 0 10px;
background-repeat: repeat-y;
}
#accesrapidebas{
background-image: url(accesrapidebas.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
text-align: right;
}
#accesrapide ul{
list-style-type: none;
margin: 10px 0 0 10px;
padding: 0;
font-size: 1.4em;
}
#newsletter{
width: 210px;
height: 61px;
background-image: url(newsletter.jpg);
background-repeat: no-repeat;
float: left;
margin: 15px 0 0 15px;
}
#nlfield{
width: 135px;
height:22px;
margin-top: 30px;
margin-left: 20px;
background: url(nlfield.gif) no-repeat;
background-position: left center;
padding: 0;
}
#newsletter input[type="text"]{
border: 0;
float: left;
height: 12px;
width: 100px;
margin: 5px 0 0 5px;
padding: 0;
font-size: 0.9em;
color: #000;
}
#newsletter input[type="image"]{
float: right;
margin: 0;
padding: 0;
}
#newsletter form{
margin: 0;
padding: 0;
}
#agenda{
float: right;
width: 468px;
margin-top: 15px;
}
#agendatop{
background-image: url(agendatop.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#agendamil{
background-image: url(agendamil.jpg);
overflow: hidden;
margin: 0;
padding: 0 10px 0 10px;
background-repeat: repeat-y;
}
#agendabas{
background-image: url(agendabas.jpg);
height: 30px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
text-align: right;
}
#agendabas a{
color: #a95001;
line-height: 30px;
margin-right: 10px;
}
#agenda ul{
list-style: disc url(puce.gif);
}
#agenda li{
margin: 10px 0 10px 0;
}
#projets{
float: left;
clear: both;
width: 468px;
margin-top: 15px;
}
#projetop{
background-image: url(projetop.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#projetmil{
background-image: url(projetmil.jpg);
overflow: hidden;
margin: 0;
padding: 0 10px 0 10px;
background-repeat: repeat-y;
}
#projetbas{
background-image: url(projetbas.jpg);
height: 30px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
text-align: right;
}
#projetbas a{
color: #a95001;
line-height: 30px;
margin-right: 10px;
}
#projets ul{
list-style: disc url(puce.gif);
}
#projets li{
margin: 10px 0 10px 0;
}
#publications{
float: right;
width: 468px;
margin-top: 15px;
}
#publicationstop{
background-image: url(publicationstop.jpg);
height: 8px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
#publicationsmil{
background-image: url(publicationsmil.jpg);
overflow: hidden;
margin: 0;
padding: 0 10px 0 10px;
background-repeat: repeat-y;
}
#publicationsmil img{
float: right;
}
#publi{
text-decoration: none;
border: none;
}
#publicationsbas{
background-image: url(publicationsbas.jpg);
height: 30px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
text-align: right;
}
#publicationsbas a{
color: #a95001;
line-height: 30px;
margin-right: 10px;
}
#breadcrumb span{
vertical-align: middle;
}
#breadcrumb a{
color: #a7a6a6;
}
#breadcrumb a:hover{
color: #ff7800;
}
#left{
float: left;
width: 200px;
margin-top: 20px;
}
#left ul{
list-style-type: none;
margin: 5px;
padding: 0;
font-size: 0.8em;
}
#left li{
margin: 5px 0 5px 0;
line-height: 1em;
}
#left span{
background: url(spanleft.jpg) no-repeat;
width: 200px;
display: block;
line-height: 29px;
color: #fff;
font-weight: bold;
padding-left: 35px;
margin-top: 25px;
}
#left a{
text-decoration: none;
color: #ff7800;
}
#left a:hover{
text-decoration: underline;
}
#left p{
font-size: 0.8em;
padding-right: 10px;
}
#left form{
margin: 0;
}
#left input[type="text"]{
border: 1px dotted #ccc;
height: 1em;
width: 10em;
float: left;
}
#left input[type="submit"]{
font-size: 0.9em;
margin-left: 4px;
width: 3em;
color: blue;
height: 2em;
background-color: orange;
border: none;
}
#left input[type="submit"]:hover{
cursor: pointer;
background-color: #ff0000;
color: #fff;
}
#right{
float: right;
width: 730px;
margin-top: 20px;
}
#contenu h1{
font-size: 1.3em;
color: #0180b0;
background-image: url(h1.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
}
#contenu h2{
font-size: 1.2em;
color: #ff7800;
background-image: url(h2.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
margin: 25px 0 15px 25px;
}
#contenu h3{
font-size: 1.1em;
color: #258f01;
background-image: url(h3.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 25px;
margin: 25px 0 15px 50px;
}
#contenu p{
text-align: justify;
line-height: 1.4em;
margin: 5px 0 5px 0;
}
.categ{
list-style-type: none;
margin: 35px 0 35px 10px;
}
.categ li{
margin: 15px 0 15px 0;
}
.categ a{
color: #0080ca;
}
.categ a:hover{
color: red;
}
#footer{
height: 25px;
background-image: url(footer.jpg);
background-repeat: no-repeat;
text-align: center;
margin: 0;
padding-top: 10px;
}
#footer a{
color: #fff;
font-size: .7em;
margin: 0 8px 0 8px;
}
#footer a:hover{
color: #ff7800;
}

ps: j'espère avoir posté dans la bonne catégorie !

Felipe

Administrateur

10 Mar 2009 à 19:58

Bonjour,

pour ton 1er lien et pour les problèmes de background avec un espace vertical, par exemple au-dessus de coordonnées:
essaie de rajouter

font-size: 1px;
sinon
zoom: 1;
sinon
line-height: 0.01;

dans la règle #coordtop ligne 197

À gauche, l'absence de fond est typiquement celui d'un conteneur dont tous les enfants sont flottants donc sortis du flux du document. Sa hauteur (au conteneur) est alors nulle puisqu'il ne contient "rien".
Si

overflow: hidden;

ne suffit pas, rajouter comme dernier enfant du div #edito (après les flottants mais avant la fermeture du parent évidemment) un div devrait arranger le coup:

<div class="clear"> </div>
et
.clear {
	font-size: 1px;
	line-height: 0.01;
	clear: both;
	height: 1px;
	/* /!\ j'ai encore plus paranoïaque comme version */
}

Felipe

Administrateur

10 Mar 2009 à 20:05

Maxime VIRY a écrit :
http://www.maxime-viry.com/cchm/ trois soucis principaux : anarchie dans l'affichage de mes différents blocs

Soit ce que tu as en 2ème ligne (Actualité, En un clic, Agenda) est une 2ème ligne et tu peux tout mettre dans un conteneur commun (éventuellement ayant une largeur mais ça doit pas être nécessaire?), soit de façon plus sioux tu empêches ton bloc Actualité de flotter n'importe où, par exemple sous le dernier bloc de la 1ère "ligne" sous le prétexte fallacieux qu'il a une hauteur moindre et qu'en vertu du positionnement des flottants, le bloc suivant va se placer là ... Pour éviter cela donc, tu peux rajouter

clear: left;

sur ce bloc Actualité, ce qui va lui interdire d'avoir un élément flottant à sa gauche Smiley smile

Maxime VIRY

10 Mar 2009 à 22:15

Bonsoir,

le clear:left fonctionne à merveille Smiley cligne

Mais pas le reste Smiley bawling

Maxime VIRY

11 Mar 2009 à 16:13

Une autre solution? Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Divers problèmes avec IE6