ALL HTML - Discussions Valeur des champs d'un formulaire invisible sous Firefox ...

Forum de discussions « XHTML - HTML - CSS »

Retrouvez les publications relatives à ces discussions dans nos rubriques CSS, HTML, XHTML.

Encodage UTF-8 publié par crocxx
Créer des tableaux avec N cellules par ligne (modulo) publié par telnes

Valeur des champs d'un formulaire invisible sous Firefox ...

liste des forums liste des discussions Participer à la discussion

Message publié le jeudi 17 juillet 2008 à 16 h 52 par yent.

Bonjour,

Je développe un site pour mon stage et je rencontre un problème qui est pour moi plutôt inédit.

J'ai dans ma page plusieurs formulaires, contenus dans des divs qui me servent à faire des boites arrondies, lesquelles sont positionnées en absolu.

Ces boites sont habituellement cachée et un petit coup de JS me sert à les faire apparaitre, jusque là, rien de bien tordu il me semble ... mais ...

Le bug c'est que, alors que sous IE6-7 tout va bien, lorsque j'affiche une de ces boites, tous ses champs sont blancs, blancs et pas vides car si je clique sur un champ, bien que rien ne se passe, il suffit de tapper des choses pour voir apparaitre le contenu initial des champs ... Le plus bizarre c'est que ce bug n'apparait que sur un seul des formulaires ...

