[résolu]Overflow ne marche pas sous FF dans un fieldset

Question

splitter

27 May 2007 à 12:20

bonjour,
debutant en webdesign je commence a faire des essais pour apprendre le css et le xhtml et la je me heurte a un truc bizard,je m explique.

si vous allez ici http://www.magic-splitter.com/usrbarre/test.htm
la page marche tres bien sous IE mais sous firefox le overflow de mon css ne fonctionne pas,je ne comprend pas pourquoi.

si vous avez une idée.

<!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>user bars generator</title>
<meta name="Description" content="user bar générator by splitter" />

<meta http-equiv="content-Type" content="text/html; charset=iso-8859-15" />
<link rel="shortcut icon" href="images/icone.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>


<body>

<div id="conteneur">

<form method="post" action="usrbarre.php">

<fieldset id="barre">
  	<img src="heroes1.jpg" alt=""  /><input type="radio" name="coul" value="heroes1.jpg" checked="checked"  />
    <img src="heroes2.jpg" alt=""  /><input type="radio" name="coul" value="heroes2.jpg" />
    <img src="heroes3.jpg" alt="" /><input type="radio" name="coul" value="heroes3.jpg" />
    <img src="heroes4.jpg" alt="" /><input type="radio" name="coul" value="heroes4.jpg" />
    <img src="heroes5.jpg" alt="" /><input type="radio" name="coul" value="heroes5.jpg" />
    <img src="heroes6.jpg" alt="" /><input type="radio" name="coul" value="heroes6.jpg" />
    <img src="lost1.jpg" alt="" /><input type="radio" name="coul" value="lost1.jpg" />
    <img src="lost2.jpg" alt="" /><input type="radio" name="coul" value="lost2.jpg" />
    <img src="pb1.jpg" alt="" /><input type="radio" name="coul" value="pb1.jpg" />
    <img src="pb2.jpg" alt="" /><input type="radio" name="coul" value="pb2.jpg" />
    <img src="pb3.jpg" alt="" /><input type="radio" name="coul" value="pb3.jpg" />
    <img src="pb4.jpg" alt="" /><input type="radio" name="coul" value="pb4.jpg" />
    <img src="simpson1.jpg" alt="" /><input type="radio" name="coul" value="simpson1.jpg" />
    <img src="simpson2.jpg" alt="" /><input type="radio" name="coul" value="simpson2.jpg" />
    <img src="simpson3.jpg" alt="" /><input type="radio" name="coul" value="simpson3.jpg" />
    <img src="house.jpg" alt="" /><input type="radio" name="coul" value="house.jpg" />
    <img src="house1.jpg" alt="" /><input type="radio" name="coul" value="house1.jpg" />
    <img src="house2.jpg" alt="" /><input type="radio" name="coul" value="house2.jpg" />
    <img src="wii.jpg" alt="" /><input type="radio" name="coul" value="wii.jpg" />
    <img src="nds.jpg" alt="" /><input type="radio" name="coul" value="nds.jpg" />
    <img src="gx1.jpg" alt="" /><input type="radio" name="coul" value="gx1.jpg" />
    <img src="nokia1.jpg" alt="" /><input type="radio" name="coul" value="nokia1.jpg" />
    <img src="xbox360.jpg" alt="" /><input type="radio" name="coul" value="xbox360.jpg" />
    <img src="xbox3602.jpg" alt="" /><input type="radio" name="coul" value="xbox3602.jpg" />
    <img src="userlspbleu.jpg" alt="" /><input type="radio" name="coul" value="userlspbleu.jpg" alt="" />
    <img src="userlsprouge.jpg" alt="" /><input type="radio" name="coul" value="userlsprouge.jpg" alt="" />
    <img src="userlspvert.jpg" alt="" /><input type="radio" name="coul" value="userlspvert.jpg" alt="" />
    <img src="userlspnoir.jpg" alt="" /><input type="radio" name="coul" value="userlspnoir.jpg" alt="" />
    <img src="userlsp2.jpg" alt="" /><input type="radio" name="coul" value="userlsp2.jpg" alt="" />
    <img src="userlsp3.jpg" alt="" /><input type="radio" name="coul" value="userlsp3.jpg" alt="" />
    <img src="userlsp4.jpg" alt="" /><input type="radio" name="coul" value="userlsp4.jpg" alt="" />
    <img src="userlsp5.jpg" alt="" /><input type="radio" name="coul" value="userlsp5.jpg" alt="" />
    <img src="userlsp6.jpg" alt="" /><input type="radio" name="coul" value="userlsp6.jpg" alt="" />
    <img src="userlsp7.jpg" alt="" /><input type="radio" name="coul" value="userlsp7.jpg" alt="" />
    <img src="userlsp8.jpg" alt="" /><input type="radio" name="coul" value="userlsp8.jpg" alt="" />
    <img src="userlsp9.jpg" alt="" /><input type="radio" name="coul" value="userlsp9.jpg" alt="" />
    <img src="userlsp10.jpg" alt="" /><input type="radio" name="coul" value="userlsp10.jpg" alt="" />
    <img src="userlsp11.jpg" alt="" /><input type="radio" name="coul" value="userlsp11.jpg" alt="" />
    <img src="userlsp12.jpg" alt="" /><input type="radio" name="coul" value="userlsp12.jpg" alt="" />
    <img src="userlsp13.jpg" alt="" /><input type="radio" name="coul" value="userlsp13.jpg" alt="" />
    <img src="userlsp14.jpg" alt="" /><input type="radio" name="coul" value="userlsp14.jpg" alt="" />
    <img src="msn1.jpg" alt="" /><input type="radio" name="coul" value="msn1.jpg" alt="" />
    <img src="apple1.jpg" alt="" /><input type="radio" name="coul" value="apple1.jpg" alt="" />
    <img src="google.jpg" alt="" /><input type="radio" name="coul" value="google.jpg" alt="" />
    <img src="vista.jpg" alt="" /><input type="radio" name="coul" value="vista.jpg" alt="" />
    <img src="poker.jpg" alt="" /><input type="radio" name="coul" value="poker.jpg" alt="" />
    <img src="free.jpg" alt="" /><input type="radio" name="coul" value="free.jpg" alt="" />
    <img src="neuf.jpg" alt="" /><input type="radio" name="coul" value="neuf.jpg" alt="" />
    <img src="emule.jpg" alt="" /><input type="radio" name="coul" value="emule.jpg" alt="" />
    <img src="wow.jpg" alt="" /><input type="radio" name="coul" value="wow.jpg" alt="" />
    <img src="psp.jpg" alt="" /><input type="radio" name="coul" value="psp.jpg" alt="" />
    <img src="naruto.jpg" alt="" /><input type="radio" name="coul" value="naruto.jpg" alt="" />
    <img src="ps3.jpg" alt="" /><input type="radio" name="coul" value="ps3.jpg" alt="" />
    <img src="galactica.jpg" alt="" /><input type="radio" name="coul" value="galactica.jpg" alt="" />
    <img src="djmax.jpg" alt="" /><input type="radio" name="coul" value="djmax.jpg" alt="" />
    <img src="yahoo.jpg" alt="" /><input type="radio" name="coul" value="yahoo.jpg" alt="" />
    <img src="amiga.jpg" alt="" /><input type="radio" name="coul" value="amiga.jpg" alt="" />
    <img src="spiderman.jpg" alt="" /><input type="radio" name="coul" value="spiderman.jpg" alt="" />
    <img src="se.jpg" alt="" /><input type="radio" name="coul" value="se.jpg" alt="" />
    <img src="durex.jpg" alt="" /><input type="radio" name="coul" value="durex.jpg" alt="" />
    <img src="symbian.jpg" alt="" /><input type="radio" name="coul" value="symbian.jpg" alt="" />
    <img src="ricard.jpg" alt="" /><input type="radio" name="coul" value="ricard.jpg" alt="" />
    <img src="puma.jpg" alt="" /><input type="radio" name="coul" value="puma.jpg" alt="" />
    <img src="coca.jpg" alt="" /><input type="radio" name="coul" value="coca.jpg" alt="" />
    <img src="cocazero.jpg" alt="" /><input type="radio" name="coul" value="cocazero.jpg" alt="" />
    <img src="linux.jpg" alt="" /><input type="radio" name="coul" value="linux.jpg" alt="" />
    <img src="jack.jpg" alt="" /><input type="radio" name="coul" value="jack.jpg" alt="" />
    <img src="qualatex.jpg" alt="" /><input type="radio" name="coul" value="qualatex.jpg" alt="" />
    <img src="babe.jpg" alt="" /><input type="radio" name="coul" value="babe.jpg" alt="" />
    <img src="dollard.jpg" alt="" /><input type="radio" name="coul" value="dollard.jpg" alt="" />
    <img src="kebab.jpg" alt="" /><input type="radio" name="coul" value="kebab.jpg" alt="" />
    <img src="reebok.jpg" alt="" /><input type="radio" name="coul" value="reebok.jpg" alt="" />
	<img src="userfm.jpg" alt="" /><input type="radio" name="coul" value="userfm.jpg" alt="" />

