campo de formulario desalinhado com o botão

[Gerciley 14]

Boa amigos, to com um probleminha bem simples, mas ja quebrei a cabeça e proucurei bastante mas nada..

onserve a imagem abaixo:

acima temos uma div no fundo com borda arredondada verde dentro dela dois inputs um tipo texto com background transparente e outro tipo image ("a imagem da lupa para o submit") eu inserir no HTML um depois do outro e como a imagem é maior que o input fica desalinhado a imagem fica certo porem o input texto fica abaixo do meio da div, ja tentei line-height, com display table-cell ja tentei margin 0 auto nos dois objetos fim de alinhados ao meio da div mas nada; agradeço qualquer ajuda;

[Diéssica 140]

Posta o CSS e o HTML (só do campo e do botão)

[Gerciley 14]

Diéssica, consegui resolver com uma "gambiarrinha", não é o jeito certo mas funciona em todos os browsers que testei até agora. Abaixo os códigos;

 

HTML

<form action="" id="frmBusca" method="get">
			<div id="fbusca">
				<input id="txtBusca" type="text" name="txtBusca" size="45" />
				<input id="btnBusca" type="image" src="imagens/btnBusca.png"/>
			</div>

CSS

#conteudo #busca #fbusca  {
background:#C5E765;
margin:3%;
height:40px;
border:#62A21D 2px solid;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;

}
#conteudo #busca #txtBusca{
border-style:none;
outline:0;
height:20px;
background:transparent;
margin-top:9px;
}
#btnBusca{
height:38px;
display:table-cell;
float:right;

}

[angelorubin 142]

Boa tarde,

 

Apenas a título de curiosidade.

 

No internet Explorer 7 não rodou.

 

Clique aqui

[Gerciley 14]

só testei no 9, agora ta funcionando com o código acima, mas no IE7 não testei..

[angelorubin 142]

Bom dia,

 

Funcionou no IE 6/7/8/9 na base da gambiarra, devido ao hasLayout e seus bugs de margin nos IE's da vida.

 

CSS

* {
margin:0;
padding:0;
}

#container {
margin:20px;
background-color:#C6E765;
width:400px;
height:auto;
min-height:35px;
overflow:hidden;
border:2px solid #689F28;
-moz-border-radius:10px;
 	-webkit-border-radius:10px;
 	-o-border-radius:10px;
 	border-radius: 10px;
behavior: url(pie/PIE.htc);
position:absolute;
padding-bottom:5px;
}

.busca {
width:330px;
height:35px;
border-top:none;
border-right:1px solid #689F28;
border-left:none;
border-bottom:none;
background-color:transparent;
line-height:35px;
float:left;
padding: 0 0 0 5px;
}

.lupa {
width:35px;
float:left;
margin: 0 0 0 10px;
}

span {
margin:5px 5px 0 5px;
overflow:hidden;
height:auto;
min-height:35px;
float:left;
}

 

XHTML

<div id="container">

<span>
   <input class="busca" type="text" value="digite sua busca aqui" />
   <input class="lupa" type="image" src="img/lupa.png" alt="lupa" />
</span>

</div>

 

Mas não gostei da minha solução e fica um desafio para quem se interessar (*talvez para alguns nem seja um desafio), rodar com uma solução menos "gambiarrística" e deixar o mais elegante possível, retirando a margin do lado esquerdo que aparece no input busca nos IE's.