Bonjour,
Merci d'abord pour tout ce que j'ai pu apprendre sur Alsacréations Smiley smile
Voici mon souci :
Je voudrais refaire le site de mon asso de Shiatsu, et j'ai commencé à travailler sur un modèle de page avec CSS.
Pour le menu, je me suis inspiré d'Eric MEYER (More on CSS)
Le résultat fonctionne parfaitement sous Firefox et Safari, il est OK par le biais de l'extension Firefox "View this page in IE"....mais le texte central est invisible si la page est ouverte directement dans IE Smiley fache .Il est pourtant présent, puisqu'en sélectionnant son emplacement à la souris il devient visible ! Smiley eek
Adresse de la page
http://www.shiatsu-aist.org/test/menu.html
Le menu fait appel à un behavior csshover.htc, dont le texte est également dispo en .txt ici
http://www.shiatsu-aist.org/test/csshover.txt
Smiley confused Smiley confused Smiley confused J'en perds mon latin...Quelq'un a-t-il une idée de la solution, ou rencontré le même souci ?
Voici le CSS :
* {margin:0;padding:0}
	 
.vert {
color: #4B5D1E;
}

#espace{
  clear: both;
}

body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 1%;
background: #C4DA8D;
behavior: url(csshover.htc);
} /* WinIE behavior call */


p {margin: 1.25em 0 1.25em 0;
}

.h3{color:#003300;
	font-weight:bold;
	font-size: 1.3em;
	line-height: 0.2;
}
.h4{color:#003300;
	font-weight:bold;
	font-size: 1.2em;
	line-height: 0.2;
}

.hr{
	border-top:3px double #C4DA8D;
}

a:link {
  color: /*#003300*/#4B5D1E;
  text-decoration: none;
  font-weight: 900;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}
 
a:visited {
 color: /*#003300*/#4B5D1E;
  text-decoration: none;
  font-weight: 900;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}
 
a:hover {
  color: #DBA400/*#006600*/;
  text-decoration: none;
 font-weight: 900;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}
 
a:active {
  color: #DBA400/*#006600*/;
  text-decoration: none;
 font-weight: 900;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}

/*Aspect de la page*/

#conteneur {
width:auto;
margin:0 auto;
border: 3px double #8B8B8B;
background-color:white;/*#EFECF8;*/
}

#conteneur h3{
	color:#4B5D1E;
	margin-right:2em;
	margin-left:1em;
}


/*BANDEAU HAUT (LOGO + TITRE)*/

#bandeau {
height: 170px;
background-image: url(images/logo_dessin_160x160.gif);
background-position: 3px;
background-repeat: no-repeat;
}


#bandeautxt{
position: relative;
text-align: center;
margin-left: 250px;
margin-right:250px;
font-size:2em;
}

/*Dans le titre, la premiere lettre de chaque mot
en gris*/

.lettretitre {
font-size:130%;
color : #8B8B8B;
}

/*FIN DU BANDEAU*/


/*DEBUT colonne centrale /texte des pages*/

#centre {
/*display: block;
visibility: visible;*/
margin-left: 160px;
margin-right: 160px;
min-height: 350px;
}

/*Lettrine en gris dans chaque paragraphe*/
#centre p {
text-indent: 1em;
text-align: justify;
margin-right: 4em;
margin-left: 3em;
}
#centre p:first-letter {
font-size : 1.5em;
/*font-weight:bold;*/
color : #8B8B8B;
font-weight:600;
}

/*Pied de page (en bas de conteneur)*/

#pied {
/*display: block;
visibility: visible;*/
clear:both;
background-color:#ABABAB;
color: #C4DA8D;
text-align: center;
font-size: 1.2em;
font-style: italic;
border-top: 5px double #3A3A3A;
margin-top: 1em;
font-weight: bold;
}

/* Colonne de gauche (pour le menu de navigation)*/

#gauche {
float:left;
width: 150px;
margin-left: 0.2em
}

/*Colonne de droite (pour l'affichage des news)*/

#droite {
float:right;
width: 150px;
border: 1px solid #CCC;
font-size: 1em;
margin-top: 4em;
margin-right:0.5em;
padding:0.5em 0.5em  0.5em  0.5em ;
text-align: center;
}

#droite li {
margin-bottom: 5px;
margin-left:0.5em;
list-style-type: none;
text-align: left;
font-size: 0.9em;
border-top: 1px solid #8B8B8B;
font-weight:bold;
}
#droite li a:link{
   text-decoration: none;
	font-size: 1em;
   font-weight:bold;
   background-color: #DBA400;
   color:#4B5D1E;
	padding-left:1em;
   padding-right: 1em;
	line-height: 25px;
}
#droite li a:visited {
  color: #003300;
  text-decoration: none;
}
#droite li a:hover{
text-decoration: none;
	color:#DBA400;
	background-color: #C4DA8D;
	padding-right: 1em;
	padding-left:1em;
	}
 #droite li a:active {  
  text-decoration: none;
  }

/* -------------MENU MEYER-----------------*/
/*
Reprise de moreoncss d'Eric MEYER 
Citer source dans l'ours ?
*/

#menugauche {
list-style-type: none;
}

div#nav {float: left; width: 145px; margin: 4em 0 0 -1px;
  background: #E2EDC6;
  font-size: 0.8em;
  font-weight: bold;
}
div#nav ul {margin: 0; padding: 0; width: 145px/*7em*/; background: #E2EDC6;
  border: 1px solid #AAA;}
div#nav ul.level2 {background: #E2EDC6;}
div#nav ul.level3 {background: #E2EDC6;}
div#nav li {position: relative; list-style: none; margin: 0;
  border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #C4DA8D;}
div#nav li.submenu {background: url(images/submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #C4DA8D;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
  color:/*#003300*/#4B5D1E;;text-decoration: none; width: 6em; border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color:/*#CCCCFF*/#DBA400;color:#8B8B8B/*#006600*/;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 145px/*7em*/;
  display: none;}
div#nav ul.level1 li.submenu:hover ul.level2, 
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}
/*  -------------FIN MENU MEYER-----------------*/


www.shiatsu-aist.org/test/menu.html
Modifié par Sei Shiatsu Do (18 Dec 2005 - 15:41)
Bonjour,

<private joke>Les problèmes de haslayout frappent encore et toujours...</>

Ajoute à #centre une des propriétés suivantes, au choix :
- zoom: 1 (invalide, à mettre dans une CSS en commentaires conditionnels, voir FAQ du forum)
- height: ...n'importe quelle valeur
- width: ...idem

Elles donnent à l'élément concerné un état qui n'existe que dans IE Windows, le layout. Il évite à celui-ci d'oublier de dessiner le contenu de ton #centre (ce qu'il fait à cause de la présence des 2 flottants adjacents).
Modifié par Laurent Denis (18 Dec 2005 - 12:35)
MERCI !!!
J'aurais dû y penser....
J'avais jusqu'ici évité ce piège, mais dès la première fois qu'il se présente...je saute à pieds joints. Smiley confused