conflitto tra "transition" e tag <hr style="margin: 0px auto;">

[AlexDev]

ciao! ultimamente sto migliorando la grafica del mio sito e nel farlo mi sono imbatutto in un errore che pare al quanto strano..

input.userbar {
  background: #BBBBBB;
  border: 1px solid #A6A6A6;
  width: 400px;
  float: right;
  margin-right: 195px;
  margin-bottom: 5px;
  height: 20px;
  outline:0;
  padding-left: 7px;
  padding-right: 7px;
  -moz-border-radius: 7px; 
  -webkit-border-radius: 7px; 
  border-radius: 7px; 
  -webkit-transition: 500ms all ease;
  -moz-transition: 500ms all ease;
  -o-transition: 500ms all ease;
  -ms-transition: 500ms all ease;
  transition: 500ms all ease; 
  
}
input.userbar:focus {
  background: #FFFFFF;
  border-color: #7bc1f7;
  -moz-box-shadow: 0px 0px 8px #7bc1f7; 
  -webkit-box-shadow: 0px 0px 8px #7bc1f7; 
  box-shadow: 0px 0px 8px #7bc1f7; 
}

e il relativo html

                <p>Contatti:</p><br />
                
                <p><label>Sito Web:</label>&nbsp;<input value="<?php echo $sito; ?>" type="text" class="userbar" name="sitoweb" /></p>
                               
                <p><label>Skype:</label>&nbsp;<input value="<?php echo $skype; ?>" type="text" class="userbar" name="skype" /></p>
                
                <p><label>Facebook:</label>&nbsp;<input value="<?php echo $facebook; ?>" type="text" class="userbar" name="facebook" /></p>
                
                <p><label>Twitter:</label>&nbsp;<input value="<?php echo $twitter; ?>" type="text" class="userbar" name="twitter" /></p>
                <?php if(!empty($code)) { echo $code; } ?>
                <div id="contplus">
                <!-- <input type="button" onclick="addcontact();" value="+" /> -->
                <div class="contplus" onclick="addcontact();"></div><br />
                </div>
                <hr width="40%" style="margin: 5px auto; position: relative;" color="#009BFF" size="1" />

il problema è questo: se inserisco le "transition" nel css, il tag hr non si mostra sempre al centro come richiesto nell'attributo "style", a volte si trova spostato tutto a sinistra e altre volte spostato giusto al centro.. se invece tolgo le transition, cada il mondo che lo trovo sempre al centro.. tra l'altro non capisco perché quando è la volta che la linea(hr) non si trova al centro, le input text si caricano nella pagina con una transizione da destra verso sinistra(che è pure carina come transizione ma non è voluta da me).
Qualcuno potrebbe spiegarmi la causa?
PS: un'altra cosa: non capisco perché la seconda inputtext che c'è nella parte "contatti" non si visualizza bene(in senso che è spostata più in basso del dovuto).
PPS: Il sito per vedere il tutto sarebbe questo: http://youtoobob.it/cp.php ma bisogna essere registrati per accedervi e immagino che ovviamente non abbiate voglia ^^ quindi vi lascio un paio di screen:
http://i.imgur.com/7Jgol4D.png //linea spostata al centro nel modo giusto
http://i.imgur.com/f6cbOGp.png //linea spostata nel modo sbagliata

[Prill]

ciao, hai elementi flottanti, hai interrotto il float?

[AlexDev]

ciao, hai elementi flottanti, hai interrotto il float?

non ho capito, in che senso "elementi flottanti" e "interrotto il float"?

[Prill]

input.usebar flotta a destra

fare un clear (clear:both; ) anche su hr dovrebbe andar bene, indica al browser che i contenuti riprendono il loro flusso normale (vanno a capo nel giusto modo e non tendono a spostarsi e risalire come può accadere quando il float di elementi precedenti condiziona la posizione di elementi successivi)

Naturalmente non vedo il codice della tua pagina né la vedo in funzione, però il problema potrebbe essere qui

[AlexDev]

la barra hr sembra funzionare perfettamente(anche con le transition inserite) però l'input text e l'effetto transitorio dell'inizio rimangono.
ho caricato il file senza php in modo che tu possa vederlo: http://youtoobob.it/prova.html
Grazie ancora per il supporto

[AlexDev]

input.usebar flotta a destra

fare un clear (clear:both; ) anche su hr dovrebbe andar bene, indica al browser che i contenuti riprendono il loro flusso normale (vanno a capo nel giusto modo e non tendono a spostarsi e risalire come può accadere quando il float di elementi precedenti condiziona la posizione di elementi successivi)

Naturalmente non vedo il codice della tua pagina né la vedo in funzione, però il problema potrebbe essere qui

UP

[AlexDev]

UP