</fieldset>


<fieldset id="police2">
<p> <strong>couleur de la police</strong> </p>
<p><a href="#null" onclick="window.open('rgb.htm','Displayd','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=640,height=480');">Voir</a></p>
<label>ROUGE :</label><input type="text" name="r" size="10" value="255"/><br/>
<label>VERT  :</label><input type="text" name="v" size="10" value="255"/><br/>
<label>BLEU  :</label><input type="text" name="b" size="10" value="255"/><br/>
</fieldset>


<fieldset id="police">
<p> <strong>choix de la police</strong> </p>
<img src="police1.jpg" alt="" />
    <input type="radio" name="police" value="Visitor_TT1_BRK.ttf" checked="checked" />
  
    <img src="police2.jpg" alt="" />
  <input type="radio" name="police" value="unlearne.ttf" />
  
    <img src="police3.jpg" alt="" />
  <input type="radio" name="police" value="bitbox.ttf" />
  
    <img src="police4.jpg" alt="" />
  <input type="radio" name="police" value="BMblock.TTF" />
  
    <img src="police5.jpg" alt="" />
  <input type="radio" name="police" value="BMREA___.TTF" />
</fieldset>

  
<fieldset id="saisie">

<p>Texte de la barre</p>
  <input type="text" name="texte" size="20" />
  <input type="submit" value="OK" />

