Form Diferente no IE

[hostrl 0]

Pessoal estou fazendo um form de contato em css beleza, so que o problema é que a aparence diferente do FireFox Para IE 6.

 

FireFox:

 

IE 6:

 

No firefox ta certo mais ie totalmente diferente, segue o código usado abaixo:

 

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#container_form{
width:170px;
height:150px;
float:left;
font-family: Arial;
font-size:12px;
color:#666666;
font-weight: bold;
}
#form{
width:750px;
height:130px;
padding: 10px;
}
.input{
background-color:#DDDDDD;
border:hidden;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}
.btn{
background:#CCCCCC;
}

-->
</style>
<br/>
  <form name="form1" method="post" action="">
  <div id="form">
  <div id="container_form">
	<div align="left">*Nome:
	  <div align="left">
		<input name="nome" type="text" class="input" id="nome" size="22">
	  </div>
	</div>
		<div align="left">*E-mail:
	  <div align="left">
		<input name="email" type="text" class="input" id="email" size="22">
	  </div>
	</div>
	<div align="left">*Fone:
	  <div align="left">
		<input name="fone" type="text" class="input" id="fone" size="22">
	  </div>
	</div>
	   <div align="left">*Moto:
	  <div align="left">
		<input name="moto" type="text" class="input" id="moto" size="22">
	  </div>
	</div>
  </div>
	<div id="container_form">
	<div align="left">*Quilometragem:
	  <div align="left">
		<input name="n_parcelas" type="text" class="input" id="n_parcelas" size="24">
	  </div>
	</div>
		<div align="left">*Ano:
		               * Placa
		  <div align="left">
		<input name="n_parcelas" type="text" class="input" id="n_parcelas" size="8">
		<input name="n_parcelas2" type="text" class="input" id="n_parcelas2" size="8" />
	  </div>
	</div>
	<div align="left">*Data:
		              * Horário:
		  <div align="left">
		<input name="n_parcelas" type="text" class="input" id="n_parcelas" size="8">
		<input name="n_parcelas2" type="text" class="input" id="n_parcelas2" size="8" />
	  </div>
	</div>
	
	  <div align="right"></div>
	</div>
	<div id="container_form">
	<div align="left">*Serviço Desejado:
	  <div align="left">
		<textarea name="n_parcelas" cols="25" rows="5" class="input" id="n_parcelas"></textarea>
	  </div>
	</div>
	  <div align="left"></div>
	<div align="left"></div>
	
	  <div align="right">
		<input name="button" type="submit" class="btn" id="button" value="Agendar">
	  </div>
	</div>
	</div>
  </form>

Se alguém poder me ajudar vlw

[William Bruno 1501]

Bom.. esperimenta tirar as boras:

* {
 border: none;
}

Usei o seletor global, só para facilitar e já tirar de tudo.

Depois você vai setando quais elementos você quer borda.

 

Existem tags próprias para formulários, você usou um bocado de DIVs ai..

Pesquise sobre: <label>, <fieldset>, <legend>.

[hostrl 0]

Sim isso mesmo vlw, agora tipo o outro problema é que o botão Enviar fica torto e so no ie isso..

de qualquer forma vlw ai tmb ja meu ajdou basntante

[William Bruno 1501]

Oque eu observei foi um diferente tamanho do textarea.

Eu estilizaria ele.

.input, .area {
	background-color:#DDDDDD;
	border:hidden;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
}
.area {
	width: 170px;
}

E a classe ficaria:

<textarea name="n_parcelas" cols="25" rows="5" class="area" id="n_parcelas"></textarea>

Mas reveja mesmo essa marcação.. tem DIV de mais ai.. algumas são bem desnecessárias.

 

Força ae.

[Paulo de Tarso F. M. 24]

Uma ótima alternativa que estou utlizando ultimamente em formulários é o uso do position:absolute. Lembrando que trabalho apenas com formulários cujos tamanhos são fixos.

 

O que se pode fazer é determinar um tamanho para o <fieldset>, tanto largura quanto altura, além de definir, logicamente, um position:relative para ele. Depois, cada <label> e cada <input> você pode trabalhar individualmente.

 

A princípio pode parecer que dá muito trabalho, mas na verdade, quando se constrói um formulário, como algumas distâncias são iguais, só muda o top ou left, por exemplo, de cada elemento de seu formulário.

[Aprendiz CSS 3]

Tem uma video aula gratis no site campus da visie que explica quase isso que o Paulo disse!

 

http://visie.com.br/campus/

 

abraço