28173 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Voilà j'ai un souci de décalage avec 2 élements (input). Sous FF, c'est ok, mais sous IE, ces 2 éléments sont environ une quinzaine de pixels trop bas..mais à la bonne distance horizontalement.

Voilà ma page html en question :

<table align="center" width="350" border="0" cellspacing="3" cellpadding="0" border="0">
  <tr>
    <td><a class="rollover" href="index.php">home</a></td>
    <td><a class="rollover" href="kezako.php">kezako ?</a></td>
    <td><a class="rollover" href="selection.php">best of rss</a></td>
  </tr>
  <tr>
    <td><a class="rollover" href="ajout.php">participer</a></td>
    <td><a class="rollover" href="selection.php">annuaire</a></td>
    <td><a class="rollover" href="contact.php">contacts</a></td>
  </tr>
</table>
<form action="recherche.php" method="post">
<input type="hidden" name="action" value="seek">
<input type="text" name="mots" size=25 maxlength=100 value="<?php echo $value; ?>"<?php echo $erase; ?> class="text">
<input type="submit" value="GO" class="button">
</form>


Et à présent le css : (j'ai conservé je pense l'essentiel)


input.text {
margin:0;
position:absolute;
margin-left:280px;
margin-top:35px;
width:130px; 
height:20px; 
color:white;
text-align:left; 
background-color:#002C72;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
border-style:outset;
border-width:0px;
}

input.button {
margin:0;
position:absolute;
margin-left:454px;
margin-top:35px;
width:28px; 
height:22px; 
text-align:left;
background-color:#FFFFFF;
font-size:13px;
font-family: Arial, Helvetica, sans-serif;
border-style:outset;
border-width:0px;
font-weight:bolder;
}


Voilà j'ai beau avoir fait des recherches je n'arrive pas à solutionner le problème..si certains d'entres vous ont déja rencontré mon mystérieux problème ou même si qqun a une petite piste... je suis totalement à votre écoute...

Bonne soirée,
Positionne relativement tes inputs, un truc du genre :

input {
position: relative;
top: 0px !important;
top: -15px;
}


Firefox comprend l'argument !important, donc il prend en compte le premier top et que celui-là.
Internet Explorer ne le comprend pas, il prend donc en compte le dernier top qu'il trouve.
oui, et Microsoft recommande de ne plus le faire en prévision d'Ie7.

Please, lisez la FAQ du forum, pour une fois, rien qu'une fois ... Hum ? Smiley cligne
Bonjour,

Je viens d'essayer votre méthode et elle marche effectivement.Donc c'est super ! Merci beaucoup ! Smiley smile