28172 sujets

CSS et mise en forme, CSS3

Chers tous,

Vous pouvez trouver le rendu directement sur ma page plus qu'épurée là :

http://www.circleevent.com/css/test.html

J'ai donc JUSTE :
- un div représentant une ligne
- un div représentant la colonne gauche à l'intérieur de cette ligne
- un div représentant la colonne droite à l'intérieur de cette ligne

Lorsque une de mes lignes est en "display:none;", parce qu'elle doit être affichée seulement par l'utilisateur (le clic sur l'image, dans l'exemple), alors la ligne suivante devient complètement crazy : le texte est simplement... dupliqué Smiley eek

Surlignez le texte de la checkbox par exemple... le texte se surligne à deux endroits différents.

Que puis-je changer dans la css pour ça ? Car j'ai tout essayé, mon seul moyen est d'ajouter un <br> après chaque div de ligne, et ça craint Smiley decu

Je joins le code ici :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">
<style>
#container { width: 960px; position: relative; }
.texte .row {	width: 100%; position: relative; float: left;	left: 0; }
.texte .row .question {	position: relative; width: 400px;	float: left; left: 0; }
.texte .row .underquestion { position: relative; width: 400px; float: left; left: 0; }
.texte .row .answer {	position: relative;	width: 300px;	float: left; left: 20px; }
</style>
</head>
<body> 
<div id="container">
	<div class="texte">
		<p>Les valeurs initiales sont là à titre indicatif, il vous suffit de les remplacer par vos propres données.</p>
	  <div class="row">
    	<div class="question">Question 1 :</div>
      <div class="answer"><a href="#" onclick="document.getElementById('hidid').style.display='';">OPEN</a></div>
		</div>
		<div class="row" id="hidid" style="display:none;">
			<div class="underquestion">Question cachée :</div>
			<div class="answer"><input type="text" class="field" name="sSAN_NAME"></div>
		</div>
    <div class="row">
	  	<p><input type="checkbox" name="bAccept">J'aimerais bien comprendre comment c'est possible que ce code tout simple et tout con parvienne a me faire du double texte  [decu]</p>
		</div>
	</div>
</div>
</body>
</html>


Merci à tous, car je deviens chèvre, je n'avais jamais vu ça.

Et encore, parfois par exemple, la checkbox vient se foutre dans le texte dupliqué...

PS : n'apparait que sur IE, évidemment.
Modifié par iguypouf (13 Apr 2011 - 10:31)
Bonjour,

Aucun problème apparent avec IE8.

Est-ce tu pourrais nous faire un screen du problème ?


Par contre, sans doctype, faut pas s'étonner d'avoir des problèmes... Smiley rolleyes
Modifié par Laurie-Anne (13 Apr 2011 - 08:32)
Bien vu, merci beaucoup, avec le doctype de base ça passe, c'est assez dingue tout de même.

Voilà le screen avec IE8, chez moi et plusieurs clients :

http://img834.imageshack.us/img834/6332/bugers.png

Comme tu peux le voir, je sélectionne le texte, et le "pendant" du texte dupliqué se sélectionne en même temps O_o
Modifié par iguypouf (13 Apr 2011 - 09:35)
iguypouf a écrit :
Bien vu, merci beaucoup, avec le doctype de base ça passe, c'est assez dingue tout de même.
Bah non... Enfin, pas vraiment. Sans doctype IE utilises un mode de rendu différent (qui dépends de la version), ce qui entraine des problèmes (même si je ne vois pas trop ce qui pouvait causer le tien).

Du coup, le problème est résolu ou pas ?
Apparemment, le problème est résolu. Dans ma page, il y avait bien un doctype mais un bête

<!--
-->


était écrit plus haut, résidu d'un sale include qui trainait, donc je présume que mon doctype n'était en fait pas pris en compte par IE.

Merci de m'avoir conduit à vérifier ça Smiley cligne

N'empêche, c'est quand même l'hallu car c'est la première fois que je voyais ça !
iguypouf a écrit :
était écrit plus haut, résidu d'un sale include qui trainait, donc je présume que mon doctype n'était en fait pas pris en compte par IE.
Effectivement.