28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Mon problème vient lorsque je donne une couleur de fond (background-color) à une balise <fieldset>. Sous FF, la couleur de fond s'applique parfaitement tant dis que sour IE elle dépasse. Smiley biggol Voici deux screens pour illustrer :

http://www.siteduzero.com/uploads/fr/thb/70001_71000/70255.jpg
http://www.siteduzero.com/uploads/fr/thb/70001_71000/70256.jpg
Sous FF et sous IE .


fieldset{
    border: 1px solid #C6D9EC;
    background-color: #EAF2FA;
   padding: 10px;
}   



Comment puis-je y remédier ? Smiley ohwell
Url d'exemple
Modifié par Foxhound (19 May 2007 - 18:47)
Bonjour,
J'ai le même soucis que Foxhound, et cela m'embête beaucoup car le lien donné par Felipe ne permet pas de répondre à la question posée.
Je la relance donc...

Merci d'avance
Je pense que ce n'est pas possible tout simplement.

Je n'ai jamais vu d'astuces pour cela.

J'ai déjà essayé avec des padding, margin négatifs mais ca ne marche pas.
C'est vrai que c'est tordu, j'arrive à m'en approcher mais pas
à remplir toute la zone de fieldset....


form{
	padding:0em;margin:0em;
      background-color: #EAF2FA;
}   

fieldset{padding:0em}

legend{padding:0em;margin:0em}
Bonjour,

Plus simplement, le fieldset n'est pas nécessaire dans ce formulaire. Donc, refaire sans le fileldset/legend.
Modifié par Laurent Denis (19 Jun 2007 - 15:09)
Bon voici mon code si ça peut en aider certains:

html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Laissez un message</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="formulaire.css" />
	</head>
	
<body>
	<h1> Merci de laisser un message pour donner votre avis.</h1>

	<div id="formulaire">
		<div id="entête">
			<a href="http://localhost/tidus/livredor.php">Livre d'or</a> &gt; Laisser un message
		</div>
	
		<form id="profile" enctype="multipart/form-data" method="post" action="livredor.php">
			<fieldset id="credentials">
				<legend>A propos de vous</legend>
				<p>
					<label for="nom"><abbr title="Votre Nom">Nom :</abbr></label>
					<input type="text" id="nom" name="nom" value="" tabindex="1" />
				</p>
				<p>
					<label for="email"><abbr title="Votre adresse e-mail">Adresse e-mail :</abbr></label>
					<input type="text" id="email" name="prenom" value="" tabindex="2" />
				</p>
				<p>
					<label for="adresse"><abbr title="Votre adresse">Adresse :</abbr></label>
					<input type="text" id="adresse" name="email" value="" tabindex="3" />
				</p>
				<p>
					<label for="site"><abbr title="Votre site internet">Site Internet :</abbr></label>
					<input type="text" id="site" name="societe" value="" tabindex="4" />
				</p>
				<p>
					<label for="note"><abbr title="Votre evaluation du site">Votre note :</abbr></label>
					<select id="note" name="note">
						<option value="20">20/20</option>
						<option value="19">19/20</option>
						<option value="18">18/20</option>
						<option value="17">17/20</option>
						<option value="16">16/20</option>
						<option value="15">15/20</option>
						<option value="14">14/20</option>
						<option value="13">13/20</option>
						<option value="12">12/20</option>
						<option value="11">11/20</option>
						<option value="10">10/20</option>
						<option value="09">09/20</option>
						<option value="08">08/20</option>
						<option value="07">07/20</option>
						<option value="06">06/20</option>
						<option value="05">05/20</option>
						<option value="04">04/20</option>
						<option value="03">03/20</option>
						<option value="02">02/20</option>
						<option value="01">01/20</option>
						<option value="00">00/20</option>
					</select>
				</p>
			</fieldset>
			
			<fieldset id="message">
			<legend>Votre message</legend>
			<p id="messageContainer">
				<label for="message"></label>
				<textarea id="message" name="message" cols="60" rows="15" tabindex="5"></textarea>
			</p>
			</fieldset>
			
			<p class="submit"><input type="submit" id="btnSubmit" value="Valider"/></p>
		</form>
	</div>
</body>
</html>


css:


body
{
	background-image: url("img/fond.jpg");
	background-repeat : repeat-y;
	font-size: 0.8em "Trebuchet MS", helvetica, sans-serif;
}

div#formulaire
{
	width : 1000px;
	margin : auto;
	font-size : 80%;
}

div#entête
{
	width : 700px;
	margin : auto;
	margin-top : 20px;
}

form#profile
{
	width : 700px;
	margin : auto;
}

h1
{
	width : 700px;
	margin : auto;
	border-bottom : 1px dotted black;
	font-variant : small-caps;
	font-size : 175%;
}

abbr
{
	cursor: help;
	border-bottom: 1px dotted green;
}

legend
{
	background-color : rgb(255,255,255);
	border : 1px solid green;
	font-variant: small-caps;
}

