Problème de menus sous firefox et Opéra

Question

G@NON

7 Oct 2005 à 09:56

Salut à tous !

je me suis apreçu d'un petit problème avec mon site....il s'affiche mal sous FF et Opera (rien que ça !!!) Comme ces deux naviguateur deviennet populairs il est temps que mon site fonctionne en leur compannie.

mon site c'est http://www.seigneurs.tk

Mon problème s'illustre tres bien en image
la c'est normal (sous IE): Smiley biggrin

http://img155.imageshack.us/img155/2422/ie4ma.jpg

la ça commence à ne pas aller (opéra) Smiley sweatdrop

http://img155.imageshack.us/img155/7997/opera1dx.jpg
(le dégrader du menue à disparu et il y a un léger bug bleu foncé en haut du menu)

et la ça bug total (firefox) Smiley biggol

http://img266.imageshack.us/img266/4563/firefox6xn.jpg

pour info voici le code source de ma page :

<? //Warcraftnet Version 3.02 PHP - 2004/2005 G@NON INC ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>Warcraftnet Version 3</title>
	<link rel="stylesheet" media="screen" type="text/css" title="Design Warcraftnet 3.b" href="warcraftnet.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"/>
</head>

<body>

<h1 id="header">
	Warcraft NET
</h1>
<div id="sousheader">
  
  <!-- Sous header , bouton en flash -->
  
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="22">
      <param name="BGCOLOR" value="">
      <param name="movie" value="button1.swf">
      <param name="quality" value="high">
      <embed src="button1.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="22">
      <param name="BGCOLOR" value="">
      <param name="movie" value="button2.swf">
      <param name="quality" value="high">
      <embed src="button2.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="22">
      <param name="BGCOLOR" value="">
      <param name="movie" value="button3.swf">
      <param name="quality" value="high">
      <embed src="button3.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="22">
      <param name="BGCOLOR" value="">
      <param name="movie" value="button4.swf">
      <param name="quality" value="high">
      <embed src="button4.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="22">
      <param name="BGCOLOR" value="">
      <param name="movie" value="button5.swf">
      <param name="quality" value="high">
      <embed src="button5.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="22">
      <param name="BGCOLOR" value="">
      <param name="movie" value="button6.swf">
      <param name="quality" value="high">
      <embed src="button6.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" ></embed>
    </object>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="22">
      <param name="BGCOLOR" value="">
      <param name="movie" value="button7.swf">
      <param name="quality" value="high">
      <embed src="button7.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" ></embed>
    </object>
</div>

<!-- Fin du sous header en flash -->

<!-- Bloque container -->
<div id="container">	
	<div id="menu">
	  <ul id="menuconteneur">
               <p class="Style29">....::::Guilde::::....</p>
	        <li class="Style10"><a href="index.php?page=charte">Charte</a></li>			
			<li class="Style10"><a href="index.php?page=membres">Membres</a></li>			
			<li class="Style10"><a href="index.php?page=inscription">Inscriptions</a></li>
			<li class="Style10"><a href="index.php?page=screen">Screenshots</a></li>
		    <li class="Style10"><a href="http://www.wow-europe.com/account/">Gestion du compte</a></li>
				        <br />
	          <p class="Style17">...:::Warcraftnet:::...</p>
			  <br />
	        <li class="Style10"><a href="index.php?page=archives">Archives News</a></li>
			<li class="Style10"><a href="index.php?page=videos">Videos</a></li>
			<li class="Style10"><a href="index.php?page=download">Downloads</a></li>
			<li class="Style10"><a href="index.php?page=wallpapers">Wallpapers</a></li>
			<li class="Style10"><a href="index.php?page=goodies">Goodies</a></li>
	        <li class="Style10"><a href="ganoninc.php?user=warcraftnet">G@NON INC </a></li>
			<li class="Style10"><a href="index.php?page=guest">Livre d'or</a></li>
			<li class="Style10"><a href="index.php?page=google">Rechercher</a></li>
			<li class="Style10"><a href="index.php?page=partenaires">Partenaires</a></li>
	        <li class="Style10"><a href="index.php?page=contacts">Contacts</a></li>
	        <li class="Style10"><a href="index.php?page=about">A propos de... </a></li>
		    <br />
		      <p class="Style17">....::::Forum::::....</p>
			  <br />
	        <li class="Style10"><a href="http://romain.giovanetti.free.fr/phpBB2/login.php">Connexion</a></li>
	        <li class="Style10"><a href="http://romain.giovanetti.free.fr/phpBB2/profile.php?mode=register">Inscriptions</a></li>
	        <li class="Style10"><a href="http://romain.giovanetti.free.fr/phpBB2/memberlist.php">Membres></a></li>
	        <li class="Style10"><a href="http://romain.giovanetti.free.fr/phpBB2/profile.php?mode=editprofile">Votre Profil</a></li>
	        <li class="Style10"><a href="http://romain.giovanetti.free.fr/phpBB2/privmsg.php?folder=inbox">Vos MP </a></li>
	        <li class="Style10"><a href="http://romain.giovanetti.free.fr/phpBB2/search.php">Rechercher</a></li>
	        <li class="Style10"><a href="http://romain.giovanetti.free.fr/phpBB2/faq.php">FAQ</a></li>
	        <li class="Style10"><a href="index.php?page=phpbb2">Notification</a></li>

            <br />
	          <p class="Style17">...:::Liens:::...</p>
			  <br />
		    <li class="Style10"><a href="http://www.blizzard.fr">Blizzard.fr</a></li>
		    <li class="Style10"><a href="https://www.wow-europe.com/">WoW-europe.com</a></li>
		    <li class="Style10"><a href="http://www.judgehype.com/">JudgeHype></a></li>
		    <li class="Style10"><a href="http://www.battle.net/">Battle.net</a></li>
			<li class="Style10"><a href="http://remisoft.ath.cx/">Rémisoft Interact.</a></li>
			<li class="Style10"><a href="http://jicxs.free.fr/">Jicxs</a></li>
		    <li class="Style10"><a href="index.php?page=contacts">Votre lien ici ? </a></li>
      </ul>
  </div>
  	<div id="contenu">
	
		<?php 
