Disparition de div sur IE 7

Question

codette

19 Jul 2010 à 19:07

bonjour,

je me permets de poster un nouveau message car malgré les conversations qui existent déjà à ce propos mon problème n'a pas encore trouvé sa solution

Mon site scroll horizontalement et slide vers la droite pour faire découvrir de nouvelles pages
J'ai trois éléments en position absolute : mon menu-principal (vertical) mon footer (horizontal) et un cache qui permet d'occulter les pages qui sont sur la droite

Mon souci : avec IE 7 le footer et le cache sont aux abonnées absents, on ne les voit pas ...
Pourtant ils sont bien dans le code mais rien à faire, j'ai testé en appliquant des styles mais ils ne se montrent toujours pas
Le plus étrange c'est que le menu principal connait à peu de choses près les même css
(position:fixed avec un z-index)

JE CALE

<div class="menu-column">



<a id="image-retour" > <img class="logo" width="157" height="128" src="images/img-retour-accueil.png" alt="acceuil ch&acirc;teau de pontarm&eacute;"/> </a>
<ul>
  <li><a class="chateau" id="ongletChateau" >LE CH&Acirc;TEAU</a></li>
	  <li><a class="particuliers" id="ongletParticuliers" onclick="javascript:apparitionReception();">R&Eacute;CEPTIONS PRIV&Eacute;ES</a></li>
	  <li><a class="professionnels" id="ongletProfessionnels" href="javascript:apparitionEvenement();" >MANIFESTATIONS PROFESSIONNELLES</a></li>
	  <li><a class="cinema" id="ongletCinema" >D&Eacute;COR DE CIN&Eacute;MA</a></li>
	  <li><a class="partenaires" id="ongletPartenaires" >PARTENAIRES</a></li>
	  <li><a class="livre_d_or" id="ongletLivre_d_or" >LIVRE D'OR</a></li>
	  <li><a class="contact" id="ongletContact" >CONTACT</a></li>
	  <li><a class="plan_d_acces" id="ongletPlan_d_acces" >PLAN D'ACC&Egrave;S</a></li>
    	
  </ul>
  
  
  
</div> <!-- fin menu column -->



