28172 sujets

CSS et mise en forme, CSS3

Mise en forme du menu et sous-menu pour IE

Bonjour,

Je rencontre 2 pb pour mon menu css sous IE (pas de souci sur firefox) : http://chti.sportif.free.fr/index.php

Les sous menus ne disparaissent pas et le curseur jquery ne se place pas au niveau de "accueil"


<div id="catmenucontainer">
		<div id="nav">
				<ul id="A">
  <li><a href="/index.php">Accueil</a></li>
  <li><a href="/blog/">Blog</a>
  <li><a href="/calendrier.php">Calendrier</a>
   <ul>
    <li><a href="/cartecalendar.php">Sports</a></li>
    <li><a href="/cartecalendar_trail.php">Trail</a></li>
    <li><a href="/cartecalendar_randovtt.php">Rando VTT</a></li>
   </ul>
  </li>
  <li><a href="/resultats.php">Résultats</a></li>
  <li><a href="/forum/index.php">Forum</a>
  </li>
  <li><a href="/liens.php">Liens</a></li>
  <li><a href="/contact.php">Contact</a></li>
  <li><a href="/livredor/index.php">Livre d'or</a></li>
				</ul>
		</div>	
</div>




<script type="text/javascript">
/*son of suckerfish menu script from:  http://www.phpldog.com/articles/suckerfish/dropdowns/  */
sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>




#nav li.back {
    background-color: #9faa11;
    width: 5px;
    height: 20px;
	border:1px solid #9faa11;
	border-radius:5px; 
	-moz-border-radius:5px; 
	-webkit-border-radius:5px;
	top:7px;
    z-index: 8;
    position: absolute;
                    }
#nav {
	float: left;
    width: 960px;
    padding: 5px 10px;
    margin: 0;
    overflow: hidden;
        }
		
#nav ul {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#nav li a, #nav li a:link, #nav li a:visited {
    font:  13px Trebuchet ms,Century gothic, Arial, Tahoma, sans seriff ;
    outline: none;
    top: 3px;
    letter-spacing: 0;
    position: relative;
    overflow: hidden;
	text-decoration: none;
	color: #fff;
    letter-spacing: 0;
    z-index: 10;
	display: block;
    margin: auto 10px;
	padding: 0;
	}

#nav li a:hover, #nav li a:active {
	color: #fff;
    margin: auto 10px;
	padding: 0;
	text-decoration: none;
	}
	
#nav li li a, #nav li li a:link, #nav li li a:visited {
	background:#728600;
	color: #E9EF86;
	font-size: 13px;
	font-family: tahoma, century gothic,Georgia,  sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	width: 150px;
	float: none;
	margin: 0px;
	padding: 7px 10px 7px 10px;
	border-bottom: 1px solid #94A709;
	}
	
#nav li li a:hover, #nav li li a:active {
	background: #545F06 ;
	color: #fff;
	padding: 7px 10px 7px 10px;
	}

#nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 170px;
	margin: 0px;
	padding: 0px;
	}

#nav li li { 
	}

#nav li ul a { 
	width: 140px;
	}

#nav li ul a:hover, #nav li ul a:active { 
	}

#nav li ul ul {
	margin: -31px 0 0 170px;
	}

#nav li:hover ul ul, #nav li:hover ul ul ul, 
#nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
	}

#nav li:hover ul, #nav li li:hover ul, 
#nav li li li:hover ul, #nav li.sfhover ul, 
#nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	}

#nav li:hover, #nav li.sfhover { 
	}



/* fichier pour internet explorer */ 
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body {line-height: 1; behavior:url("csshover2.htc");}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {  outline: 0;}

/* remember to highlight inserts somehow! */
ins { text-decoration: none;}
del { text-decoration: line-through;}

/* tables still need ‘cellspacing="0"’ in the markup */
table { border-collapse: collapse; border-spacing: 0; }

img, h1, .class-with-png-background-image { behavior: url(iepngfix.htc);}


Comment résoudre ces 2 pb ?

Merci[/i][/i]
Modifié par CyberNord (24 Jan 2011 - 11:24)
bonsoir,

Je ne vais probablement pas résoudre ton problème, mais moi ils n'apparaissent pas correctement Smiley decu .

Félicitation pour ton menu; il est vraiment magnifique sur firefox.
Modifié par renard9 (19 Jan 2011 - 23:23)
Je ne connaissais pas ce site. Un site qui fait tout pour toi, c'est merveilleux

De mon coté, pour apprendre, j'essaye de tout faire (enfin, je m'inspire un peu de tutoral que je trouve). Pour le php, html, je suis maintenant assez autonome (j'ai les bases de la programmation, meme si je ne l'utilise pas dans mon métier). Par contre, j'essaye de me mettre maintenant au CSS et là, c'est une autre paire de bretelles Smiley murf
Bon j'ai retiré les sous menus pour éviter les pb sous IE
Modifié par CyberNord (24 Jan 2011 - 13:32)
Sujet clos
Aller à