if(empty($_GET['page'])) /* pas de nom de page, le visiteur est sur la page d'accueil */ 
{ 
include('index2.php'); 
} 
else //la page a été definie dans l'url 
{ 
if(file_exists($_GET['page'].'.php')) /*Vérification de l'existance de la page*/ 
{ 
//comme oui, on l'inclut: 
include($_GET['page'].'.php'); 
} 
else //si elle existe pas: 
{ 
include('404.php'); //page non trouvée erreur 404
} 
}
?>

  	</div>
</div>
<div class="Style13" id="footer">2004 - 2005 &copy; <a href="ganoninc.php?user=warcraftnet">G@NON INC</a> et <a href="http://www.blizzard.fr">Blizzard</a> , Pour les droits d'auteurs voir <a href="index.php?page=about">A propos de... </a></div>
</body>
</html>

et voici le petit CSS (hou le vilain !!!!!)

/*2004-2005 G@NON INC - Warcraftnet CSS Version 1.02*/
/*Document type : CSS , Nom du fichier warcraftnet.css

/*Définition des Styles*/

    .Style9 {font-size: small}
/* liens des menus*/
    .Style10 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: small; font-weight: bold;
 }
    .Style13 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: small;
}
/*Titre des menus*/
    .Style17 {color: #666666; text-align: center; font-weight: bold; font-size: medium; }
	
/*Propriétées des liens*/
    a:link {
	color: #5972A8;
	text-decoration: underline;
}
    a:visited {
	text-decoration: underline;
	color: #999999;
}
    a:hover {
	text-decoration: none;
	color: #A4B3D2;
}
    a:active {
	text-decoration: underline;
	color: #B2C1E2;
}
    a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
    body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
    .Style27 {
	font-size: large;
	color: #5972A8;
}
/*Style du titre menu Guilde*/
    .Style29 {color: #999999; text-align: center; font-weight: bold; font-size: medium; }
	
/*Style du corp de la page (body)*/
html, body  {
	margin:0;
	padding:0;
	height:100%;
}

#header, #sousheader, #container, #footer{
	width:838px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	text-align: left;
	margin:0 auto;
}

#header{
	border-top:1px solid black;
	height:210px;
	background: url(images/header.jpg);
	text-indent: -5000px;
	overflow: hidden;
}

#sousheader{
	height:30px;
	background: url(images/sousheader.gif);
	border-bottom: 2px solid black;
	text-align: center;

}
#container{ 
    height: 100%; 
    display: table; 
    position:relative; 
    _background:url(images/fond_menu.jpg) repeat-y left; 
}
#menu{  
    width:200px;  
    border-right:1px solid black;  
    border-collapse: collapse;  
    _float:left;  
    background-color : #A4B3D2;  
    text-align: center;  
    height:100%;  
	display: table-row;
    vertical-align: top; // alignement vertical du contenu en haut de la cellule 
    background:url(images/fond_menu.jpg) repeat-y left;  
}