fieldset#credentials,fieldset#message
{
	margin-top : 10px;
	padding-bottom : 10px;
	padding-left : 10px;
	padding-top : -10px;
	background-color : rgb(147,201,255);
	border : 1px solid black;
}

#nom,#email,#adresse,#site
{
	position : absolute;
	left : 60ex;
	width : 30ex;
}

#note
{
	position : absolute;
	left : 60ex;
}

a
{
	text-decoration: none;
	color: green;
}
a:hover
{
	color: rgb(193,142,255);
	text-decoration: underline;
}
a:visited
{
	color : rgb(193,142,255);
	text-decoration : underline;
}
a:active
{
	background-color : #FFCC66;
}



et ce code fonctionne parfaitement sous Firefox 2.0 mais pas sous IE6 :s

Merci pour votre aide
C'est amusant :

- j'ai un problème avec fieldset ?
- tu peux supprimer fieldset.
- oui, mais j'ai un problème avec fieldset...

je sens qu'on va aller loin, comme ça Smiley ravi

Enfin, bon, ce que j'en dis...
Modifié par Laurent Denis (19 Jun 2007 - 16:04)
Oui pardon, je n'y ai pas fait attention tout de suite. Et c'est par la suite que j'y ai réfléchi. Aussi je me suis dit que ce qui posait problème était simplement la légende. J'ai donc supprimé la légende pour mettre un span. Puis j'ai placé ce span grâce au css et voilà, tout est bien qui fini bien.

Je suis désolé de ne pas avoir pris en compte ton message avant Laurent Denis.

Merci
Je pensais que les fieldset étaient importants au niveau accessibilité et une meilleure compréhension de la structure?!?
je me permet de remonter le problème pour savoir si les principaux intéressés ont trouvé une solution pour ce problème hyper laid que nous pond IE6.

La solution : "utilise un span au lieu d'un legend" n'est pas acceptable à mon sens car autant dire : "utilise FF parce que IE6 sux avec les css".

De même, est-ce que ça vaut le coup de se faire ch... avec IE6 sachant qu'il y a maintenant IE7 beaucoup plus sympa avec les css ?

Ne pourrait-on pas faire une bonne action pour l'humanité et ne faire des sites uniquement compatibles pour FF ?? Smiley ravi

EDIT : J'ai trouvé une bonne solution qui règle le problème sur un fofo anglais (j'ai tendance à trop chercher les solutions sur les forums français Smiley langue ) et ça marche impecc !! Smiley lol

fieldset {
    _position : relative;  /* The underscore means only IE will see it */
    _padding-top : 20px;   /* Stupid IE */
    _padding-bottom : 15px;
    _display : block;
    border : 1px solid black;
    width : 40em;
    background-color : #DDF1F6;
    margin-bottom : 15px;
}

legend {
    _position : absolute;
    _top : -10px;
    font-weight : bold;
    font-size : 120%;
    padding : 0px 10px 0px 10px;
    border-color: black;
    border-style : solid;
    border-width : 1px;
    background-color : #C3E0E8;
}


NB : ce sont les hacks (les lignes commençant par '_' qui sont à ajouter à la css Smiley smile . Dans mon cas, ça fonctionne du tonnerre Smiley lol )
Modifié par daftdef (07 Jul 2007 - 01:40)
Effectivement ça marche mais :

Ne vaut-il pas mieux utiliser les commentaires conditionnels pour ne faire voir que certaines choses à IE ? Parce que le underscore devant une propriété n'est pas valide. De plus IE7 à le même bug donc il est pas si sympas que ça avec les css (comparé à ie6 oui, sinon nan). Apparement, IE7 ignore aussi le underscore devant une propriété CSS. Les commentaires conditionnels sont donc la meilleure solution.

Smiley hs Personnellement, je trouve que les commentaires conditionnels sont le meilleur moyen pour cacher les rustines de IE toutes versions aux vrais navigateurs. J'ai trop l'habitude de voir des hack pour IE qui utilisent des * ou des _ devant les propriétés.

Avec les conditionnels, le css principal au moin valide. Si le ou les css pour ie ne sont pas valides, tampis, tant que ça marche chez lui. S'il n'est pas lui-même au normes je ne vois pas comment faire un css aux normes et qui marche avec lui. Smiley hs
Modifié par deejay-bee (07 Jul 2007 - 18:24)
tout à fait d'accord avec toi... Je me suis contenté de proposer une *rustine* qui fonctionne pour IE6 (par contre pas pour IE7 effectivement grrrr), qui d'ailleurs n'est rien d'autre qu'un c/c d'un autre site Smiley cligne

Mais c'est clair que pour être propre, je vais utiliser les commentaires conditionnels passque ma feuille de style avec tous les patchs.... bahhhhh Smiley smile
pour préciser : si l'on utilise les commentaires conditionnels, ta technique marche. Je viens aussi de voir que j'ai aussi oublié de te remercier pour celle ci ! (dsl) Donc merci ! Smiley cligne
Modifié par deejay-bee (08 Jul 2007 - 00:43)