Probleme CSS navigateur

**jeremdu54** · 08/09/2012, 13h14

Bonjour a tous, voila j'ai créer un site web avec un menu horizontal et vertical.sur firefox j'ai aucun souci il m'affiche bien le contenu.Mais sur IE il ne m'affiche presque plus rien a pars des carré vide et plus encore il n'a plus les bonne dimensions pour les mixe selon le navigateur.
voila mon code menu.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<li><a href='games.php'><span>Acces Jeux</span></a></li>
				   <li class='has-sub '><a href='Compte.php'><span>Mon Compte</span></a>
					  <ul>
						 <li><a href='see_compte.php'><span>Recapitulatif compte</span></a></li>
						 <li><a href='edit_infos.php'><span>modifier mon compte</span></a></li>
					  </ul>
				   </li>
					<li class='has-sub '><a href='edit_infos.php'><span>Mes Mail</span></a>
					<ul>
					  <?php
					  $req='SELECT COUNT(*) as nb_messnonlu FROM messages WHERE id_destinataire="'.$_SESSION['userid'].'" AND messages.lu=0';
								 $result = mysql_query($req);  
								 $donnee3 = mysql_fetch_row($result); 
								if ($donnee3==0){
								?>
								<li><a href='message.php'><span>Voir mes mail(0)</span></a></li>
						  <?php 
								 }
								 else{
								?>
								<li><a href='message.php'><span>Voir mes mail(<?php echo $donnee3[0];?>)</span></a></li>
								<?php
								}
								?>
					<li><a href='Creer_message.php'><span>Ecrire un message</span></a></li>
					</ul>
				</li>
				<li class='has-sub '><a href='edit_infos.php'><span>Mes Amis</span></a>
					<ul>
					<li><a href="add_amis.php"><span>Ajouter un Ami</span></a></li>
					<li><a href='see_amis.php'><span>Voir mes amis</span></a></li>
					<li><a href='attente.php'><span>Demande en attentes</span></a></li>		 
					</ul>
				 </li>
   <?php
   if(($_SESSION['statut'])== "4" || ($_SESSION['statut'])== "3")
					{
				 ?>
					<li><a href="Admin.php"> Console d'Administration </a></li>
				<?php
					}
	?>
   <li><a href="connexion.php">Se d&eacute;connecter</a></li>
   </ul>
<?php
}
else{
?>
<ul>
<li><a href="connexion.php">Connexion</a></li>
<li><a href="sign_up.php">inscription</a></li>
</ul>
<?php
}
include('Colg.php');
?>
<div id="statistique">
			<div id="design_colonnegauche2">
				<h2><u>Statistiques</h2></u>
					<?php
					if(isset($_SESSION['username']))
					{
						$dnns = mysql_fetch_array(mysql_query('select count(pseudo) as nb from cpt_connectes where pseudo="'.$_SESSION['username'].'"'));
						if($dnns['nb']>0)
						{
								mysql_query('update cpt_connectes set timestamp="'.time().'" where pseudo="'.$_SESSION['username'].'"');
						}
						else
						{
								mysql_query('insert into cpt_connectes (pseudo, timestamp) values ("'.$_SESSION['username'].'", "'.time().'")');
						}
					}

ceci est bien entendu une partie du code.
voici style.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body{ background:#6A6671; }
#cssmenu{ height:37px; display:block; padding:0; margin-left:170px; margin-right:178px;  border:1px solid; border-radius:5px;  } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative; background:#980000;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#980000; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#980000; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#980000; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } 
#cssmenu{border-color:#000;} 
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#444;} 
#cssmenu > ul > li > a:hover{background:#111;}
#menu5 { text-align:center; background:#A8A7A9; width:17%; margin-top:50px; margin-bottom: 20px; padding-left:-50px; border: 2px solid #003300; float:left; min-height:400px; font-size:15px; }
#menu5 li a { height: 45px; voice-family: "\"}\""; voice-family: inherit; font:bold 15px/100% Arial, Helvetica, sans-serif; height: 45px; text-decoration: none; text-align:center;}	
#menu5 li a:link, #menu5 li a:visited {color: #FFF; display: block; background:#A8A7A9; padding: 8px 0 0 10px;}	
#menu5 li a:hover {color: #FFF; background#A8A7A9 0 -32px; padding: 8px 0 0 10px;}
#menu5 ul {list-style: none; margin: 0; padding: 0;}
#map { background-color:#A8A7A9; margin-left: 200px; margin-bottom:10px; margin-right:0; margin-top:85px; padding:5px; width:660px; border: 2px solid #003300; min-height:50px; font-size:15px; }
#statistique{ text-align:center; background:#A8A7A9; width:13.5%; margin-top:50px; margin-bottom:10px; margin-right:-55px; padding:0; border: 2px solid #003300; float:right; font-size:15px;}

Bien entendu je seche sur les possiblité.J'ai essayé tout ce dont j'ai connaissance mais rien.pouvez vous me guider?
Je vous remercie d'avance

**miss_socrates** · 16/09/2012, 11h40

Le code n'est peut-être pas complet et n'est pas toujours bien indenté mais il me semble que les ul et les li ne sont pas tous bien ouverts ou fermés.
En fait les <ul> doivent englober les <li>, les <ul> indiquant le début de listes à puces et les <li> les items (objets mis en liste).
Il faut fermer les </li> avant de fermer les </ul> ce qui n'est pas toujours le cas (par ex. lignes 25-26 et 27-29 du html; à la ligne 1, il manque un <ul> et ligne 8, le <ul> n'est pas fermé). Il faut un <ul> pour chaque liste <li>.
Selon le modèle:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div>
  <ul>
     <li></li>
     <li></li>...
  </ul>
  <ul>
     <li></li>
     <li></li>...
   </ul>
</div>

Et en les intégrant dans des div, cela évite que ces menus "se balladent".
Quant au css, difficile de se prononcer vu l'absence des ID dans le code fourni.

**Muchos** · 16/09/2012, 17h42

+1 avec miss_socrates

Et puis, quel DOCTYPE ? Quelle version de IE et Firefox ? …

Probleme CSS navigateur

CSS

Vue hybride

Discussions similaires

Partager

Partager