Affichage sous IE Menu haut

**Shivas** · 17/02/2012, 15h24

Bonjour,

J'ai un problème d'affichage sur IE6 concernant la dimension de mon menu haut. Il est redimensionné par rapport à Mozilla.

Menu haut

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" />
	<head>
 
<script language="javascript" type="text/javascript">
        function verif() {
        
        if (document.forms["recherche"].elements["mot"].value != "")    {
                return true;
                }
                else{
        alert ('Veuillez saisir une recette ou un ingredient');
                
        return false;   
        }
        
        }
                </script>		
 
 
 
			<script language="javascript">
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>
 
 
 
 
?>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta name="language" content="fr" />
 
 
		<link rel="stylesheet" title="Design" href="../monstyle4.css" type="text/css" media="screen" />
 
 
 
	</head>
 
	<body>
 
 
		<div id="banniere">
			<a href="<?php echo ROOTPATH;?>/index.php"></a>
		</div>
 
 
 
 
		<ul id="nav">		
		<!--<p style="margin-left:-150px">-->
			<li><a href="<?php echo ROOTPATH;?>/index.php">Accueil</a></li>
			<li><a href="<?php echo ROOTPATH;?>/index.php">Les recettes</a>
				<ul class="nav">
					<li class="sousmenu"><a href="<?php echo ROOTPATH;?>/RECETTES/entree.php">Entree</a></li>
					<li class="sousmenu"><a href="<?php echo ROOTPATH;?>/RECETTES/plat.php">Plat</a></li>
					<li class="sousmenu"><a href="<?php echo ROOTPATH;?>/RECETTES/dessert.php">Dessert</a></li>
				</ul>
			</li>	
			<li><a href="<?php echo ROOTPATH;?>/advance_search.php">Recherche avancee</a></li>
 
			<li><a href="<?php echo ROOTPATH;?>/recettes/ajouter.php">Ajouter votre recette</a></li>
 
			<li><a href="#">Dossier</a>
				<ul class="nav">
					<li class="sousmenu"><a href="<?php echo ROOTPATH;?>/DOSSIER/astuces.php">Astuces</a></li>
					<li class="sousmenu"><a href="<?php echo ROOTPATH;?>/DOSSIER/presentation_dossier.php">Thèmes</a></li>
				</ul>
			</li>
			<li><a href="<?php echo ROOTPATH; ?>/membres/connexion.php"> Espace perso</a></li>
 
		</ul>
 
 
 
</body>

Page principale

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
73
74
75
76
77
78
79
80
81
82
 
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" src="scroll.js"></script>
<script language="JavaScript" type="text/javascript">
 
var coeff=4;//Coefficient de reduction
var larg=400;//largeur maxi de l'image
var haut=388;//hauteur maxi de l'image
var coeffinit=coeff;
 
function Init()
   {
   MyBox = new Box('MyBox', 'conteneur', 1, 100, 2000, 10);
   MyBox.start();
 }
 
</script>
 
 
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/easySlider.js"></script>
 
 
 
<script language="JavaScript">
$(document).ready(function(){ 
 
	$("#slider").easySlider({
 
		auto:		true,
		continuous: true,
		prevId1: 'prev1',
		nextId1: 'next1',
		prevText1:'Precedent',
		nextText1:'Suivant'
 
 
	});
 
 
	$("#slider_mieux_notes, ").easySlider1({
		auto:		true,
		continuous: true,
		prevId2: 'prev2',
		nextId2: 'next2',
		prevText2: '<img src=images/PRECEDENT.jpg border=0 hspace=0 vspace=0>',
		nextText2:'<img src=images/SUIVANT.jpg border=0 hspace=0 vspace=0 position=absolute>'
 
 
	});
 
 
	$("#slider_plus_vues, ").easySlider2({
		auto:		true,
		continuous: true,
		prevId3: 'prev3',
		nextId3: 'next3',
		prevText3: '<img src=images/PRECEDENT.jpg border=0 hspace=0 vspace=0>',
		nextText3:'<img src=images/SUIVANT.jpg border=0 hspace=0 vspace=0>'
 
	});
 
});
 
 
</script>
 
 
</head>
 
<BODY onload="Init();">
 
 
<?php 
include_once('includes/haut.php'); 
.
.
.
</body>

monstyle4.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
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
73
 
 
/*Contenu du sous-menu*/
#nav.sousMenu
{
list-style-type: none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
padding: 0; /* aucune marge intérieure */
border: 0;
display:block; /* on change le type d'élément, les liens deviennent des balises de type block */
width:120px; /* largeur */
}
 
 
#nav li a {
	background-color : #606766; /*couleur cadre haut#009900*/
	color: #FFFFFF ; /*Couleur texte menu*/
	border: 1px solid #FFFFFF ;
	/*font: 1em "Trebuchet MS",Arial,sans-serif ; MODIFIE LA POLICE DU MENU HAUT*/
	/*line-height: 2em ;*/
	padding: 0;
	text-align: center ;
	text-decoration: none ;
 
	/*border-top: 1px solid #fff;*/
		}
 
/* Lorsque la souris passe sur un des liens */    		
#nav li a:hover {
	background: #96CA2D no-repeat 0;
	text-decoration: underline ;
 
 
				} 
 
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto;  /*Repositionnement normal */
		right: 130px; /*modification pour affichage IE 6*/
        min-height: 0; /* Corrige un bug sous IE */
}
 
 
 
/* Elements des listes */      
#nav li 
{
float: left;/* pour IE qui ne reconnaît pas "transparent" */
width: 150px; /* ATTENTION MODIFIE POUR IE6 150PX DEFAUT 160PX*/
border: 0;
list-style-type:none;
position:relative;
 
} 
 
/*POSITIONNEMENT*/
#nav li a:link, #nav li a:visited
{
display: block;
/*height: 1%;*/
margin: 0;
padding: 1px 6px; /*bloc menu*/
border-right: 1px solid #fff;
text-decoration: none;
}
 
/* Sous-listes */
#nav li ul{
position: absolute;
margin-top:-1px;
width: 10em;
left: -999em;
border-top: 1px solid #fff;
}

L'orsque je déclare mon include avant le head ça fonctionne mais sur mozilla le défilement ne fonctionne plus.

Merci.

**Shivas** · 20/02/2012, 09h38

Le soucis provient tout simplement du doctype qui n'était pas déclaré dans ma page index

Affichage sous IE Menu haut

HTML

Vue hybride

Discussions similaires

Partager

Partager