:sweet:
Hummm… j’ai presque honte de venir poser la question… :whistle:
Mais il m’arrive un truc fou et je n’ose croire que ce soit la faute à IE(7) !
Un simple argument “height” dans une balise
, rassurez moi, c’est bien pris en charge depuis des lustres par IE quand même !?! :etonne2:
Voici mon “code” :
<table border="1" width="500">
<tr>
<td rowspan="2">
<img border="0" src="images/barre_gauche.jpg" />
</td>
<td height="80">
Mon titre
</td>
<td rowspan="2">
<img border="0" src="images/barre_droite.jpg" />
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
eh bien ce simple petit tableau de rien du tout me pose un gros problème !
Sous FF et autres navigateurs (sauf IE) j’ai bien mon “titre” qui fait 80 de haut et la seconde ligne avec le
| vide qui s’adapte au reste de la hauteur (les jpg de “barres” font 300 de hauteur).
Mais sous IE, le titre fait toute la hauteur, et la seconde cellule vide ne fait rien ou presque (cf capture). Bref, le height=“80” n’est pas du tout pris en compte 
Bien sur, si je remplis la seconde cellule, la hauteur de la cellule du titre dimininue
J’ai bien essayé avec du CSS mais ça donne pareil.
Quelqu’un a une idée ?
voici deux captures représentatives:
Sous FF
http://goretsdesbois.free.fr/wii/ff.jpg
Sous IE7
http://goretsdesbois.free.fr/wii/ie.jpg
Edité le 28/02/2008 à 11:55
|
Vire tes espaces.
ie:
![]() |
Ceci étant, vire tes tableaux. Sauf contraintes professionnelles, l’époque des sites faits avec des tableaux est révolue…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
/**put me in a file**/
td{
border: 2px solid #000000;
}
.container{
empty-cells: show;
width: 600px;
height: 200px;
border: 2px groove #000000;
border-collapse: separate;
}
.centerTopCell{
width: 400px;
height: 30px;
vertical-align: top;
text-align: center;
}
.centerBottomCell{
width: 400px;
vertical-align: top;
text-align: center;
}
.leftCell{
width: 100px;
vertical-align: middle;
text-align: center;
height: 100%;
}
.rightCell{
width: 100px;
vertical-align: middle;
text-align: center;
height: 100%;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td rowspan="2" class="leftCell">
Left cell
</td>
<td class="centerTopCell">
Mon titre
</td>
<td rowspan="2" class="rightCell">
Right cell
</td>
</tr>
<tr>
<td class="centerBottomCell">bottom center cell</td>
</tr>
</table>
</body>
<html>
Il faut définir un height à la cellule du centre au sud… En laissant le height à AUTO (non défini) tu laisses le browser appliquer son propre behavior… Et je dirais que le comportement sous IE 7 me semble plus logique de faire correspondre en hauteur les cellules d’une même ligne quand on ne défini pas de hauteur sur aucune de celles ci que sous FireFox.
En Div, tu devrais définir un height encore une foi
Mais oui, j’entends et lis ça de partout.
Mais par quoi les remplacer les tableaux :etonne2:
Uniquement du positionnement CSS ?
[quote="nicolegrand"]
[code]
Il faut définir un height à la cellule du centre au sud... En laissant le height à AUTO (non défini) tu laisses le browser appliquer son propre behavior... Et je dirais que le comportement sous IE 7 me semble plus logique de faire correspondre en hauteur les cellules d'une même ligne quand on ne défini pas de hauteur sur aucune de celles ci que sous FireFox.
En Div, tu devrais définir un height encore une foi
[/quote]
Justement, l’idée c’était de spécifier une hauteur à la cellule intéressée plutôt, et de laisser le navigateur remplir l’espace nécessaire à l’autre cellule (sans lui spécifier un height AUTO tout à fait implicite dans ce cas là).
A partir de là, FF me parait plus logique dans sa façon d’interpréter que IE.
Sans compter que dans un simple exemple comme celui-ci, IE, en plus d’ignorer la déclaration de hauteur, ne partage même pas la hauteur utile (ça m’aurait moins choqué si ça avait été le cas)
Tu as essayé ma solution sinon? Ton problème peut venir de là : IE croit qu’il y a un espace entre ton image et le
, donc il l’affiche tout bonnement, et il a une taille l’espace (essaye font-height: 1px;).
oximini> ça se remplace très bien sans tableaux, c'est tout ce que j'ai à dire. |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#container{
display: block;
float: left;
border: 2px groove rgb(100,155,50);
width: 500px;
height: 500px;
background-color: #FFFFFF;
color: #000000;
overflow: auto;
}
#leftBox{
display: block;
float: left;
height: 100%;
width: 100px;
text-align: center;
background-color: orange;
color: #000000;
}
#topBox{
display: block;
float: left;
text-align: center;
background-color: pink;
color: #000000;
width: 300px;
height: 80px;
line-height: 80px;
vertical-align: middle;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
#centerBox{
display: block;
float: left;
width: 300px;
}
#bottomBox{
display: block;
float: left;
clear: left;
text-align: center;
background-color: cyan;
color: #000000;
width: 300px;
min-height: 420px;
}
#rightBox{
display:block;
float: left;
background-color: orange;
color: rgb(0,0,0);
width: 100px;
min-height: inherit;/*Firefox W3C compliant doesn't work on IE7*/
height: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="leftBox">
left box
</div>
<div id="centerBox">
<div id="topBox">
header box
</div>
<div id="bottomBox">
bottom box
</div>
</div>
<div id="rightBox">
right box
</div>
</div>
</body>
<html>
Par exemple.
Edité le 27/02/2008 à 23:55
Par exemple.
(même si entre nous, je déteste les float)
sans-nom > je n’ai pas testé ta proposition pour la simple et bonne raison… que j’ai abandonné le tableau pour un positionnement CSS :ane:
(à peu de chose près, justement ressemblant à l’exemple de nicolegrand)
Pour ce que disais sans-nom,
le font-size à 0 sous IE permet de faire des block de hauteur inférieur au line-height; C’est un bug sous ie.
Sinon pour les retour de charrot ou les espaces cassables, sous le css il y a word-wrap et text-wrap qui peuvent t’aider a éviter des comportements non voulus quand tu fais de l’édentation dans le code HTML:
www.w3.org…
www.w3.org…
Oui, sinon tu peux faire ça :
<div><img
src="" ...
/></div>