<!-- *****************************************************************HORIZONTALE******************************************************************* -->
<div class="menu-footer">
	<div id="un">
		<ul> 
		<li class="chapitre"> <a class="chateau_footer" id="ongletChateau_footer" href="javascript:apparitionPresentation();" > Le ch&acirc;teau </a></li>
		<li> <a class="lien" href="javascript:apparitionPresentation();" id="ongletHistoire_footer"> &nbsp;: Pr&eacute;sentation | </a> </li>
		<li> <a class="lien" href="javascript:apparitionHistorique()" id="ongletHisto_footer"> &nbsp; Historique | </a> </li>
		
		</ul> 
	</div>

	<div id="deux"><ul> <li class="chapitre"><a class="particuliers_footer" id="ongletParticuliers_footer" onclick="javascript:apparitionReception();"> R&eacute;ceptions priv&eacute;es </a></li><!--href="javascript:none"-->
		<li><a class="lien" onclick="javascript:apparitionReception();" id="ongletMariages_footer"> &nbsp; : Mariages |  </a></li>
        <li><a class="lien" onclick="javascript:apparitionReception();" id="ongletReception_footer"> &nbsp; Votre r&eacute;ception |  </a></li>
          <li><a class="lien" onclick="javascript:apparitionSallesetsalons();" id="ongletSalons_footer"> &nbsp; Salles et salons |  </a></li>
		<li><a class="lien" onclick="javascript:apparitionJardins2();" id="ongletJardins_footer" > &nbsp; Jardins |  </a></li>
        <li><a class="lien" onclick="javascript:apparitionautresevenements();" id="ongletautresEvenement_footer" > &nbsp; Autres &eacute;v&eacute;nements |  </a></li>
        <li><a class="lien" onclick="javascript:apparitionautresevenements();" id="ongletsoirees-privees_footer" > &nbsp; Soir&eacute;es priv&eacute;es |  </a></li></ul>
		 </div>

	<div id="trois"><ul> <li class="chapitre"> <a class="professionnels_footer" id="ongletProfessionnels_footer"  href="javascript:apparitionEvenement();"> Manifestations professionnelles : </a> </li><!--href="javascript:none"-->
		<li><a class="lien" href="javascript:apparitionEvenement();" id="ongletEvenements_footer">  &nbsp; &Eacute;v&eacute;nements |  </a>  </li>
        <li><a class="lien" href="javascript:apparitionEvenement();" id="ongletSeminaires_footer"> &nbsp; S&eacute;minaires, D&icirc;ners professionnels |  </a>  </li>
        <li><a class="lien" href="javascript:apparitionteam();" id="ongletTeam_footer"> &nbsp; Team building | </a>  </li>
        <li><a class="lien" href="javascript:apparitionteam()" id="ongletRegion_footer"> &nbsp; Les activit&eacute;s, La r&eacute;gion |  </a>  </li>
		<li><a class="lien" href="javascript:apparitionref();" id="ongletRef_footer"> &nbsp; R&eacute;f&eacute;rences | </a>  </li>  </ul> </div>


	<div id="quatre"><ul> <li class="chapitre"><a class="cinema_footer" id="ongletCinema_footer" >D&eacute;cor de cin&eacute;ma </a></li>
		<li><a class="lien"  id="ongletTournage_footer"> &nbsp; : Tournages, prises de vues, r&eacute;f&eacute;rences | </a> </li> </ul>
		</div>

   <div id="cinq"><ul> <li class="chapitre"><a class="partenaires_footer" id="ongletPartenaires_footer">Partenaires | </a></li> 
		 </ul></div>

	<div id="six"><ul> <li class="chapitre"> <a class="livre_d_or_footer" id="ongletLivre_d_or_footer">  &nbsp; Livre d'Or |</a></li> </ul></div>
	<div id="sixbis"><ul> <li class="chapitre"> <a class="contact_footer" id="ongletContact_footer" > &nbsp;Contact |</a></li> </ul></div>

	<div id="sept"><ul> <li class="chapitre"> <a class="plan_d_acces_footer" id="ongletPlan_d_acces_footer" > Plan d'acc&egrave;s |</a></li> </ul> </div>
	<div id="septbis"> <ul> <li class="chapitre"> <a class="credits_footer" href="#" onclick="window.open('credits.html','Cr&eacute;dits du site ch&acirc;teau de Pontarm&eacute;','toolbar=0, location=1, directories=0, status=1, scrollbars=1, resizable=1, copyhistory=0, menuBar=1, width=400, height=300, left=0, top=0');return(false)">Cr&eacute;dits |</a></li> 
    </ul></div>
</div> <!-- fin menu footer -->

<div class="cache"> </div>

.menu-column { 
	left: 27px;
	height: 660px;
	width:157px;
	position: fixed;
	background-image:url(../images/navigation_Verticale.png);
	z-index: 100;
	background-repeat: no-repeat;
}

.menu-column UL{
	margin: 0px;
	padding: 0px;
	float: left;
	margin-top: 5px;
}

.menu-column UL LI  {
	width: 100%;
	list-style: none;
	list-style-type: none;
	list-style-image: none;
	clear: both;
}

.logo {border:none;}

.chateau {	
background:url(../images/bt-menu-column-chateau.gif) no-repeat scroll 0 0 transparent;
display:block;
height:30px;
overflow:hidden;
text-indent:-9000px;
width:157px;}

.particuliers{	
background:url(../images/bt-menu-column-recpet.gif) no-repeat scroll 0 0 transparent;
display:block;
height:30px;
overflow:hidden;
text-indent:-9000px;
width:157px;}

.professionnels {	
background:url(../images/bt-menu-column-pro.gif) no-repeat scroll 0 0 transparent;
display:block;
height:37px;
overflow:hidden;
text-indent:-9000px;
width:157px; }

.cinema{	
background:url(../images/bt-menu-column-cinema.gif) no-repeat scroll 0 0 transparent;
display:block;
height:30px;
overflow:hidden;
text-indent:-9000px;
width:157px; }

