28172 sujets

CSS et mise en forme, CSS3

Position fixed avec ie7 ??

Salut à tous,
alors voila mon probleme, j'ai un menu en haut de ma page en position fixed, qui normalement prend toute la largeur de la page.ca marche sous firefox et ie8. Sous ie7 mon menu prend pas toute la largeur, il ne va pas toute a gauche comme si il y avait une marge!
A ma connaissance ie7 interprete bien le fixed! vrai?

voila une partie de mon code:
[code=php]<?php

defined( '_JEXEC' ) or die( 'Restricted access' );

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

<head>
........
</head>

<body>
  <div id="menu">

                    <div id="menu-haut">

		    	 <ul id="gauche-head">
		       	 	<li class="item2"><a href=""></a></li>
				<li class="item1"><a id="bouton1" href="#"></a></li>
				<li class="item3"><a id="bouton2" href="#"></a></li>
	            	 </ul>

		    	 <div id="droite-head">
	           	 <jdoc:include type="modules" name="droite-head"/>
		    	 </div>

		    </div>

  </div>

  <div id="content_global" >
  </div>

</body>

</html>


body {

    background-color:#000;

    font-family: Arial, Verdana, Helvetica;

    padding:0;

    margin:0 ;

	   

}



html>body #menu {

position: fixed

}



#menu{

    width: 100%;

    height: 31px;

    position: absolute;

    background-image : url(../images/fondbarre.jpg) ;

    background-repeat: repeat-x;

    background-position: top;

    outline:none;

    z-index:99;

    

}



#menu-haut{

    margin:auto;

    width:870px;

    z-index:99;

}



ul#gauche-head li { 

   display : inline;

   height: 31px;

}



ul#gauche-head{

   height: 31px;

    list-style-type : none; /* Car sinon les puces se placent n'importe où */

    width:438px;

    margin-top:-2px;

     z-index:99;

     *margin-left:-1px;

    

}





#gauche-head li.item1 a {

    height: 31px;

    width:200px;

    background: url(../images/connect.jpg) no-repeat;

    float:left;

    margin-top:1px;

  



}



#gauche-head li.item2 a {

    height: 31px;

    width:90px;

    background: url(../images/accueil.jpg) no-repeat;

    float:left;

      margin-top:1px;



}



#gauche-head li.item3 a {

    height: 31px;

    width:148px;

    background: url(../images/panier.jpg) no-repeat;

    float:left;

    margin-top:1px;

	

}



#droite-head{

    height: 31px;

    background-image:url(../images/recherche.jpg) ;

    background-repeat:no-repeat;

    padding-left:140px;

    float:right;

    z-index:99;

    margin-top:-45px;

    *margin-top:-50px;

}



#content_global{

    width:1000px;

    margin:auto;

}


Pour le fixed j'ai utiliser la methode :

html>body #menu {
position: fixed
}

est cela qui pose probleme ?

Merci d'avance
Modifié par dualweil (11 May 2010 - 09:50)
Bonjour,

C'est l'absence de left:0; qui pose problème à IE7. Dans certains cas de figure, ça peut aussi poser problème aux autres navigateurs.

Pour information, tu devrais pouvoir dimensionner ton élément sans utiliser width:100%, en utilisant uniquement les coordonnées:
#menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
}

Modifié par Florent V. (11 May 2010 - 12:14)
Sujet clos
Aller à