[Resolvido] input com background borda arredondada

[h4v3st 1]

Boa tarde pessoal. Gostaria que me ajudassem a ver o erro que está ocorrendo no ie6 e ie7 no formulário abaixo. Segue o codigo e depois as print´s pra voces verem como está:

 

HTML

<form id="formContato" name="formContato" method="post" action="contato.php">
					<label>Nome</label>
					<div class="input-round">	
						<input type="text" name="editNome" size="33" id="editNome"/><br />
					</div>	
					<label>E-mail</label>
					<div class="input-round">	
						<input type="text" name="editEmail" size="33" id="editEmail"/><br />
					</div>
					<label>Assunto</label>
					<div class="input-round">	
						<input type="text" name="editAssunto" size="33" id="editAssunto"/><br />
					</div>
					<label>Mensagem</label>
					<div class="textarea-round">
						<textarea name="editMensagem" cols="26"></textarea>
					</div>	
					<input class="botao" name="ok" value="Enviar email"  type="submit" />
			  </form>

CSS

#formContato {
	margin-left:40px;
	margin-top:6px;
}
#formContato label,  input {
    display: block;
    float: left;
}
	 
#formContato label {
    text-align: right;
    width: 85px;
    padding-right: 10px;
    padding-bottom: 10px;
	padding-top:7px;
	color:#A8A8A8;
}
#formContato input,textarea {
	display: block;
    float: left;
	margin-top:8px;
	outline:none;
	border:none;
	color:#666;
}
#formContato textarea {
	padding:13px 0;
	overflow:auto;
}
#formContato br {
    clear: left;
}
#formContato .botao {
	margin-top:10px;
	margin-bottom:10px;
	margin-left:94px;
	clear:both;
	padding:5px 15px;
	color:#FFFFFF;
	background-color:#333333;
	font-weight:bold;
	text-align:center;
}
#formContato .input-round {
	width:244px;
	height:32px;
	background:url(../img/input-round.jpg) no-repeat;
	margin-left:87px;
}
#formContato .textarea-round {
	width:244px;
	height:89px;
	background:url(../img/textarea-round.jpg) no-repeat;
	margin-left:87px;
}

Veja a imagem

 

Funciona no IE8, chrome e firefox.. (a esquerda)

no ie7 e ie6 os inputs ficam fora do background (a direita)

 

Alguem poderia me mostrar o problema? :D

[Paulo de Tarso F. M. 24]

Tente colocar um background:transparent nos inputs e textarea.

 

Uma observação: seu seletor está com um "problema", observe que você colocou #formContato input,textarea. Este seletor está casando com todos os inputs que estão dentro do #formContato e também com todos os textareas, dentro ou fora de #formContato. Para corrigir isso, altere para #formContato input, #formContato textarea. Observe que a cada vírgula você deve informar um seletor completo...

 

Outra coisa, tem um link para disponibilizar?

 

 

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

[h4v3st 1]

Paulo, coloquei o background:transparent; e arrumei o seletor.

 

Segue o link para análise: clique

[Paulo de Tarso F. M. 24]

O problema está no posicionamento dos campos... Eles estão no meio (horizontalmente falando) do fundo com bordas arredondadas, provavelmente por causa de um margin-left:87px... Tente fazer assim:

 

1) Declare um position:relative na div.input-round

2) Defina o posicionamento dos campos com position:absolute

 

 

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

[h4v3st 1]

Paulo, muito obrigado! Era isso :)