Problème d'affichage de la navigation par tabulation latérale dans IE7

Je tente de créer un menu de navigation latéral "Tabulation" à l'aide de html/css. Je vais avec l'approche la plus pratique d'utiliser une table qui a une seule rangée et deux cellules (colonnes). La cellule de gauche est pour les "onglets" et la cellule de droite est pour le contenu à afficher. La cellule de gauche contenant les onglets a une bordure droite définie pour être le diviseur entre les onglets et le contenu.Problème d'affichage de la navigation par tabulation latérale dans IE7

Chaque "Tab" est une étiquette div dans cette cellule. Je veux ensuite éliminer cette bordure droite pour la "Tab" sélectionnée. Pour ce faire, je définis la div "Tab" sélectionnée avec une marge de -1px. L'idée est que cela compensera essentiellement ce div pour couvrir la bordure droite qui est définie dans la cellule de table sous-jacente. Ce mécanisme fonctionne bien dans Firefox et Safari, mais ne fonctionne pas dans IE7. Quelqu'un at-il une idée sur la façon de faire fonctionner ce tor dans IE7?

Note ... Je n'ai pas encore vérifié cela dans IE8.

Voici le code html ...

<!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> 
    <title>Side Tabs</title> 
    <style type="text/css"> 
     #sidemenu 
     { 
      background-color: #DDFFCC; 
      border-right: 1px solid #BDDCAD; 
      width: 199px; 
      vertical-align: top; 
      text-align: center; 
     } 
     #sidemenu div 
     { 
      padding: 8px 0px 8px 8px; 
      border-bottom: 1px solid #BDDCAD; 
      font-weight: bold; 
      font-size: 12pt; 
     } 
     #sidemenuselected 
     { 
      padding: 8px 0px 8px 8px; 
      border-bottom: 1px solid #BDDCAD; 
      font-weight: bold; 
      font-size: 12pt; 
      background-color: #ffffff; 
      margin-right: -1px; 
     } 
    </style> 
</head> 
<body> 
    <center> 
     <div style="background-color: #ECF1ED; padding: 16px; width: 600px;"> 
      <table cellpadding="0" cellspacing="0" style="width: 100%; table-layout: fixed;"> 
       <tr> 
        <td id="sidemenu"> 
         <div style="height: 40px"> 
         </div> 
         <div> 
          Product Specifications</div> 
         <div id="sidemenuselected"> 
          How It Works</div> 
         <div> 
          Maintenance</div> 
        </td> 
        <td> 
         <div style="padding: 16px; background-color: #FFFFFF; text-align: left;"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
          deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error 
          sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
          quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
         </div> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </center> 
</body> 
</html>

Source

2009-03-29 Bryan Sebastian

Essayez un style de

position: relative; left: 1px

sur la div # sidemenuselected

Source

2009-03-29 14:54:36

Merci dcaunt ... qui fonctionne très bien !!! Cela me rendait fou !!! –

:) Je vous recommande vivement de lire comment fonctionne le positionnement avec CSS –

Problème d'affichage de la navigation par tabulation latérale dans IE7

Répondre

Questions connexes