Opera et le layout des tables

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 :

min-height:200px;
_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

Opera et le layout des tables

Sujets relatifs:

Leave a Replay