UL#menuconteneur {
	padding:10px 0 0 0;
	text-align: left;
	width:150px;
	border-left: 1px solid black;
	border-right:1px solid black;
	margin:0 auto;
	background: #B2C1E2 url(images/menubg.jpg) repeat-x top;
	height: 100%;
	list-style: none;
}
UL#menuconteneur LI{
	height:20px;
}
UL#menuconteneur LI A{
	color:black;
	text-decoration: none;
	vertical-align: middle;
	display: block;
	height:100%;
	padding-left:25px;
}

UL#menuconteneur LI A:hover{
	background-color: #A4B3D2;
}

#contenu{
	_margin-left:200px;
	height:100%;
	display: table-cell;
}

#footer{
	border-top:1px solid black;
	border-bottom: 1px solid black;
	background: url(images/sousheader.gif); 
	height:24px;
	line-height: 24px;
	vertical-align: middle;
	text-align:center;
}

J'espere que vous me viendrez en aide dans son monde sombre et complexe qu'est le web Smiley biggrin

Modifié par G@NON (07 Oct 2005 - 09:56)

Macpom

7 Oct 2005 à 10:33

Bonjour,
supprime les "_" devant background ou margin : ce signe à pour effet de n'avoir une application que pour iE et non les autres... donc background et positionnements ne sont pas pris en compte par les autres navigateurs.

G@NON

7 Oct 2005 à 10:45

bon voila le CSS corrigé

/*2004-2005 G@NON INC - Warcraftnet CSS Version 1.02*/
/*Document type : CSS , Nom du fichier warcraftnet.css

/*Définition des Styles*/

    .Style9 {font-size: small}
/* liens des menus*/
    .Style10 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: small; font-weight: bold;
 }
    .Style13 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: small;
}
/*Titre des menus*/
    .Style17 {color: #666666; text-align: center; font-weight: bold; font-size: medium; }
	
/*Propriétées des liens*/
    a:link {
	color: #5972A8;
	text-decoration: underline;
}
    a:visited {
	text-decoration: underline;
	color: #999999;
}
    a:hover {
	text-decoration: none;
	color: #A4B3D2;
}
    a:active {
	text-decoration: underline;
	color: #B2C1E2;
}
    a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
    body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
    .Style27 {
	font-size: large;
	color: #5972A8;
}
/*Style du titre menu Guilde*/
    .Style29 {color: #999999; text-align: center; font-weight: bold; font-size: medium; }
	
/*Style du corp de la page (body)*/
html, body  {
	margin:0;
	padding:0;
	height:100%;
}

#header, #sousheader, #container, #footer{
	width:838px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	text-align: left;
	margin:0 auto;
}

#header{
	border-top:1px solid black;
	height:210px;
	background: url(images/header.jpg);
	text-indent: -5000px;
	overflow: hidden;
}

#sousheader{
	height:30px;
	background: url(images/sousheader.gif);
	border-bottom: 2px solid black;
	text-align: center;

}
#container{ 
    height: 100%; 
    display: table; 
    position:relative; 
    background:url(images/fond_menu.jpg) repeat-y left; 
}
#menu{  
    width:200px;  
    border-right:1px solid black;  
    border-collapse: collapse;  
    float:left;  
    background-color : #A4B3D2;  
    text-align: center;  
    height:100%;  
	display: table-row;
    vertical-align: top; // alignement vertical du contenu en haut de la cellule 
    background:url(images/fond_menu.jpg) repeat-y left;  
}

UL#menuconteneur {
	padding:10px 0 0 0;
	text-align: left;
	width:150px;
	border-left: 1px solid black;
	border-right:1px solid black;
	margin:0 auto;
	background: #B2C1E2 url(images/menubg.jpg) repeat-x top;
	height: 100%;
	list-style: none;
}
UL#menuconteneur LI{
	height:20px;
}
UL#menuconteneur LI A{
	color:black;
	text-decoration: none;
	vertical-align: middle;
	display: block;
	height:100%;
	padding-left:25px;
}

UL#menuconteneur LI A:hover{
	background-color: #A4B3D2;
}

#contenu{
	margin-left:200px;
	height:100%;
	display: table-cell;
}

