Bonjour, nouvellement inscrit je poste un sujet concernant un probleme que je n'arrive pas a resoudre apres avoir essaye tout ce que je peux et avoir consulte toutes les ressources.
J'ai donc une liste avec dans chaque li de la liste des labels et des formulaires (input, select...). J'ai definis que l'espace entre chaque ligne de la liste est de 10px. Sous firefox bien entendu tout fonctionne correctement mais sous ie... l'espaceentre les lignes est de 15px ou 12px ou parfois 13... sans logique apparente.... et c'est la que je coince...
Pour info, j'ai mais mon code tout a la ligne pour eviter des espaces intempestifs mais rien n'y fait...
Ce formulaire est integre dans un systeme de grille.
Sorry pour les accents, je suis a Berlin et mon clavier allemand n'a pas d'accents.
Le code :
Code css de la grille
Code css pour les formulaire
Les petits hack pour ie
Si quelqu'un avait un element de reponse je le remercierais grandement Merci d'avance !
J'ai donc une liste avec dans chaque li de la liste des labels et des formulaires (input, select...). J'ai definis que l'espace entre chaque ligne de la liste est de 10px. Sous firefox bien entendu tout fonctionne correctement mais sous ie... l'espaceentre les lignes est de 15px ou 12px ou parfois 13... sans logique apparente.... et c'est la que je coince...
Pour info, j'ai mais mon code tout a la ligne pour eviter des espaces intempestifs mais rien n'y fait...
Ce formulaire est integre dans un systeme de grille.
Sorry pour les accents, je suis a Berlin et mon clavier allemand n'a pas d'accents.
Le code :
<fieldset>
<legend>Description</legend>
<ul>
<li>
<div class="grid_2_form alpha">
<label>Straße & Hausnummer*</label></div>
<div class="grid_1 suffix_3_form"><input type="text" id="id_street_address" name="street_address" class="form_text"/></div></li>
<li>
<div class="grid_2_form alpha">
<label>Straße & Hausnummer*</label></div>
<div class="grid_2 suffix_2_form"><input type="text" id="id_street_address" name="street_address" class="form_text"/></div></li>
<li>
<div class="grid_2_form alpha">
<label>Straße & Hausnummer*</label></div>
<div class="grid_3 suffix_1_form"><input type="text" id="id_street_address" name="street_address" class="form_text"/></div></li>
<li>
<div class="grid_2_form alpha">
<label>Straße & Hausnummer*</label></div>
<div class="grid_4_form omega"><input type="text" id="id_street_address" name="street_address" class="form_text"/></div></li>
<li>
<div class="grid_2_form alpha">
<label>Straße & Hausnummer*</label></div>
<div class="prefix_1 grid_3_form omega"><input type="text" id="id_street_address" name="street_address" class="form_text"/></div>
</li>
</ul>
</fieldset>
Code css de la grille
/* @group GRID SYSTEM */
.grid-in { width: 532px; margin: 0 20px; float: left; }
.grid-out { width: 192px; }
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,
.grid_1_out_right,.grid_2_out_right,.grid_3_out_right,.grid_4_out_right,.grid_5_out_right,.grid_6_out_right,
.grid_1_out_left,.grid_2_out_left,.grid_3_out_left,.grid_4_out_left,.grid_5_out_left ,.grid_6_out_left,
.grid_1_form, .grid_2_form, .grid_3_form, .grid_4_form, .grid_5_form, .grid_6_form
{
display: block;
margin-left: 5px;
margin-right: 5px;
}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,
.grid_1_out_right,.grid_2_out_right,.grid_3_out_right,.grid_4_out_right,.grid_5_out_right,
.grid_1_out_left,.grid_2_out_left,.grid_3_out_left,.grid_4_out_left,.grid_5_out_left,
.grid_1_form, .grid_2_form, .grid_3_form, .grid_4_form, .grid_5_form, .grid_6_form
{
float: left;
}
.alpha, .grid_6 { margin-left: 10px; }
.omega, .grid_6 { margin-right: 10px; }
.grid_1 { width: 77px; }
.grid_2 { width: 164px; }
.grid_3 { width: 251px; }
.grid_4 { width: 338px; }
.grid_5 { width: 425px; }
.grid_6 { width: 512px; }
.grid_1_out_right { width: 87px; margin-right: 0; }
.grid_2_out_right {width: 174px; margin-right: 0; }
.grid_3_out_right {width: 261px; margin-right: 0; }
.grid_4_out_right {width: 348px; margin-right: 0; }
.grid_5_out_right {width: 435px; margin-right: 0; }
.grid_6_out_right {width: 522px; margin-right: 0; }
.grid_1_out_left { width: 87px; margin-left: 0; }
.grid_2_out_left {width: 174px; margin-left: 0; }
.grid_3_out_left {width: 261px; margin-left: 0; }
.grid_4_out_left {width: 348px; margin-left: 0; }
.grid_5_out_left {width: 435px; margin-left: 0; }
.grid_6_out_left {width: 522px; margin-left: 0; }
.prefix_1 { padding-left: 97px; margin-left: 0; }
.prefix_2 { padding-left: 184px; margin-left: 0; }
.prefix_3 { padding-left: 271px; margin-left: 0; }
.prefix_4 { padding-left: 358px; margin-left: 0; }
.prefix_5 { padding-left: 445px; margin-left: 0; }
.suffix_1 { padding-right: 97px; margin-right: 0; }
.suffix_2 { padding-right: 184px; margin-right: 0; }
.suffix_3 { padding-right: 271px; margin-right: 0; }
.suffix_4 { padding-right: 358px; margin-right: 0; }
.suffix_5 { padding-right: 445px; margin-right: 0; }
/* Grid for form */
.field_layout .alpha, .grid_6_form { margin-left: 0; }
.field_layout .omega, .grid_6_form { margin-right: 0; }
.grid_1_form { width: 72px; }
.grid_2_form {width: 159px; }
.grid_3_form {width: 246px; }
.grid_4_form {width: 333px; }
.grid_5_form {width: 420px; }
.grid_6_form {width: 502px; }
.field_layout .prefix_1 { padding-left: 92px; margin-left: 0; }
.field_layout .prefix_2 { padding-left: 179px; margin-left: 0; }
.field_layout .prefix_3 { padding-left: 266px; margin-left: 0; }
.field_layout .prefix_4 { padding-left: 353px; margin-left: 0; }
.field_layout .prefix_5 { padding-left: 440px; margin-left: 0; }
.field_layout .suffix_1 { padding-right: 92px; margin-right: 0; }
.field_layout .suffix_2 { padding-right: 179px; margin-right: 0; }
.field_layout .suffix_3 { padding-right: 266px; margin-right: 0; }
.field_layout .suffix_4 { padding-right: 353px; margin-right: 0; }
.field_layout .suffix_5 { padding-right: 440px; margin-right: 0; }
.prefix_1_form { padding-left: 82px; margin-left: 0; }
.prefix_2_form { padding-left: 169px; margin-left: 0; }
.prefix_3_form { padding-left: 256px; margin-left: 0; }
.prefix_4_form { padding-left: 343px; margin-left: 0; }
.prefix_5_form { padding-left: 430px; margin-left: 0; }
.suffix_1_form { padding-right: 82px; margin-right: 0; }
.suffix_2_form { padding-right: 169px; margin-right: 0; }
.suffix_3_form { padding-right: 256px; margin-right: 0; }
.suffix_4_form { padding-right: 343px; margin-right: 0; }
.suffix_5_form { padding-right: 430px; margin-right: 0; }
/* @end */
Code css pour les formulaire
/* @group Layout for form */
.field_layout
{
background-color:#F0F3F5;
border-top:7px solid #C7CFD5;
padding:8px 15px 15px;
margin-bottom:15px;
overflow: hidden;
}
/* @end */
/* @group Base elements */
fieldset
{
margin-bottom: 10px;
padding:0px;
}
fieldset legend
{
margin-bottom: 8px;
}
fieldset ul
{
border-top:1px solid #C7CFD5;
margin-bottom: 10px;
}
fieldset li
{
padding-top: 10px;
overflow: hidden;
}
fieldset label
{
display: block;
}
fieldset span
{
display: block;
}
/* Field */
.form_text, textarea, file
{
padding:3px 5px;
}
input, textarea, select, file
{
border:1px solid #AFC4CE;
}
select { padding:2px; }
.form_checkbox
{
float: left;
margin: 3px 10px 2px 0;
padding: 0;
}
/* Buttons at bottom */
.field_layout #buttons input,
.field_layout .buttons input
{
float: left;
margin-left: 10px;
}
/* Input size */
.grid_1_form .form_text { width: 60px; }
.grid_2_form .form_text {width: 147px; }
.grid_3_form .form_text {width: 234px; }
.grid_4_form .form_text {width: 321px; }
.grid_5_form .form_text {width: 410px; }
.field_layout .grid_1 .form_text { width: 65px; }
.field_layout .grid_2 .form_text {width: 152px; }
.field_layout .grid_3 .form_text {width: 239px; }
.field_layout .grid_4 .form_text {width: 326px; }
.field_layout .grid_5 .form_text {width: 413px; }
/* Select size */
.grid_1_form select { width: 72px; }
.grid_2_form select {width: 159px; }
.grid_3_form select {width: 246px; }
.grid_4_form select {width: 333px; }
.grid_5_form select {width: 420px; }
.field_layout .grid_1 select { width: 77px; }
.field_layout .grid_2 select {width: 164px; }
.field_layout .grid_3 select {width: 251px; }
.field_layout .grid_4 select {width: 338px; }
.field_layout .grid_5 select {width: 425px; }
/* Textarea size */
.grid_4_form textarea {width: 321px; }
.field_layout .grid_3 textarea {width: 239px; }
.field_layout .grid_2 .hours .form_text { width: 65px; }
/* @end */
Les petits hack pour ie
/* Hack for ie6 */
/* @group Grid system */
*html .container
{
width: 956px;
}
*html .grid_1,*html .grid_2,*html .grid_3,*html .grid_4,*html .grid_5,
*html .grid_1_out_right,*html .grid_2_out_right,*html .grid_3_out_right,*html .grid_4_out_right,*html .grid_5_out_right,*html .grid_1_out_left,*html .grid_2_out_left,*html .grid_3_out_left,*html .grid_4_out_left,*html .grid_5_out_left,*html .grid_1_form,*html .grid_2_form,*html .grid_3_form,*html .grid_4_form,*html .grid_5_form,*html .grid_6_form
{
display: inline;
overflow: visible;
}
/* @end */
/* @group Form */
*html fieldset label
{
zoom: 1;
}
*html .field_layout
{
height: 100%;
overflow: visible;
}
*html fieldset li
{
zoom: 1;
overflow: visible;
}
*html select
{
margin-top: 1px;
}
/* @end */
Si quelqu'un avait un element de reponse je le remercierais grandement Merci d'avance !