28172 sujets

CSS et mise en forme, CSS3

Bug de positionnement

Bonjour,

Je me tourne vers vous après des heures de recherche car je ne vois vraiment pas d'où ce bug peut venir à part peut-être du navigateur.
Le code suivant permet dans un tableau d'avoir une largeur toujours fixe pour certaines colonnes, mais qui en cliquant sur les données qui ont été tronquées, permet d'avoir l'intégralité. Je l'ai simplifié au maximum, il manque bien entendu toute la partie récupération des données et mise en forme.
Chaque donnée tronquée est encapsulée dans un div et mise en absolue par rapport à sa cellule. Cela marche parfaitement bien pour deux cellule qui ne se "suivent" pas mais dès qu'elles le font, la 2e se met en absolu par rapport à la 1er.
Le plus rageant ce que le bug n'apparaît pas sous IE7 (pas testé sous IE8) mais sous Firefox et Opera.


<html>
<head>
<script type="text/javascript">
function show(idd) {
	var complet = "";
	for (var i = 0;i < 10;i++) { complet += "&nbsp;"; }

	document.getElementById("d" + idd).style.display = "block";
	document.getElementById("d" + idd).style.position = "relative";
	document.getElementById("d" + idd).innerHTML = complet + "<div><a href=\"javascript:hide(" + idd + ")\">abcdefghijklmnopqrst</a></div>";
}

function hide(idd) {
	document.getElementById("d" + idd).style.display = "";
	document.getElementById("d" + idd).style.position = "";
	document.getElementById("d" + idd).innerHTML = "<a href=\"javascript:show(" + idd + ")\">abcdefgh..</a>";
}
</script>
<style type="text/css">
div {
	background-color: white;
	white-space: nowrap;
	position: absolute;
	left: 1px;
	top: 1px
}
</style>
</head>
<body>
<table border=1 cellspacing=2>
<tr>
	<td id="d0"><a href="javascript:show(0)">abcdefgh..</a></td>
	<td>abcdefghijk</td>
	<td id="d1"><a href="javascript:show(1)">abcdefgh..</a></td>
	<td>abcdefghijk</td>
</tr>
<tr>
	<td>abcdefghijk</td>
	<td id="d2"><a href="javascript:show(2)">abcdefgh..</a></td>
	<td id="d3"><a href="javascript:show(3)">abcdefgh..</a></td>
	<td>abcdefghijk</td>
</tr>
</table>
</body>
</html>


La variable complet est uniquement là pour éviter que la colonne change de taille (j'utilise donc une police d'écriture à chasse fixe comme courier).

Voilà en vous remerciant si vous avez une idée d'où j'ai pu merder, car j'ai beau tourner le problème dans tous les sens, je ne vois pas.
Modifié par casper357 (30 Aug 2010 - 15:45)
Bonjour,

J'espère que tu as un doctype dans ton fichier ? S'il est absent, IE7 passe en mode quirks et c'est certainement lui qui n'a pas le bon rendu (c'est assez normal que le positionnement absolu de fasse par rapport au précédent élément en absolu).
C'est bon à savoir, mais pourquoi ce comportement ne se reproduit pas quand les deux absolus sont "séparés" par une autre balise td ?

EDIT : de plus le position "absolu" n'est pas censé se faire par rapport à son parent si celui ci est "relatif" ?
Modifié par casper357 (30 Aug 2010 - 11:42)
Après quelques essais (en supprimant totalement les div), le problème ne vient en fait pas que les div soient en absolus mais que la 2e cellule se mette en relatif par rapport à la 1er.

Existe t'il un moyen pour empêcher cela ?
Fixer le position:relative; avec javascript sur le td dans le "show" et le repasser en static dans le "hide" ?!

A tester...
Sujet clos
Aller à