Problème affichage menu horizontal sous IE

novice100 · 24/09/2011, 21h48

Bonjour à tous,
J'ai un problème avec mon menu déroulant qui est décalé sous IE6.
Pour info, il fonctionne avec tous les IE sauf IE6.
Je vous ai mis les parties importantes de mon code et le Javascript.

Quelqu'un pourrait-il m'aider ?

Code html :

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
<head>
<meta http-equiv="Content-Type" content="text/php; charset=utf-8" />
<style type="text/css"> @import url(/test.css);</style>
<title>index</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css"/>
   <![endif]-->
   <!--[if IE 6]>
<script type="text/javascript" src="menu1.js"></script> 
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ascenseur.js"></script>
</head>
<!-- menu haut de page -->
<div id="header">
<ul id="menu">
	<li><?php echo'<a href="index.php" ><b>ACCUEIL</b></a>'; ?></li>
	<li class="sub"><?php echo'<a class="sub" href="theme.php" ><b>THEME</b><!--[if gte IE 7]><!--></a><!--<![endif]-->'; ?>
<!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
</ul>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// JavaScript Document
sfhover = function() {
    var sfEls = document.getElementsByTagName("header");
    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);

gwinyam · 24/09/2011, 21h55

Alors d'abord, utilise la balise code, qu'on y voir clair. C'est la dièse dans la deuxième ligne des boutons de l'éditeur de messages. Édite ton message stp.

Et tant qu'à faire. Mets nous aussi ton CSS.

NoSmoking · 25/09/2011, 22h48

Bonjour,
- il faut un DOCTYPE,

- mettre les paramètres de page à 0

Code :

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

1
2
3
4
html, body{
  margin : 0:
  padding : 0;
}

et regarder ci cela n'arrange pas les choses

PS: honteuse copie de ce post http://www.developpez.net/forums/d11...x/#post6258445

novice100 · 27/09/2011, 21h01

Bonjour à tous,

Pour ce qui est du doctype, j'en ai déjà un.
Pour ce qui est de mettre margin et padding à 0, cela ne fonctionne pas.

Revoici mon code HTML et mon CSS :
Je pense que le problème vient de javascript, mais je ne maitrise pas ce language...

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
<!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="fr">
<meta http-equiv="Content-Language" content="fr" /><head>
<meta http-equiv="Content-Type" content="text/php; charset=utf-8" />
<style type="text/css"> @import url(/test.css);</style>
<title>index</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css"/>
   <![endif]-->
   <!--[if IE 6]>
<script type="text/javascript" src="menu1.js"></script> 
<![endif]-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ascenseur.js"></script>
</head>
<!-- menu haut de page -->
<div id="header">
<ul id="menu">
	<li><?php echo'<a href="index.php" ><b>ACCUEIL</b></a>'; ?></li>
	<li class="sub"><?php echo'<a class="sub" href="theme.php" ><b>THEME</b><!--[if gte IE 7]><!--></a><!--<![endif]-->'; ?>
<!--[if lte IE 6]><table><tr><td><![endif]-->
</li>
</ul>

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
body
{
	width: 1024px; /* résolution utilisée par 27% des Internautes*/
	height: 100%;
	margin: auto; /* Pour centrer #f3d8f3 notre page #5d0263*/
	padding: 0px;
	background-color:#DDD;/* #242424 bf86bf*/
}
#header {
	position: relative;
  	z-index: 100;
	width: 88%;
	float: left;
	height: 45px;
	border-right: 1px solid #6F9CCF;
	background-color: #FFF;
}
ul#menu {padding:0; list-style:none; text-align:center; margin:0 auto; font-size:13px; font-family:arial, sans-serif;  height:41px; width:814px; position:relative; float: left; left:0; top:0px;}
ul#menu ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px; font-size:13px;}
ul#menu table {border-collapse:collapse; font-size:13px; float:left; margin:-1px;}
 
ul#menu ul li {float:left; margin:0; text-align:left; width:140px; }
ul#menu ul li a {display:block; line-height:20px; margin:0; padding:0 10px; background:transparent; width:140px; font-size:11px;}
 