#footer{
	border-top:1px solid black;
	border-bottom: 1px solid black;
	background: url(images/sousheader.gif); 
	height:24px;
	line-height: 24px;
	vertical-align: middle;
	text-align:center;
}

y a un bug qui est éllimé (celui des menu en pleins centre de la page sous FF) mais il en a ammené un autre....
Soit le contenue du menu descend ....sois c'est le contenu qui descend

enfin c'est dur à expliquer le mieux c'est de tester par sois meme
http://www.seigneurs.tk

Merci comme meme pour ta brillante idée

Laurent Denis

7 Oct 2005 à 12:04

Bonjour,

Avant d'aller plus loin ou d'attendre d'autres réponses :
- valider la source HTML (elle est invalide, et n'a donc aucun intérêt tant qu'elle n'est pas corrigée : c'est une source d'erreurs potentielles que tu peux déjà traiter)
- ne pas développer une css en fonction du rendu dans IE (son approche de CSS est intéressante, mais radicalement étrangère au comportement des navigateurs Web). Faire l'inverse : développer pour un des navigateurs conformes, et adapter ensuite à IE Windows. Autre source d'erreur que tu peux traiter avant de soumettre un problème.

Voire, pour oser améliorer carrément, ne pas faire de menus de navigation en flash. C'est très joli, mais inutlisable et inutile. La créativité peut s'exprimer ailleurs.
Modifié par Laurent Denis (07 Oct 2005 - 12:06)

koala64

Modérateur

7 Oct 2005 à 12:23

Salut,

Juste une petite remarque...

Lorsque tu écris:

<ul id="menuconteneur">
<p class="Style29">....::::Guilde::::....</p>
<li class="Style10">...</li>
...
</ul>

tu pourrais remplacer ceci par:

<div id="menuconteneur">
<h3>....::::Guilde::::....</h3>
<ul>
<li>...</li>
...
</ul>
</div>

et y accéder dans ton css avec:

#menuconteneur h3 {
...
}
#menuconteneur li {
...
}

++

<edit> grosse bourde corrigée! ^^
Modifié par koala64 (08 Oct 2005 - 09:41)

G@NON

7 Oct 2005 à 18:18

j'ai quelques questions pour continuer :
http://validator.w3.org/check?verbose=1&uri=http%3A//romain.giovanetti.free.fr/ ce site m'informe des différentes erreurs qu'a mon site au niveau du Xhtml

et à un moment y a Line 22 column 17: there is no attribute "src".

<embed src="button1.swf" quality="high" pluginspage="http://www.macromedia

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

je ne vois pas comment je peut l'enlever car c'est du flash !
le flash peut il réellement ammener des erreur sur un site ???

G@NON

7 Oct 2005 à 18:39

non ba en faite je comprend pas ce qui est écrit !!!! Qui a un bon lien avec les balises autorisée en Xhtml ou qui veut bien m'aider a comprendre (jai pas demandé qu'on me le fasse mais qu'on me guide ! nuance !)

Igor

7 Oct 2005 à 23:15

G@NON a écrit :
non ba en faite je comprend pas ce qui est écrit !!!! Qui a un bon lien avec les balises autorisée en Xhtml ou qui veut bien m'aider a comprendre (jai pas demandé qu'on me le fasse mais qu'on me guide ! nuance !)

