problema com formulario

[uiLhian 1]

Alguem poderia me dizer o que poderia estar fazendo pra resolver essa incompatibilidade entres os browsers em questão ao formulario. segue em anexo as imagens: FIREFOX IE7 e Opera .

 

Css:

#formulario {	float: left;	width: 330px;	line-height: 22px;	padding: 5px 5px 10px 5px;}button[type="submit"] {	margin-left: 95px;}fieldset {	border: 0;}select {	width: 140px;	margin: 5px 0 5px 0;}input, select, textarea {	padding: 1px;	border: 1px inset #EEE;	font: 10px verdana, tahoma, arial;	color: #525252;}button {	border: 1px solid #666;	background-color: #FFF;	padding: 1px 7px 1px 7px;	font: 10px verdana, tahoma, arial;	color: #525252;}label {	width: 95px;	float: left;}

<div id="formulario">	<form action="contato.php?acao=enviar" method="post" name="contato" onSubmit="return Validar(this);">	<fieldset>	<label for="NOME">Nome:</label><input type="text" name="NOME" onfocus="this.value='';" accesskey="n" id="NOME" size="41" /><br />	<label for="EMPRESA">Empresa:</label><input type="text" name="EMPRESA" onfocus="this.value='';" accesskey="f" id="EMPRESA" size="41" /><br />	<label for="ASSUNTO">Assunto:</label><input type="text" name="ASSUNTO" onfocus="this.value='';" accesskey="a" id="ASSUNTO" size="41" /><br />	<label for="EMAIL">Email:</label><input type="text" name="EMAIL" onfocus="this.value='';" accesskey="e" id="EMAIL" size="41" /><br />			<label for="OPCOES">Departamento:</label>			<select name="OPCOES" id="OPCOES">			<option value="teste@teste">Teste 1</option>			<option value="teste@teste">Teste 2</option>			</select><br />	<label for="TEXTO">Mensagem:</label><textarea name="TEXTO" onfocus="this.value='';" accesskey="m" cols="38" rows="5" id="TEXTO"></textarea><br />	<button type="submit" id="enviar">Enviar</button> <button type="reset" id="limpar">Limpar</button><br /></fieldset>				</form>			</div>

Desde ja valeu!

[Poe 0]

O problema tá aí, pelo que parece o padding tá dando m$!#@ no IE.

 

#formulario {	float: left;	width: 330px;	line-height: 22px;	padding: 5px 5px 10px 5px;}

Agora, se não for, tenta dar uma dimensão WIDTH para o seu campo INPUT.

 

Até.

[uiLhian 1]

mexi nas duas propriedades e nenhuma fez a mudança "correta" pra ficar normal igual no FF.

[Poe 0]

Tenta colocar no começo aí do seu código

 

* {padding: 0;margin: 0;}

Ah, e pra ajudar, coloca o código fonte do seu HTML aqui (só a parte do formulario).

 

Abraço!

[uiLhian 1]

Poe, isso ja tem no arquivo CSS, como pode ver só ta dando problema mesmo é no IE, e uma diferença de pixels na textarea entre o firefox e opera. :)

[Poe 0]

Coloca o seu codigo fonte HTML aqui! :) Abraço!

[uiLhian 1]

ja ta la em cima o código fonte do formulario. é no que to fazendo o teste

[Poe 0]

O problema era como você estava tratando os elementos, mas aí eu não dei a solução pronta, só fiz arrumei os problemas que estavam fazendo saltar de uma linha pra outra, agora o resto é com você.

 

Testado no IE 5, IE 5.5, IE 6 e IE 7, todos os IEcas possíveis!!!! :P

 

/* CSS Document */* {	padding: 0;	margin: 0;}#formulario {	float: left;	width: 330px;	line-height: 22px;}form {	padding: 5px 5px 10px 5px;}button[type="submit"] {	margin-left: 95px;}fieldset {	border: 0;}select {	width: 140px;	margin: 5px 0 5px 0;}input, select, textarea {	padding: 1px;	border: 1px inset #EEE;	font: 10px verdana, tahoma, arial;	color: #525252;}input {	display: block;	height: 20px;}button {	border: 1px solid #666;	background-color: #FFF;	padding: 1px 7px 1px 7px;	font: 10px verdana, tahoma, arial;	color: #525252;}label {	width: 90px;	height: 20px;	display: block;	margin: 0 5px 0 0;	float: left;}

[uiLhian 1]

