Opera et le layout des tables

Opera et le layout des tables - HTML/CSS - Programmation

Marsh Posté le 16-10-2007 à 21:07:37    

Hi all  :hello:  
 
J'ai actuellement un petit souci avec un rendu de table sous Opera. Voici un code simpifié all-in-one pour se rendre compte du problème :
 

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 <style>
 
  * {
   font-family: Verdana;
   padding: 0;
   margin: 0;
   border: 0;
  }
 
  ul , li {
   list-style-type: none;
  }
 
  #table_gestion_themes {
   border: 1px rgb(50,50,50) solid;
   border-collapse: collapse;
   font-size: 10px;
   width: 100%;
  }
 
  #table_gestion_themes  * th {
   font-weight: bold;
   color: rgb(200,200,200);
   padding: 0.5em 1em;
   border: 1px rgb(50,50,50) solid;
  }
 
  #table_gestion_themes  * td {
   text-align: center;
   border: 1px rgb(50,50,50) solid;
  }
   
  #table_gestion_themes  * td.theme_apercu {
   height: 200px;
  }
 
 
  #themes_liste {  /* ul */
   font-size: 10px;
   /*float: left;*/
   /*background: url(../img/bg_footer.png) repeat;*/
  }
 
  #themes_liste  * a {  
   display: block;
   padding: 1em;
   color: rgb(200,200,200);
   border-left: 5px transparent solid;
   border-right: 5px transparent solid;
   border-top: 1px transparent solid;
   border-bottom: 1px transparent solid;
  }
 
  #themes_liste * a:hover {
   cursor: url(../curseurs/curseur_1.cur), crosshair;
   color: white;
   background: url(../img/bg_footer.png) repeat;
   border-left: 5px rgb(100,100,100) solid;
   border-right: 5px rgb(100,100,100) solid;
   border-top: 1px rgb(100,100,100) solid;
   border-bottom: 1px rgb(100,100,100) solid;
  }
 
 
 </style>
 
</head>
 
<body>
 
  <table id="table_gestion_themes" cellpadding="0" cellspacing="0">
   <tr>
    <th>Aperçu</th>
    <th colspan="2">Resolutions Supportées</th>
    <th>Options</th>
   </tr>
   <tr>
    <td rowspan="8" class="theme_apercu">
    </td>
    <td>640 x 480</td>
    <td>1600 x 1200</td>
   </tr>
   
   <tr>
    <td>800 x 600</td>
    <td>1680 x 1050</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1024 x 768</td>
    <td>1920 x 1080</td>
    <td></td>
   </tr>
   
   <tr>
    <td>1280 x 720</td>
    <td>1920 x 1200</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1280 x 960</td>
    <td>2048 x 1536</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1280 x 1024</td>
    <td>2560 x 1600</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1440 x 900</td>
    <td>2560 x 2048</td>
    <td></td>
   </tr>
 
   <tr>
    <td>1440 x 960</td>
    <td></td>
    <td></td>
   </tr>
 
  </table>
 
</body>
 
</html>


 
 
Sous Firefox, les cellules sont bien réparties sur toute la hauteur disponible, et sont de hauteurs égales.
 
Sous Opera, la dernière cellule est étirée afin de combler l'espace restant :/
 
Une âme charitable saurait-elle résoudre ce petit problème ?  :jap:


Message édité par ANViL le 16-10-2007 à 21:08:26
Reply

Marsh Posté le 16-10-2007 à 21:07:37   

Reply

Marsh Posté le 17-10-2007 à 16:50:02    

Personne ?  :sweat:

Reply

Marsh Posté le 20-10-2007 à 14:13:58    

Opera essaie d'appliquer height:200px.
Je supprimerais ce height et ajouterais padding:5px 0; ou padding:7px 0; dans  #table_gestion_themes  * td pour un résultat qui convienne à tous les navigateurs.
On peut aussi utiliser
#table_gestion_themes  * tr td{line-height:25px;}


Message édité par Dan_A le 20-10-2007 à 14:21:48
Reply

Marsh Posté le 20-10-2007 à 19:48:41    

oui mais :
 
- j'ai indiqué le "height : 200px" parce qu'une image est sera placée dans cette cellule, et elle elle aura donc une hauteur variable (200px, p-e moins, p-e plus....)

Reply

Marsh Posté le 23-10-2007 à 06:30:18    

ben dans ce cas au lieu d'un height tu fais :  

Code :
  1. min-height:200px;
  2. _height:200px; //for IE6 my love


 
en CSS on ne fige jamais les tailles en hauteur, sauf pour des cas précis (overflow:auto)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed