28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Alors, j'expose mon soucis de forme par rapport à l'intégration d'un sous menu (le tout vertical) à base de <ul> et <li>, lorsqu'on utilise Internet Explorer 6 ou 7 il y a visiblement un réel problème d'affichage de la border-bottom des <li> qui dominent le <ul> du sous menus, voici un lien pour l'exemple : http://n0ne.org/menu.php?page=paniers

On peut donc voir que la bordure (bottom) de la catégorie "Paniers" ou "L'entreprise" en utilisant Firefox (par exemple) reste bien à sa place, or lorsqu'on passe sous IE la fameuse bordure se retrouve en dessous du sous menu <ul> ...

Connaitriez-vous une solution afin de parer ce léger soucis ?

Voici le code source de menu.php

<?php
$page = 'page/accueil';
if(!empty($_GET['page']) && is_integer(ereg("^[a-zA-Z0-9\.\-_]+$",$_GET['page'])))
   {  $page = 'page/'.$_GET['page'];
      if(!file_exists($page.".php")) $page = $_GET['page'];}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fruits &amp; Co</title>
<style type="text/css" media="screen">
html, body {margin:0; padding:0;}	

body {
	background:#fff; 
	font-family:verdana, "trebuchet MS", arial, sans-serif; 
	font-size:12px;
}

.dispnone {display:none;}

#contenu {margin-top:50px; width:850px;}

#menu {list-style:none; padding:0 40px 0 20px; margin:0;}
#menu li {border-bottom:dotted 1px #888; margin:0;}
#menu li a {padding:6px 5px 4px 3px; color:#777; text-decoration:none; display:block;}
#menu li a:hover {color:#444; text-decoration:none; display:block; background-color:#ddefa2;}

.sousmenu {list-style:none; padding:0 0 0 10px; margin:0; font-size:10px;}
.sousmenu li {border-bottom:dotted 1px #888; margin:0;}
.sousmenu li a {padding:5px 5px 3px 3px !important; color:#777; text-decoration:none; display:block;}
.sousmenu li a:hover {color:#444; text-decoration:none; display:block; background-color:#ddefa2;}

</style>
</head>
<body>
<table align="center" border="0" cellspacing="0" cellpadding="0" id="contenu">
  <tr>
    <td height="500" width="210" valign="top">
      <ul id="menu">
        <li><a href="menu.php">Accueil</a></li>
        <li><a href="#">Fruits &amp; légumes</a></li>
        <li><a href="menu.php?page=paniers">Paniers &raquo;</a></li>
        <ul class="<?php if ($page=="page/paniers") {echo "sousmenu";} else {echo "dispnone";}?>">
          <li><a href="#">Fruits</a></li>
          <li><a href="#">Légumes</a></li>
          <li><a href="#">Autre</a></li>
        </ul>
        <li><a href="#">Produits de saison</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Partenaires</a></li>
        <li><a href="menu.php?page=entreprise">L'entreprise &raquo;</a></li>
        <ul class="<?php if ($page=="page/entreprise") {echo "sousmenu";} else {echo "dispnone";}?>">
          <li><a href="#">Activité</a></li>
          <li><a href="#">Situer</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </ul>
    </td>
    <td valign="top">
      <?php include($page.".php"); ?>
    </td>
  </tr>
</table>
</body>
</html>


D'avance merci pour votre aide.

Cordialement,
Fab
Modifié par fab31 (29 Dec 2008 - 14:56)
Salut,

Normal, enfin ...
Ton li contient <ul><li>... donc son border-bottom est "sous" le dernier élément...
Préfère donner ce border à tes <a>... eux ne contiennent "rien"

.dispnone {display:none;}
#contenu {margin-top:50px; width:850px;}
#menu {list-style:none; padding:0 40px 0 20px; margin:0;}
#menu li { margin:0;}
#menu li a {padding:6px 5px 4px 3px; color:#777; text-decoration:none; display:block; border-bottom:dotted 1px #888; }
#menu li a:hover {color:#444; background-color:#ddefa2;}
.sousmenu {list-style:none; padding:0 0 0 10px; margin:0; font-size:10px;}
.sousmenu li a {padding:5px 5px 3px 3px !important; color:#777;}

heu les BBcodes ne fonctionnent plus?
Modifié par ghost (29 Dec 2008 - 23:31)
Salut,

Merci, c'est exact, cela fonctionne désormais sur IE7 mais IE6 fait toujours des siennes quant à l'affichage : http://n0ne.org/menu2.php?page=paniers

J'ai beau formater le tout au possible je ne trouve pas ... on peut voir comme un <br> qui s'incruste ... Smiley confuse

Une idée ?

Merci encore