J'ai un probleme sans doute tout bete (?)
Voici la page telle qu'elle devrait s'afficher :
C'est bon dans IE...
Mais dans Mozilla voici ce que je vois :
Les sous-menus sont pas au bon endroit et le filet qui sépare le contenu du pied de page disparait !
Voici le code de l'affaire :
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Transmanager</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
#bandeau {
float:left;
width:100%;
background-color: #FFFFFF;
background-image: url("");
background-repeat: no-repeat;
background-position: left top;
}
div#horizontal_sousmenu
{
height:25px;
background-color:#CCC;
}
body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.em Verdana, Arial, Helvetica, sans-serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}
#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left_both.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #999999;
font-size: 12px;
}
#header a {
float:left;
display:block;
background:url("right_both.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:500;
color:#000000;
font-size: 14px;
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover
{
color:#FF0000;
}
#header #current {
background-position:0 -150px;
border-width:0;
}
#header #current a {
background-position:100% -150px;
padding-bottom:5px;
color:#333;
}
#header li:hover, #header li:hover a {
background-position:0% -150px;
color:#333;
}
#header li:hover a {
background-position:100% -150px;
}
/* Partie réservée au sous menu horizontal */
div#horizontal_sousmenu ul
{list-style-type:none;
background-color:#DAA;
height:25px;
overflow:hidden;
margin:0;
padding:0;
}
div#horizontal_sousmenu ul li
{display: inline; /* en ligne et cote a cote */
line-height:25px;
vertical-align:middle;
}
div#horizontal_sousmenu ul li a
{text-decoration:none;
display:inline-block;
height:25px;
}
div#horizontal_sousmenu ul li a:hover
{background-color:black;
color:white;
}
/* Partie réservée au footer */
div#footer
{
height:40px;
border-top:1px solid black;
background-color:#EEE;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Submit...</a></li>
<li><a href="#">Manager status</a></li>
<li><a href="#">Flow configurations</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Administration</a></li>
</ul>
</div>
<div id="horizontal_sousmenu">
<ul title="Menu de navigation globale">
<li><a href="#" title="Retour à la page d'accueil">Home</a></li>
<li><a href="#" title="Accès aux actualités">Actualité</a></li>
<li><a href="#" title="Comment nous contacter">Contact</a></li>
<li><a href="#" title="Comment utiliser notre site">Aide</a></li>
</ul>
</div> <!-- Fin du sous menu horizontal -->
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse fermentum massa. Pellentesque elit lacus, pulvinar non, vehicula id, imperdiet id, purus. Praesent sit amet sem eu libero lobortis mollis. Proin pellentesque, nisl nec porttitor eleifend, metus nisi gravida mauris, ac pulvinar eros nisi eu nulla. Curabitur felis augue, fringilla vitae, cursus eu, blandit at, ligula. Maecenas accumsan tortor sed mi. Cras ac tortor. Nulla nec libero. Vestibulum dignissim, purus et suscipit congue, nibh nisl sagittis lorem, a auctor diam turpis in nisl. Quisque ullamcorper semper lacus. In quam ipsum, euismod non, fringilla in, elementum fermentum, sapien. Cras posuere velit vel eros. Nulla facilisi.
</p>
</div>
<!-- Pied de page -->
<div id="footer">
Ceci est le pied de page
</div> <!-- Pied de page -->
</body>
</html>
...