28173 sujets

CSS et mise en forme, CSS3

Largeur de colonne d'un tableau pas pris en compte par IE ??

Sur une de mes pages g inséré un tableau avec une photo à l'intérieur.
j'ai fixé la largeur de la colonne et celle de la photo en pourcentage.
Sur firefox pas de pb alors sur IE, il ne prend pas compte de ces différentes largeurs et m'affiche la photo avec ça largeur originale.
Est-ce qq'un voit d'où vient le pb?
Merci par avance.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
<!--
html, body {
margin:0%;
padding:0%;
height: 100%;
width: 100%;
font-family: Comic Sans MS;
color: #000000;
}
#arriere {
position: absolute;
left: 0%;
top: 0%;
width : 100%;
height:100%;
}
#arriere table {
position: absolute;
top: 2%;
left: 2%;
width:96%;
height:96%;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #000000;
}
body,td,th {
	font-size: 110%;
}
-->
</style>
<title>Photos du tournoi du 11 novembre 2005</title>
<script type="text/javascript">
photo = 1
nbphoto = 20
function newSlide(direction) {
if (document.images) {
photo = photo + direction
if (photo < 1) { photo = nbphoto }
if (photo > nbphoto) { photo=1 }
document.slider.src = "images/tour1105/slide" + photo + ".jpg" }
}
</script>
<body>
<div id="arriere">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="10%"><center><a href="javascript:newSlide(-1)"><img alt="image précédente" src="images/precedent.jpg" width="90%"></a></center></td>
    <td width="80%"><center><img alt="Photos du tournoi du 11 novembre 2005" src="images/tour1105/slide1.jpg" name=slider width="100%"></center></td>
    <td width="10%"><center><a href="javascript:newSlide(1)"><img alt="image suivante" src="images/suivant.jpg" width="90%"></a></center></td>
  </tr>
  <tr>
    <td colspan="3"><div align="center"><a href="tour1105.php">Retour</a></div></td>
    </tr>
</table>
</div>
</body>
</html>

Modifié par Noman02 (09 Feb 2006 - 20:59)
Ca correspond aux comportements que je constate souvent avec IE. J'y reviens aprés.

Dans ton cas, ça vient du contenu des cellules. Tes cellules ne contiennent que des images, et la tailles de ces images et fixé en pourcentages, elle n'ont donc pas de dimmensions explicites. Pour connaitre la taille des cellule d'un tableau, le navigateur doit tenir compte de la contrainte de la taille du contenu des cellule, et les agrandire si nécéssaire. Dans ton cas, le contenu des cellules n'est pas une contrainte, et donc la contrainte prioritaire devrait être celle de la largeur du tableau, et la chaine de deduction devrait donc partire de lui, pour redscendre vers les celulles. Ce n'est pas le cas le plus habituel, et il est bien possible que tu ai mis le doigt sur un bug. Quelle est la version de ton IE ?

Pour vérifier ce que j'avance, essais d'inserer du texte quelquonque dans chacune de tes cellules, en prenant soin que ce texte occupe en lui seul une place plus petite que celui d'une image seule. Produit l'affichage du resultat, et voit si les pourcentage sont respecté en largeur (je pense que ce sera le cas, puisque la contrainte initial sera la taille des cellules elle mêmes).

Pour en revenir à IE, il pose souvent de tels problèmes. Il modifie lui-même la taille de certains éléments selon des critères qui sont intuitifs, mais qui ne sont pas conformes. Par exemple si tu as un bloque dont tu as explicitement fournie les dimmensions, et que ce bloque cotient un block enfant qui déborde de son parent, alors IE agrandira la taille du bloque parent, alors qu'avec les navigateurs conformes, la bloque enfant débordera.
Bonjour,

Noman02 a écrit :

Sur firefox pas de pb alors sur IE, il ne prend pas compte de ces différentes largeurs et m'affiche la photo avec ça largeur originale.


IE 5.x - 6.0 prend en compte les pourcentages indiqués dans ton code ci-dessus et affiche un résultat identique à Firefox, Opera, etc... Peut-être s'agit-il d'IE Mac ?

Cela dit, petit défaut de cette page : l'image centrale sera, en fonction de sa taille réelle et de sa qualité, plus ou moins dégradée si la largeur d'affichage disponible l'amène à être agrandie (pixellisation).

Inversement, il est recommandé d'utiliser de "vraies" vignettes plutôt que des images réduites via CSS. Voir bonnes pratiques Opquast
Modifié par Laurent Denis (10 Feb 2006 - 06:45)
J'ai la version 6.0.2900.... d'IE, je suis pas sur MAC et pour moi il ne prend pas en compte mes pourcentages car quand je change la taille de l'image, la taille de la cellule varie aussi sous IE !
En ce qui concerne le texte, j'utilise le même système de tableau sur d'autres pages et cela fonctionne très bien !
Merci pour votre aide
Sujet clos
Aller à