J'ai un problème de présentation différente entre Opera, Firefox d'une
part et Chrome, Safari d'autre part :
Opera :
<
http://cjoint.com/11oc/AJdpIBp6SqM_opera.JPG>
Firefox :
<
http://cjoint.com/11oc/AJdpETfLFak_firefox-nightly.JPG>
Chrome :
<
http://cjoint.com/11oc/AJdpEfEBvTI_chrome.JPG>
Safari :
<
http://cjoint.com/11oc/AJdpFrXd2rQ_safari.JPG>
le tout sur Mac OS X Lion.
ça se situe, côté html entre le select (dans une <p />) et le label
suivant (lui aussi dans une <p />), le code html :
<div id="item">
<p class="row">
<label>Catégorie :</label>
<select id="cat" name="cat">
<option value="-1" selected="">Choisissez</option>
<option value="0">Formulaires</option>
<option value="1">Groupes de discussion</option>
<option value="2">Comptes EMail</option>
<option value="3">Clés de logiciels</option>
<option value="4">Banque en ligne</option>
<option value="5">Cartes de paiement</option>
<option value="7">Free Marie</option>
<option value="8">Free Yvon</option>
</select>
</p>
<p class="row">
<label>Titre :</label>
<input id="title" name="title" type="text" value="< Titre
>">
</p>
<p class="row">
<label>Lien :</label>
<input id="link" name="link" type="text" value="< Lien
>">
</p>
<p class="row">
<label>Login :</label>
<input id="login" name="login" type="text" value="< Login
>">
</p>
<p class="row">
<label>Mot de passe :</label>
<input id="pass" name="pass" type="text" value="< Mot de
passe >">
</p>
<p class="row">
<label>Notes :</label>
<textarea id="infos" name="infos" cols="40" rows="6"
tabindex="4" wrap="off">< Notes ></textarea>
</p>
</div>
la partie de css adequat :
#item p.row label,
#item p.row input[type="text"],
#item p.row select {
padding: 5px 0;
font: bold 11px/14px "Lucida Grande", "Trebuchet MS", Arial,
Helvetica, sans-serif;
background:lightblue;
}
#item p.row label {
float: left;
width: 20%;
padding-right: 9px;
text-align: right;
background: -webkit-gradient( linear, left top, right top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(left, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0.75em 0 0 0.75em;
-moz-border-radius: 0.75em 0 0 0.75em;
border-radius: 0.75em 0 0 0.75em;
}
#item p.row input[type="text"], #item p.row select {
display: block;
width: 76%;
margin: 0 0 0 23%;
padding-left: 1%;
text-align: left;
background: -webkit-gradient( linear, right top, left top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(right, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0 0.75em 0.75em 0;
-moz-border-radius: 0 0.75em 0.75em 0;
border-radius: 0 0.75em 0.75em 0;
border: 0;
}
#item p.row select {
width: 77%;
padding:0.75% 0 0.75% 1%;
}
/**/
#item p.row textarea {
display: block;
width: 76%;
margin: 0 0 0 23%;
padding-left: 1%;
text-align: left;
background: -webkit-gradient( linear, right top, left top,
from(rgb(173,216,230)), to(rgb(214,236,242)) );
background: -moz-linear-gradient(right, rgb(173,216,230),
rgb(214,236,242));
-webkit-border-radius: 0 0.75em 0.75em 0;
-moz-border-radius: 0 0.75em 0.75em 0;
border-radius: 0 0.75em 0.75em 0;
border: 0;
}
comme jusqu'ici je n'avais testé que sur Firefox nightly (10.0a1
(2011-10-02), je n'ai pas vu ce problème...
--
« L'essence même du génie, c'est de mettre en pratique
les idées les plus simples. »
(Charles Peguy)