Bonjour,
-Première remarque as-tu une bonne raison à utiliser xhtml 1.1 ? (Comment bien déclarer XHTML1.1 ?);
-Pourquoi utiliser du flash pour ces éléments de navigation, il n'y a rien d'extraordinaire dans tes boutons et ils peuvent bloquer des utilisateurs qui ne disposent pas de flash pour de nombreuses raisons. Tu pourrais fair un Un roll over en CSS avec une seule image;
-Entre <ul> et </ul> tu ne dois avoir que des <li></li> et tu y mets des <p></p>;
-Tu utilises des attributs dépréciés en xhtml comme align, font etc.
-Certaines balises nécéssitent d'être fermées même s'ils elles sont orpheline (n'ont pas de balises de fermeture naturelle).

Voilà vite vu.

Plus d'infos si tu souhaites utilise xhtml sur Openweb qui te serons indispensables pour règler tes soucis de validation:
-Passer du HTML au XHTML
-XHTML en une heure
-Toi comprendre moi ?

G@NON

8 Oct 2005 à 07:09

l'erreur

a écrit :
document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

est elle vraiment importante ??? car je ne vois pas de bugs d'interprétation .

Igor

8 Oct 2005 à 09:18

G@NON a écrit :
l'erreur
document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

est elle vraiment importante ??? car je ne vois pas de bugs d'interprétation .
Oui. En cas de doute réfères toi à la liste des éléments html. Celle du W3C ou bien celle du WDG (Web Design Group): HTML 4.0 Elements

G@NON

8 Oct 2005 à 14:07

ha la la !!! c'est de pire en pire !!! j'ai l'impréssion que je détruit plus mon site qu'autre choses !!!!
AIdez moi !!!!!!!!!!!!!!!!!!!!! Smiley prison

Vous pouvez me contacter par msn si besoin !!

G@NON

8 Oct 2005 à 22:58

bon apres une petite séance de teste le site est presque parfait (comme sous ie ^^)

mon CSS qui bug le moins

/*2004-2005 G@NON INC - Warcraftnet CSS Version 1.02*/
/*Document type : CSS , Nom du fichier warcraftnet.css

/*D?finition des Styles*/

    .Style9 {font-size: small}
/* liens des menus*/
    .Style10 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: small; font-weight: bold;
 }
    .Style13 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: small;
}
/*Titre des menus*/
    .Style17 {color: #666666; text-align: center; font-weight: bold; font-size: medium; }
	
/*Propri?t?es des liens*/
    a:link {
	color: #5972A8;
	text-decoration: underline;
}
    a:visited {
	text-decoration: underline;
	color: #999999;
}
    a:hover {
	text-decoration: none;
	color: #A4B3D2;
}
    a:active {
	text-decoration: underline;
	color: #B2C1E2;
}
    a {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
    body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
    .Style27 {
	font-size: large;
	color: #5972A8;
}
/*Style du titre menu Guilde*/
    .Style29 {color: #999999; text-align: center; font-weight: bold; font-size: medium; }
	
/*Style du corp de la page (body)*/
html, body  {
	margin:0;
	padding:0;
	height:100%;
}

#header, #sousheader, #container, #footer{
	width:838px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	text-align: left;
	margin:0 auto;
}

#header{
	border-top:1px solid black;
	height:210px;
	background: url(images/header.jpg);
	text-indent: -5000px;
	overflow: hidden;
}

#sousheader{
	height:30px;
	background: url(images/sousheader.gif);
	border-bottom: 2px solid black;
	text-align: center;

}
#container{ 
    _height: 100%; 
    _display: table; 
    position:relative; 
    background:url(images/fond_menu.jpg) repeat-y left; 
}
#menu{  
    width:200px;  
    border-right:1px solid black;  
    border-collapse: collapse;  
    float:left;  
    background-color : #A4B3D2;  
    text-align: center;  
    _height:100%;  
	display: table-row;
    vertical-align: top; // alignement vertical du contenu en haut de la cellule 
    background:url(images/fond_menu.jpg) repeat-y left;  
}

UL#menuconteneur {
	padding:10px 0 0 0;
	text-align: left;
	width:150px;
	border-left: 1px solid black;
	border-right:1px solid black;
	margin:0 auto;
	background: #B2C1E2 url(images/menubg.jpg) repeat-x top;
	height: 100%;
	list-style: none;
}
UL#menuconteneur LI{
	height:20px;
}
UL#menuconteneur LI A{
	color:black;
	text-decoration: none;
	vertical-align: middle;
	display: block;
	height:100%;
	padding-left:25px;
}

UL#menuconteneur LI A:hover{
	_background-color: #A4B3D2;
}

#contenu{
	margin-left:200px;
	height:100%;
	display: table-cell;
}

#footer{
	border-top:1px solid black;
	border-bottom: 1px solid black;
	background: url(images/sousheader.gif); 
	height:24px;
	line-height: 24px;
	vertical-align: middle;
	text-align:center;
}

Juste pour info j'en suis arrivé à ce résultat grâce à la Web develloper Toolbar pour firefox qui permet d'éditer le CSS d'un site et d'en voir les effets en "live".

Les seuls problèmes rencontré maintenant sont :
Sous Opera le menu ne descend pas jsuqu'en bas de page (firefox avant le meme problème d'interprétation et je l'ai résolu en rajoutant "_" àa ça

#container{ 
    height: 100%;

et l'autre problème tres mineur et pas génant : l'effet rell over des menu à disparu ! Smiley decu

Sujet clos