</fieldset>

      </form>

</div>





</body>
</html>

et le css



body {
        background-image:url(fond.jpg);
        background-repeat:no-repeat;
        background-position: top center;
		  
        text-align: center;
        font-size: 1em;
        color: #000000;
		  
}
fieldset {
	display: list-item;
	border: hidden;
	border-style: none;
	
	margin-left: 0px;
	

}


#conteneur {
position: relative;
	width: 800px;
	height: 480px;
	width: 804px;
	height: 484px;
	margin: -13px auto 0 auto;


}

#barre {
position: absolute;
overflow: auto;
	
	width: 400px;
	height: 341px;
	left: 5px;
	top: 10px;
	margin: 0px 0px 0px 0px;
	max-height: 340px;
}

#police2{
	position: absolute;
	width: 365px;
	height: 150px;
	left: 420px;
	top: 15px;

	
}

#police{
	position: absolute;
	width: 400px;
	height: 150px;
	left: 400px;
	top: 190px;
}
#saisie{
	position: absolute;
	width: 400px;
	height: 150px;
	left: 10px;
	top: 360px;
}

#result{
	position: absolute;
	width: 400px;
	height: 150px;
	left: 400px;
	top: 380px;
}

a:link {
color: White;
border: solid 1px;
text-decoration: none;
background-color: Orange;
}


a:hover {
	background-color: Aqua;
	color: Black;
}

Modifié par splitter (27 May 2007 - 15:45)

virtualgadjo

27 May 2007 à 12:36

Salut,
ça vient peut-être bien de ton display: list-item pour les fieldset dans ta feuille de style.

IE s'en tape visiblement (il a du bon parfois Smiley smile

) mais pas FF. Or list-item est là pour transformer un élément en élément de liste et je doute que ce soit ce que tu voulais pour fieldset.

Le truc c'est qu'un élément list-item n'est pas un bloc et donc n'est pas vraiment censé supporter l'overflow. Essaie sans pour voir, je doute que ça mette ta mise en page en vrac Smiley cligne

et ça pourrait bien résoudre ton problème

Have swing

splitter

27 May 2007 à 12:58

j ai retirer le list-item mais ça change rien, it-s bizarre Smiley smile

virtualgadjo

27 May 2007 à 13:03

re,
je viens de jeter un oeil, marrant, d'autant que fieldset est censé supporter l'overflow me semble-t'il, même sans lui spécifier un display: block comme tu l'as fait Smiley smile

je serais toi, dans un cas comme ça, pas plus royaliste que le roy, je collerais tout ça dans un div à l'intérieur du fieldset, je ne pense pas que ce soit une hérésie et, au moins, là tu es sûr que l'overflow marchera partout (à quelques dinosaures près mais là...)

Have swing
Modifié par virtualgadjo (27 May 2007 - 13:04)

splitter

27 May 2007 à 13:18

ben ça marche Smiley smile

merci j avais pas pensé a mettre un div Smiley smile

virtualgadjo

27 May 2007 à 15:36

My pleasure et, t'inquiète, ça nous arrive à tous de faire shadocks avant de finir par opter pour le plus simple.

Pense à mettre [résolu] dans ton titre de thread

have swing

Sujet clos

CSS et mise en forme, CSS3

[résolu]Overflow ne marche pas sous FF dans un fieldset