ul#menu li {display:inline; margin:0 -2px; text-align:left; }
ul#menu li a {display:inline-block; height:36px; margin:5px 0 0 0;padding:0 20px 0 0; background:url(button10.gif) right top; line-height:30px; text-decoration:none; color:#FFF; font-size:12px; }
ul#menu li a.sub {background:url(button10.gif) right top; }
 
html>/**/body ul#menu li {display:inline-block; padding:0;}
 
* html ul#menu li a.sub {margin-right:3px;}
* html ul#menu li a {margin-bottom:-4px;}
 
ul#menu li a b {display:block; height:36px; float:left; padding:0 0 0 20px; background:url(button10.gif) left top; cursor:pointer;}
 
ul#menu li a:hover {position:relative; background-position:right bottom; color:#036; z-index: 5;}
ul#menu li a:hover b {background-position:left bottom; z-index: 5;}
 
ul#menu li:hover {position:relative; z-index: 5;}
ul#menu li:hover > a {background-position:right bottom; color:#036; z-index: 5; text-decoration: underline;}
ul#menu li:hover > a b {background-position:left bottom; z-index: 5;}
 
ul#menu :hover ul {left:1px; width:150px; top:41px; }
* html ul#menu :hover ul {top:36px; }
 
ul#menu :hover ul li {display:block; float:left; margin:0; border-bottom:1px solid #fff;}
ul#menu :hover ul li a {display:block; float:left; margin:0; height:25px; line-height:25px; width:150px; background:#FCF; color:#036;}
ul#menu :hover ul li a.fly {background:#FFF url(arrow.gif) no-repeat right center;}
ul#menu :hover ul li a:hover {background:#cc99ff; color:#036;}
ul#menu :hover ul li:hover > a {background:#cc99ff; color:#036;}
 
ul#menu :hover ul li a.fly:hover {background:#cc99ff url(button2.gif) no-repeat right center;}
ul#menu :hover ul li:hover > a.fly {background:#c60 url(button2.gif) no-repeat right center;}
 
ul#menu :hover ul ul {left:-9999px;}
 
ul#menu :hover ul :hover ul {left:140px; top:0; width:150px;}
 
ul#menu :hover ul :hover ul li {display:block; float:left; margin:0; border-bottom:1px solid #fff;}
ul#menu :hover ul :hover ul li a {display:block; float:left; margin:0; height:25px; line-height:25px; background:#bbb; color:#036;}
ul#menu :hover ul :hover ul li a:hover {color:#036; background:#F9F;}

Candygirl · 28/09/2011, 08h57

Hello,

Une page en ligne pour pouvoir observer le problème serait plus simple.

Citation:

Envoyé par novice100

Code html :

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

1
2
3
4
5
6
7
 
<!--[if IE]>
   <link rel="stylesheet" type="text/css" href="ie.css"/>
   <![endif]-->
   <!--[if IE 6]>
<script type="text/javascript" src="menu1.js"></script> 
<![endif]-->

Quand tu dis que tu as donné ton javascript et css, cela inclu ceux pour IE ?
D'autre part tu devrais fournir le html généré plutôt que ton code PHP

24/09/2011, 21h55	#2
gwinyam Membre Expert Mathieu ROBIN Développeur Web Inscription : mai 2006 Messages : 1 116 Détails du profil Informations personnelles : Nom : Mathieu ROBIN Âge : 25 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Opérateur de télécommunications Informations forums : Inscription : mai 2006 Messages : 1 116 Points : 2 142 Points : 2 142	Alors d'abord, utilise la balise code, qu'on y voir clair. C'est la dièse dans la deuxième ligne des boutons de l'éditeur de messages. Édite ton message stp. Et tant qu'à faire. Mets nous aussi ton CSS. __________________ Mon blog techno et son billet hebdomadaire sur l'actualité jQuery. Et mon blog cuisine pour une personne. Le bouton ne masse pas les pieds, mais ça aide la communauté.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email