Problème Css menu adaptable sous IE6

Version imprimable

2 pièce(s) jointe(s)

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:

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

16/01/2009, 13h27
c_s_s

Bonjour,

Peux-tu également donner le code HTML ?

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

Code:

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>

16/01/2009, 14h17
c_s_s

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

Là il n'y a pas de contenu, je ne peux pas tester. ;)
16/01/2009, 14h18
Necho

je copie la source du code?
16/01/2009, 14h20
Macmillenium
Bonjour,

Essai en ajoutant :
Code:

1 2 #menu dt { float:left; }
Dans ton fichier CSS
16/01/2009, 14h33
Necho

1 pièce(s) jointe(s)

Voici un rar avec tt ce qui faut ta juste à le dézipper et ca fonctionne pour que tu testes
16/01/2009, 14h36
Necho

toujours pareil meme avec le float: left

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

1 2 #main #header #menu dt { float:left; }
Et remplacer display:block par float:left; pour tes a :
Code:

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:

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>