.partenaires{	
background:url(../images/bt-menu-column-partenaires.gif) no-repeat scroll 0 0 transparent;
display:block;
height:30px;
overflow:hidden;
text-indent:-9000px;
width:157px; }

.livre_d_or{	
background:url(../images/bt-menu-column-livre-dor.gif) no-repeat scroll 0 0 transparent;
display:block;
height:30px;
overflow:hidden;
text-indent:-9000px;
width:157px; }

.contact{
background:url(../images/bt-menu-column-contact.gif) no-repeat scroll 0 0 transparent;
display:block;
height:30px;
overflow:hidden;
text-indent:-9000px;
width:157px;}

.plan_d_acces{
background:url(../images/bt-menu-column-acces.gif) no-repeat scroll 0 0 transparent;
display:block;
height:30px;
overflow:hidden;
text-indent:-9000px;
width:157px;}

a#ongletChateau:hover, .ongletChateau, page1 a#ongletChateau{background-position:0 -30px; outline:none;cursor:pointer}

a#ongletParticuliers:hover, .ongletParticuliers, page2 a#ongletParticuliers{ background-position:0 -30px;cursor:pointer}

a#ongletProfessionnels:hover, .ongletProfessionnels, page3 a#ongletProfessionnels{ background-position:0 -38px;cursor:pointer}

a#ongletCinema:hover, .ongletCinema, page4 a#ongletCinema {background-position:0 -30px;cursor:pointer}

a#ongletPartenaires:hover, .ongletPartenaires, page5 a#ongletPartenaires {background-position:0 -30px;cursor:pointer }

a#ongletLivre_d_or:hover, .ongletLivre_d_or, page5 a#ongletLivre_d_or { background-position:0 -30px;cursor:pointer}

a#ongletContact:hover, .ongletContact, page5 a#ongletContact {background-position:0 -30px;cursor:pointer}

a#ongletPlan_d_acces:hover, .ongletPlan_d_acces, page5 a#ongletPlan_d_acces { background-position:0 -30px;cursor:pointer }


/********************************************** MENU HORIZONTAL *******************************************/

.menu-footer {
	margin-top: 765px;
	margin-left:27px;
	width:950px;
	position:absolute;
	z-index: 100;
	
}

.menu-footer UL { height:12px; position:relative;}

#un ul {float:left;}
#deux ul {float:left;}
#trois ul {float:left;}
#quatre ul {float:left;}
#cinq ul {float:left;}
#six ul {float:left;}
#sixbis ul {float:left;}
#sept ul {float:left;}
#septbis ul {float:left;}

.menu-footer UL LI { list-style-type:none; text-align: left; float:left;height:10px;}

.chateau_footer, .particuliers_footer, .professionnels_footer, .cinema_footer, .partenaires_footer, .livre_d_or_footer, .plan_d_acces_footer , 
.contact_footer, .planDuSite_footer, .credits_footer 
{
	font-size:10px;
	color:#f00;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#504c47;
	display:block;
	height:10px;
	text-decoration:none;
}

.chateau_footer:hover, .particuliers_footer:hover, .professionnels_footer:hover, .cinema_footer:hover, .partenaires_footer:hover, .livre_d_or_footer:hover, .plan_d_acces_footer:hover , 
.contact_footer:hover, .planDuSite_footer:hover, .credits_footer:hover 
{
	 cursor:pointer;
}


.cache {
	background-color:#f4ebda;
	width:950px;
	height:748px;
	margin-left: 1100px;
	position: fixed;
	z-index: 12000;
}


.lien{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:10px; 
	color:#aba398;
	display:block;
	height:10px;
	text-decoration:none;

}

.lien:hover {cursor:pointer;}

Toutes les idées sont les bienvenues

Merci d'avance

codette

19 Jul 2010 à 19:08

pardon les éléments ne sont pas en absolute mais en fixed... Smiley confused

Sujet clos

CSS et mise en forme, CSS3

Disparition de div sur IE 7