Menu horizontal s'affiche verticalement dans une jsp

**honey0** · 25/04/2012, 12h15

Bonjour.

J'ai fait un menu horizontal dans une jsp, et sous IE6 et FF ça s'affiche bien. Mais sous IE8, le menu s'affiche verticalement.

Code du menu:

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
 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ taglib uri="/ng-tags" prefix="ng"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/ng.css" rel="STYLESHEET" type="text/css" />
</head>
 
<body>
 
 
	<div id="container_tab">
		<ul id="tabs">
			<li id="welcomeTab" class="tabs"><a id="welcomeLink" class="tabLink" href="/welcome.htm">Welcome</a></li>
			<ng:actionPermission action="Search">
				<li id="searchTab" class="tabs"><a id="searchLink" class="tabLink" href="/search.htm">Search </a></li>
			</ng:actionPermission>
			<ng:actionPermission action="Create">
			<li id="formTab" class="tabs"><a id="formLink" class="tabLink" href="/keym.htm">Key</a></li>
			</ng:actionPermission>
			<ng:actionPermission action="Report">
				<li id="reportTab" class="tabs"><a id="reportLink" class="tabLink" href="/report.htm">Report</a></li>
			</ng:actionPermission>
			<ng:actionPermission action="Lists">
				<li id="listTab" class="tabs"><a id="listLink" class="tabLink" href="/list.htm">List</a></li>
			</ng:actionPermission>
			<ng:actionPermission action="Manage">
				<li id="permissionTab" class="tabs"><a id="permissionLink" class="tabLink" href="/pemission.htm">Permission</a></li>
			</netting:actionPermission>
		</ul>
	</div>
 
</body>
</html>

Et le 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
 
 
#container_tab #tabs {
	margin-left: 20px;
}
 
#container_tab  #tabs li {
	display: inline-block;
	margin-left: 0;
	margin-right: -4px;
}
 
#container_tab  #tabs li a {
	display: block;
	background: url(../images/onglet_onmouseout_resize.png);
	width: 165px;
	height: 15px;
	padding-top: 10px;
	text-align: center;
	text-decoration: none;
}
 
#container_tab  #tabs li a:hover, #container_tab  #tabs li .activeTab {
	display: block;
	background: url(../images/onglet_onmouseover_resize.png);
}
 
#container_tab  #tabs li .inactiveTab {
	display: block;
	background: url(../images/onglet_desactivate_resize.png);
}

Je ne sais pas d'où vient le problème.

Merci d'avance!!!

**Kaamo** · 25/04/2012, 12h39

hum, normalement c'est censé marcher sous IE8.
Cela s'affiche horizontalement grâce à display:inline-block. Et c'est supporté à partir de IE8. Au contraire, avant IE8 (et même pour FF2-), il faut un peu tricher.

Ajoute cela :

Code css :

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

1
2
3
4
5
6
7
8
#container_tab  #tabs li {
  display: inline-block;
  margin-left: 0;
  margin-right: -4px;
  display: -moz-inline-stack; /* compatibilité FF2- */
  *display: inline; /* compatibilité IE7- */
  zoom:1; /* compatibilité IE7- */
}