mas "arruma" no ie e estraga no FF. :(

[Guilherme Rambo 4]

button[type=submit] Naum funfa no ie <_< []'s

[uiLhian 1]

#INSIDE#; isso ae não funciona abaixo do IE7.

[uiLhian 1]

O maximo que consegui "arruma" fói só até isso: (

FIREFOX - IE7 , pode ver que agora o "erro" é no FF.

 

CSS

 

<style type="text/css">	* {		padding: 0;		margin: 0;	}	#formulario {		float: left;		width: 330px;		line-height: 22px;	}	button[type="submit"] {		margin-left: 95px;	}	fieldset {		border: 0;	}	select {		width: 140px;		margin: 5px 0 5px 0;	}	input, select, textarea {		padding: 1px;		border: 1px inset #EEE;		font: 10px verdana, tahoma, arial;		color: #525252;				display: block;	}	button {		border: 1px solid #666;		background-color: #FFF;		padding: 1px 7px 1px 7px;		font: 10px verdana, tahoma, arial;		color: #525252;	}	label {		width: 90px;		height: 20px;		display: block;		float: left;	}	</style>

[guicisoto 0]

cara ia tira o label se tiver strong tira tb.

abs http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[uiLhian 1]

se eu tirar o label, ae ja acaba de desarrumar o formulario mesmo.

[hardbrasil 0]

Cara experimenta a justaposição sem o "float"

[uiLhian 1]

ja experimentei, não da o resultado esperado.

[Poe 0]

Oi!

 

Bom, eu acho que você não entendeu o que eu fiz lá, tentei dar o caminho, mas dar a solução não significa que você está aprendendo, então, mexi no código e vou explicar o que eu fiz:

 

/* CSS Document */* {	padding: 0;	margin: 0;}form {	float: left;	width: 330px;	line-height: 22px;	padding: 5px 5px 10px 5px;}button {	margin-left: 95px;}fieldset {	border: 0;}select {	width: 140px;	margin: 5px 0 5px 0;}input, select, textarea {	padding: 1px;	border: 1px inset #EEE;	font: 10px verdana, tahoma, arial;	color: #525252;}input {	height: 20px;	margin: 0 0 5px 0;	display: block;	float: left;}button {	border: 1px solid #666;	background-color: #FFF;	padding: 1px 7px 1px 7px;	font: 10px verdana, tahoma, arial;	color: #525252;}label {	width: 90px;	height: 20px;	display: block;	margin: 0 5px 5px 0;	float: left;}

Em primeiro lugar, eu "matei" o seu div "formulario", ele não é necessário, pois você pode fazer a tag FORM se portar como um e ela já contém todo o material a ser customizado. As propriedades que você usou podem ser movidas para o FORM, então, fica mais "limpo" e você economiza algumas linhas. Caso tenham particularidades no seu design e ela seja realmente necessária, então customize o DIV "formulario" do jeito que é necessário, mas para fazr essa formatação de design não é preciso.

 

Outra coisa que você precisa entender é que eu transformei todas as LABEL e todos os seus INPUT em blocos (display:block), como se fossem layers DIV. Então, eu deixei-os deslizantes (float:left), o que fez com que todos se arranjassem de acordo com seu tamanho.

 

O problema antes era que o FLOAT do INPUT não estava ligado. Agora está e está tudo em ordem.

 

Aproveitei e eliminei o seu button[type=submit] e só coloquei button, que funciona em todo os outros navegadores com suporte a CSS 1.0 (economizando tamanho do seu CSS).

 

Espero que tenha ajudado, mas você precisa mesmo dar uma estudada em posicionamento, viu?

 

No Position Is Everything você encontra material interessante que explica sobre posicionamento.

 

Você também acha isso no CSS LINK COLECTION aqui do fórum.

 

Abraço.

[uiLhian 1]

po agradecido mesmo, não foi por falta de interesse em tentar arrumar isso, eu apenas não consegui...

sempre quando arruma em um browser, bagunça no outro. que nem agora, fui fazer os testes, ae arruma no FF, e destroi no IE... ae quando tiro o float: left; do seletor input "arruma" no IE e bagunça no FF... ta complicado isso. :(

Bom vo vou ver o que posso fazer, lendo os textos desses links então. mesmo assim valeu!

[Poe 0]

Bom, eu chequei no FF e no IE6 e não teve problema algum. Não testei nos outros IEs, se você fizer uma checklist e colocar as imagens geradas por cada navegador já será um avanço e vai ajudar, em casa eu estou sem todos os IEs e estou com preguiça de baixar, afinal, o interesse em resolver isso pra ontem não é meu! rs Faz assim, cara, organiza aí as idéias e faz esse check e coloca aqui, tento ajudar na medida do possível. Abraço!

[uiLhian 1]

ja consegui resolver o problema, agradeço pela ajuda. Valeu!

 

form {	float: left;	width: 330px;	line-height: 24px;	margin: 10px 0 10px 5px;}fieldset {	border: 0;}select {	width: 140px;	margin: 3px 0 5px 0;	height: 17px;}input, select, textarea {	padding: 1px;	border: 1px inset #EEE;	font: 10px verdana, tahoma, arial;	color: #525252;}input {	height: 14px;	margin: 0 0 5px 0;	display: block;	float: left;}button {	border: 1px solid #666;	background-color: #FFF;	padding: 2px 7px 2px 7px;	font: 10px verdana, tahoma, arial;	color: #525252;}