28173 sujets

CSS et mise en forme, CSS3

[Résolu ]Form(list):padding-left différent IE7, ok dans ffox et IE6

Salut,

J'ai un formulaire qui ne réagit pas de la même façon dans IE7 c'est-à-dire que le padding-left est différent. Ils sont identiques par contre dans firefox et IE6.

J'aurais besoin d'aide. S.v.p. soyez patient, je ne fais pas de css depuis très longtemps. Smiley cligne

Voici mon css:

<style type="text/css">
<!--
html, body{margin:0; padding:0;}

legend {margin-left: 1em; color: #000000; font-weight: bold; font-size:0.9em;}
legend, label, option{font-family:Verdana, Arial, Helvetica, sans-serif;}
*html legend{padding-left:7px; margin-left:0;}

label{display: block; font-size:11px; float: left; width: 10em; margin-right: 1em; margin-top:0.2em;}

fieldset {margin: 1.5em 1.5em 0 1.5em; padding: 0; }  
fieldset ol{padding: 1em 1em 0 1em; list-style: none;} 
fieldset li{padding-bottom: 0.5em;} 
fieldset.submit, fieldset.reset {border-style: none;}
*html fieldset ol{padding-left:-15px; margin-left:0;}

#male, fieldset.submit {float:left;}

#female, fieldset.reset {float:left; padding-left:3.5em;}
-->
</style>


Voici mon formulaire:

<body>
    <form action="">  
    <fieldset>  
    <legend>Contact Details</legend>  
    <ol>  
    <li>  
    <label for="name">Name:</label>  
    <input name="name" type="text" class="text" id="name" size="35" />  
    </li>  
    <li>  
    <label for="email">Email address:</label>  
    <input name="email" type="text" class="text" id="email" size="35" />  
    </li>
      
    <li>  
    <label for="phone">Telephone:</label>  
    <input name="phone" type="text" class="text" id="phone" size="35" />  
    </li> 
    </ol>  
    </fieldset> 
    
    <fieldset>  
    <legend>Address</legend>  
    <ol>  
    <li>  
    <label for="address1">Address:</label>  
    <input name="address1"  
    type="text" class="text" id="address1" size="35" />  
    </li> 
     
    <li>  
    <label for="address2">Street:</label>  
    <input name="address2"  
    type="text" class="text" id="address2" size="35" />  
    </li>  
    
    <li>  
    <label for="suburb">Suburb/Town:</label>  
    <input name="suburb"  
    type="text" class="text" id="suburb" size="35" />  
    </li> 
     
    <li>  
    <label for="postcode">Postcode:</label>  
    <input name="postcode" type="text"  
    class="text textSmall" id="postcode" size="35" />  
    </li> 
     
    <li>  
    <label for="country">Country:</label>  
    <select name="select" size="1" id="select">
      <option>Choose a Country</option>
      <option>Canada</option>
      <option>United States</option>
      <option>Other</option>
    </select>
    </li>
     
    <li>  
    <label for="postcode">I have a dog</label>  
    <input type="checkbox" name="checkbox" id="checkbox" />
    </li> 
    
    <li>  
    <label for="postcode">I have a cat</label>  
    <input type="checkbox" name="checkbox" id="checkbox" />
    </li>
    
    <li id="male">  
    <label for="male">Male</label>
    <input name="radio" type="radio" id="radio2" value="radio" checked="checked" />
    </li>
    
    <li id="female">  
    <label for="female">Female</label>
    <input type="radio" name="radio" id="radio2" value="radio" />
    </li>
      
    <li style="clear:both;">  
    <label for="comments">Your Comments:</label>
    <textarea name="textarea" id="textarea" cols="27" rows="5"></textarea>
    </li>  
      
    </li>
    </ol>
    </fieldset> 
     
    <fieldset class="submit">  
    <input class="submit" type="submit"  
    value="Send" /> 
    </fieldset>
     
    <fieldset class="reset">  
    <input name="Reset" type="reset" class="submit"  
    value="Clear" />  
    </fieldset> 
    
    </form>
</body>

Modifié par webberte (19 Nov 2007 - 02:41)
Salut,

A vue de nez tu dois avoir un problème de margin sur ton <ol>
tente un 
ol{margin: 0;}
pou voir. Smiley cligne

installe ie developer toolbar, c'est pratique pour ce genre de détail entre autre
Modifié par ghost (18 Nov 2007 - 18:36)
Aaahhhh ghost!!! Tu es le (la) meilleur(e) Smiley lol

Je crois avoir déjà entendu parler ou lu sur ce sujet. Le toolbar developer de IE?
Re,

IE developer c'est un équivalent de Web developer pour FF (en moins pratique pour moi) mais nécessaire pour trouver certaines particularités d'IE7. Je te le conseille.

ps: je suis né dans un chou Smiley cligne
Sujet clos
Aller à