Problème Css menu adaptable sous IE6

**Necho** · 16/01/2009, 12h30

Bonjour à tous!

Je me permet de poster un message car j'ai un souci avec ie6 (étonnant non??!!). Je tiens aussi à dire que tout fonctionne sous ie7 et firefox....(normal pour le dernier

). Je vous explique mon problème tout en mettant des images.

J'ai un menu haut (en bleu) conçu avec des ul et li (et aussi un peu de javascript pour l'affichage) où la taille des cellules s'adapte avec la taille du texte. Voici un visuel en piece jointe (visu-1)

Le problème sous ie6 c'est que la taille des cellules ne s'adapte pas au texte et pren la totalité de l'espace réservé au menu. Voici un petit visuel (visu-2)

Pour finir voici le code pour ce menu dans le css

:

Code css :

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
#main #header #menu 
{
	float: left;
	width: 750px;
	height: 25px;
	clear: none;
	padding-top: 7px;
	padding-left: 9px;
}
 
#main #header #menu dl 
{
	position: relative;
	float: left;
	height: 24px;
	background-color: white;
	margin-right: 1px;
}
 
#main #header #menu dt a
{
	text-decoration: none;
	display: block;
	height: 23px;
	color: white;
	cursor: default;
	padding-left: 13px;
	padding-right: 13px;
	border-top: solid 1px white;
	border-left: solid 1px white;
	border-right: solid 1px white;
}
 
#main #header #menu dt.bouton
{
	background-image: url(../images/boutons/bgd_menu.jpg);
	background-repeat: repeat-x;
	height: 24px;
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	text-align: center;
	line-height: 17px;
}
 
#main #header #menu dt.bouton a:hover, #main #header #menu dt.bouton_hover a:focus
{
	background-image: url(../images/boutons/bgd_menu_hover.jpg);
	height: 23px;
	line-height: 11px;
}
 
#main #header #menu dd 
{
	border: none;
}
 
#main #header #menu ul 
{
	list-style-type: none;
	margin-top: 0;
	padding: 0px;
}

Pouvez vous me renseigner??

Merci bcp

**c_s_s** · 16/01/2009, 13h27

Bonjour,

Peux-tu également donner le code HTML ?

**Necho** · 16/01/2009, 14h07

oui le voila (j'utilise le framework symfony pour développer):

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
<!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="en" lang="en">
<head>
	<?php include_http_metas() ?>
	<?php include_metas() ?>
	<?php include_title() ?>
	<?php use_helper('I18N') ?>
	<link rel="shortcut icon" href="/favicon.ico" />	
</head>
 
<body>
	<div id="main">
		<div id="header">
			<div id="logo_app"></div>
			<div id="titre"></div>
			<div id="menu_haut">
				<div class="menu_haut_bg"></div>
				<div class="menu_haut_bd"></div>
			</div>
			<div id="menu_haut_app">
				<div class="menu_haut_bg"></div>
				<div class="menu_haut_bd"></div>
			</div>
			<div id="logo_soc"></div>
			<div id="menu" onmouseout="javascript:montre();">
				<dl>
					<dt class="bouton_langue">
						<?php if ('fr_FR' == $sf_user->getCulture()): ?>
						<?php echo link_to('&nbsp;', '@change_culture?culture=en_US', 'class=english', 'alt=English') ?>
						<?php endif; ?>
						<?php if ('en_US' == $sf_user->getCulture()): ?>
						<?php echo link_to('&nbsp;', '@change_culture?culture=fr_FR', 'class=french', 'alt=Francais') ?>
						<?php endif; ?>
					</dt>
				</dl>
				<dl>
					<dt class="bouton" onmouseover="javascript:montre('smenu1');"><?php echo link_to(__('Stock'), 'post/list') ?></dt>
					<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
						<ul>
						</ul>
					</dd>
				</dl>
				<dl>
					<dt class="bouton" onmouseover="javascript:montre('smenu2');"><?php echo link_to(__('Articles'), 'post/list') ?></dt>
					<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
						<ul>
						</ul>
					</dd>
				</dl>
				<dl>
					<dt class="bouton" onmouseover="javascript:montre('smenu3');"><?php echo link_to(__('Solutions'), 'post/list') ?></dt>
					<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
						<ul>
						</ul>
					</dd>
				</dl>
				<dl>
					<dt class="bouton" onmouseover="javascript:montre('smenu4');"><?php echo link_to(__('Consommables'), 'post/list') ?></dt>
					<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
						<ul>
						</ul>
					</dd>
				</dl>
				<dl>
					<dt class="bouton" onmouseover="javascript:montre('smenu5');"><?php echo link_to(__('Approvisionnement'), 'post/list') ?></dt>
					<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();">
						<ul>
						</ul>
					</dd>
				</dl>
				<dl>
					<dt class="bouton" onmouseover="javascript:montre('smenu6');"><?php echo link_to(__('Environnement'), 'post/list') ?></dt>
					<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
						<ul>
						</ul>
					</dd>
				</dl>
			</div>
		</div>
 
		<div id="cadre">
		    <div id="contenu"><?php echo $sf_data->getRaw('sf_content') ?>
		    <div class="cadre_footer"></div>
		</div>
	</div>
</body>
</html>

**c_s_s** · 16/01/2009, 14h17

Il faudrait plutôt le code HTML généré.

Là il n'y a pas de contenu, je ne peux pas tester.

**Necho** · 16/01/2009, 14h18

je copie la source du code?

**Macmillenium** · 16/01/2009, 14h20

Bonjour,

Essai en ajoutant :

Code CSS :

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

1
2
 
#menu dt { float:left; }

Dans ton fichier CSS

**Necho** · 16/01/2009, 14h33

Voici un rar avec tt ce qui faut ta juste à le dézipper et ca fonctionne pour que tu testes

**Necho** · 16/01/2009, 14h36

toujours pareil meme avec le float: left

**Macmillenium** · 16/01/2009, 14h52

Attention dans ton code html la 1ere balise dt n'est pas fermé.
Sinon comme je l'ai dit il faut ajouter :

Code :

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

1
2
 
#main #header #menu dt { float:left; }

Et remplacer display:block par float:left; pour tes a :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#main #header #menu dt a
{
	text-decoration: none;
	float:left;
	height: 23px;
	color: white;
	cursor: default;
	padding-left: 13px;
	padding-right: 13px;
	border-top: solid 1px white;
	border-left: solid 1px white;
	border-right: solid 1px white;
}

Pourquoi autant d'héritage sans aucun intérêt? Les id sont uniques
Il faut que tu fasse un peu le ménage dans ton code html/css ...

EDIT :
Au passage, voici comment utiliser une liste de définition :

Code xhtml :

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

1
2
3
4
5
6
7
8
9
10
 
<dl>
	 <dt>Titre</dt>
		<dd>
			<ul>
				<li>Liste</li>
				<li>Liste</li>
			</ul>
		</dd>
</dl>

Problème Css menu adaptable sous IE6

CSS

Vue hybride

Discussions similaires

Partager

Partager