Pour faire plus simple => http://bug.yent.eu et cliquer sur l'image => c'est le formulaire correct, puis essayer avec le bout de menu => c'est là que ça bug ...
(c'est un morceau simplifié du site mais cela reproduit parfaitement le bug)

Je précise que je teste sur IE6,7 et sur FireFox 2 car le client veut que cela marche sur ces navigateurs même si Firefox 3 existe.

Voici mes sources :

index.htm :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="en" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>.: PBdisp - dev :: Hosted by YentServer :.</title>
		
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15"></meta>
		
		<link href="/css/global.css" type="text/css" rel="stylesheet" />
		<link href="/css/layout.css" type="text/css" rel="stylesheet" />
		<link href="/css/box.css" type="text/css" rel="stylesheet" />
		
		<script type="text/javascript" language="javascript" src="/scripts/blockFunctions.js" charset="ISO-8859-15"></script>
		<script type="text/javascript" language="javascript" src="/scripts/utils.js" charset="ISO-8859-15"></script>
	</head>
	<body>
		<div class="login">
			<a class="nohover" href="javascript:showBlock('ghshghghdghg', true);" title="Connexion à l'espace d'administration"><img src="/images/secure_22x22.png" alt="Co" /></a>
			<div class="loginarea hidden box200" id="ghshghghdghg">
				<div class="top">&nbsp;<!-- IE empty div background bug fix --></div>
				<div class="content">
					<form method="post" action="#">
						<input type="hidden" name="referer" value="vcxv" />
						<input type="text" name="f7g6s3fg7" value="Login" onfocus="if(this.value == 'Login') this.value = '';" onblur="if(this.value == '') this.value = 'Login';" /><br />
						<input type="password" name="g7f3g7f3" value="******" onfocus="if(this.value == '******') this.value = '';" onblur="if(this.value == '') this.value = '******';" /><br />
						<input type="submit" value="Connexion" /> <input type="button" value="Annuler" onclick="showBlock('ghshghghdghg', false);" />
					</form>
				</div>
				<div class="bottom">&nbsp;<!-- IE empty div background bug fix --></div>
			</div>
		</div>
		
		<div class="userpannel">
			<div class="item">
				<a href="javascript:;" onclick="showBlock('fdsgdfgdfgsdfgsdfg', true, true);">Mon compte</a>
				<div class="userpannelitemdetails hidden box250" id="fdsgdfgdfgsdfgsdfg">
					<div class="marker"></div>
					<div class="top">&nbsp;<!-- IE empty div background bug fix --></div>
					<div class="content">
						<form method="post" action="#">
							<input type="hidden" name="referer" value="bndbshgsdfsgh" />
							Nom : <input type="text" name="name" value="Toto" /><br />
							Login : <input type="text" name="login" value="toto" /><br />
							<hr />
							Changer mon mot de passe :<br />
							<input type="password" name="pw1" value="" /><br />
							<input type="password" name="pw2" value="" /><br />
							<hr />
							<input type="button" value="Sauver" onclick="validateUserDetails(this.parentNode, 'fdsgdfgdfgsdfgsdfg');" /> <input type="button" value="Annuler" onclick="this.parentNode.reset(); showBlock('fdsgdfgdfgsdfgsdfg', false);" />
						</form>
					</div>
					<div class="bottom">&nbsp;<!-- IE empty div background bug fix --></div>
				</div>
			</div>
		</div>
	</body>
</html>

global.css :

/* Page's body style */
body {
	background-color: #CDEB8B;
	background-image: url('../images/body_background.png');
	background-repeat: repeat-x;
	
	color: black;
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* Links global behavior */
a {
	color: #BD1D01;
	text-decoration: none;
}

a:hover {
	color: #A71A10;
	text-decoration: underline;
}

a img {
	border-width: 0px;
}

/* Links without hover behavior */
a.nohover {
	border-width: 0px;
	text-decoration: none;
}

a.nohover:hover {
	border-width: 0px;
	text-decoration: none;
}

/* Error marked element */
.error {
	border: 1px solid red;
	color: red;
}

/* Input elements global styling */
form {
	margin: 0px;
}

input {
	margin: 1px;
	padding: 1px;
}

input[type=text], input[type=password], input[type=button], input[type=submit], select {
	border: 1px solid black;
}

input[type=text], input[type=password], select {
	height: 117%;
	font-size: 117%;
}

input[type=checkbox] {
	vertical-align: middle;
}

textarea {
	border: 1px solid black;

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* Unlinked to specific elements styling directives */
.center {
	text-align: center;
}

.right {
	text-align: right;
}

.left {
	text-align: left;
}

.nonvisible {
	border: 0px solid black;
}

.link {
	cursor: pointer;
}

.floatright {
	float: right;
}

.vmiddle {
	vertical-align: middle;
}

.bold {
	font-weight: bold;
}

.hidden {
	display: none;
}

box.css :

div.box200,
div.box250,
div.box400,
div.box600 {
	border-width: 0px;
}

div.box200 div.top,
div.box200 div.bottom,
div.box250 div.top,
div.box250 div.bottom,
div.box400 div.top,
div.box400 div.bottom,
div.box600 div.top,
div.box600 div.bottom {
	position: relative;
	
	height: 10px;
	
	font-size: 1px; /* IE bug fix */
}

div.box200 div.top,
div.box200 div.bottom {
	width: 200px;
}

div.box250 div.top,
div.box250 div.bottom {
	width: 250px;
}

div.box400 div.top,
div.box400 div.bottom {
	width: 400px;
}

div.box600 div.top,
div.box600 div.bottom {
	width: 600px;
}

div.box200 div.top {
	background: url('../images/box200_top.png');
}

div.box200 div.bottom {
	background: url('../images/box200_bottom.png');
}

div.box250 div.top {
	background: url('../images/box250_top.png');
}

div.box250 div.bottom {
	background: url('../images/box250_bottom.png');
}

div.box400 div.top {
	background: url('../images/box400_top.png');
}

div.box400 div.bottom {
	background: url('../images/box400_bottom.png');
}

div.box600 div.top {
	background: url('../images/box600_top.png');
}

div.box600 div.bottom {
	background: url('../images/box600_bottom.png');
}

div.box200 div.content,
div.box250 div.content,
div.box400 div.content,
div.box600 div.content {
	position: relative;
	
	border: 0px solid black;
	border-left-width: 1px;
	border-right-width: 1px;
	
	background-color: #94d064;
}

div.box200 hr,
div.box250 hr,
div.box400 hr,
div.box600 hr {
	width: 90%;
	
	border: 0px solid black;
	border-top-width: 1px;
}

layout.css :

/* Login link */
div.login {
	position: absolute;
	
	z-index: 4;
	
	top: 3px;
	right: 3px;
	
	width: 22px;
	height: 22px;
}

/* Login block */
div.login div.loginarea {
	position: absolute;
	
	z-index: 4;
	
	top: 0px;
	right: 0px;
	
	width: 200px;
	height: auto;
	
	border-width: 0px;
	
	text-align: center;
}

/* User pannel block */
div.userpannel {
	position: absolute;
	
	z-index: 3;
	
	top: 28px;
	right: 0px;
	
	width: 150px;
	height: auto;
	
	border-width: 0px;
}

div.userpannel div.item {
	position: relative;
	
	margin: 0px;
	margin-bottom: 4px;
	
	padding: 2px;
	padding-left: 25px;
	
	width: auto;
	height: auto;
	
	border-width: 0px;
	
	background-image: url('../images/userpannel_item_base.png');
	background-repeat: no-repeat;
}

div.userpannel div.item div.userpannelitemdetails {
	position: absolute;
	
	z-index: 4;
	
	top: 0px;
	right: 150px;
	
	width: auto;
	height: auto;
	
	border-width: 0px;
	
	text-align: center;
}

div.userpannel div.item div.userpannelitemdetails div.marker {
	position: absolute;
	
	z-index: 3;
	
	top: 0px;
	right: -18px;
	
	width: 16px;
	height: 16px;
	
	border-width: 0px;
	
	background-image: url('../images/2leftarrow.png');
	background-repeat: no-repeat;
}

blockFunctions.js :

function showBlock(id, mode, autohide) {
	if(document.getElementById(id)) {
		if(mode) {
			document.getElementById(id).style.display = 'block';
		}else{
			document.getElementById(id).style.display = 'none';
		}
	}
}

Merci d'avance de votre aide ...

participer

Message publié le vendredi 18 juillet 2008 à 11 h 15 par formy. S'il n'y a pas de solution, c'est qu'il n'y a pas de problème.

Bonjour,

L'origine du problème semble être le position:absolute de la class div.userpannel div.item div.userpannelitemdetails

Je n'ai pas de solution toute faite à te proposer mais une piste serait de mettre une position relative sur le div.userpannelitemdetails et d'adapter les propriétés du div.content qui suit.

Sinon je me demande ce que le div.marker fait dans le div.userpannelitemdetails, c'est surprenant, mais tu as peut-être une bonne raison.

participer

Message publié le vendredi 18 juillet 2008 à 13 h 49 par yent.

Salut,

merci pour tes pistes, j'ai finalement remis le menu du coté gauche ce qui m'a permis de passer presque tous les div en position relative sans galérer pour la compatibilité ...

Maintenant mon texte apparait bien comme il se doit ... cool ^^

Concernant le div.marker, il est inclus dans le div.userpannelitemdetails car il se fait masquer/montrer en même temps que ce dernier.

Merci encore ...

participer

liste des forums liste des discussions Participer à la discussion

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Les 5 dernières discussions

Order by rand() et doublons (10 réponses)
Code html / IMPORTANT (5 réponses)
problème avec wamp (4 réponses)
pb scrolling (3 réponses)
problème de frame (4 réponses)

all html : Le portail des webmaster

Forum de discussions « XHTML - HTML - CSS »

Valeur des champs d'un formulaire invisible sous Firefox ...

Les 5 dernières discussions