formatando formulario de busca

[Beto Lima 0]

Pessoal, eu tenho um formulario de busca que ta me dando dor de cabeça, pois no FF,IE6 renderiza legal. Já no IE8 fica todo desformatado. Nem vi no ie7.

 

O que eu preciso é deixar o submit dentro do input (mesma maneira como aqui do forum, onde tem a imagem da lupa dentro do input) e abaixo deixar as minhas opções de radio button uma ao lado da outra.

 

vou postar meus códs.

 

css:

/* BUSCA */

* html, body {
margin:0;
padding:0;
border:none;
height:100%;
font:normal 0.8em/1.5 Tahoma, Arial, Helvetica, sans-serif;
color:#37352F;
background:#fff;
outline:none;
}
#buscador {
float:right;
width:35%;
margin-right:1%;
position:relative;
left:0;
top:2px;
color:#FFF;
font-size:11px;
text-align:center;
}
#search {
float:right;
height:auto;
padding:0;
margin:0;
width:auto;
border:none;
}
#search input {
background:#fff;
border:2px solid #333;
padding:5px 40px 5px 5px;
width:291px;
_color:#000; /* HACK IE */
}
#search input:focus {
color:#000;
}
#search input.btn {
background:none;
border:0;
margin:7px 0 0 -26px;
padding:0;
width:auto;
position:absolute;
}
#search .radio {
border:none;
background:none;
width:auto;
vertical-align:middle;
margin-top:1px;
}

pagina:

<div id="buscador">
<form method="post" id="searchform" action="#">
<fieldset id="search">
<input value="DIGITE A SUA BUSCA" onfocus="if (this.value == 'DIGITE A SUA BUSCA') {this.value = '';}" onblur="if (this.value == '') {this.value = 'DIGITE A SUA BUSCA';}" name="input_busca" id="input_busca" type="text" />
<input name="" src="lupa.jpg" value="Buscar" id="searchsubmit" class="btn" type="image" title="Buscar" />
<input type="radio" name="escolha" class="radio" value="1" id="1" /> opcao1
<input type="radio" name="escolha" class="radio" value="2" id="2" /> opcao2
<input type="radio" name="escolha" class="radio" value="3" id="3" /> opcao3
<input type="radio" name="escolha" class="radio" value="4" id="4" /> opcao4
<input type="radio" name="escolha" class="radio" value="5" id="5" /> opcao5
</fieldset>
</form>
</div>

Peço ajuda de vocês pra deixar ele formatado em todos os navegadores...

Valeu.

[Thiago Retondar 18]

Use como background a imagem e ajusta com padding. É só analisar o código da própria busca do fórum.

 

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

[Beto Lima 0]

só que o meu a lupa fica na direita e ela é o próprio botao de submit.

[Thiago Retondar 18]

Uhhnn...

 

Você não pode fazer assim?

 

input#YourSubmit{
	background: gray url(http://forum.imasters.com.br/public/style_images/imasters2010/search_icon.png) no-repeat 0% 50%;
	padding: 0 0 0 25px;
}

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

[Beto Lima 0]

bom consegui colocar a imagem lupa como back do input e colocar na esquerda.

Por mim não teria problemas de dar uma mudada no form.

Agora o que ta xaropiando é a posição do botão OK do submit que deve ficar ao lado do input e alinhado com ele.

Por último os meus radios buttons não estão ficando lado a lado.

[Thiago Retondar 18]

Uhhnn... Desculpa, tinha entendido errado sua dúvida. :P

 

Tem um link só deste form? Não estou conseguindo renderizar muito bem aqui.

 

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

[Beto Lima 0]

é apenas um campo input e abaixo com 5 radio buttons de escolha

 

em 5min posto um link pra ele...

[Beto Lima 0]

link do exemplo

[Thiago Retondar 18]

Engraçado, aqui no Google Chrome e Firefox não está sendo renderizado certo. Olhe:

 

 

Têm dois input em baixo também. Como está ficando aí?

 

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

[Beto Lima 0]

no ie8

 

no FF ultima versão

 

Resumindo: São estes os meus problemas....

[Aprendiz CSS 3]

qual é a forma final que deseja em todos os navegadores

 

poste uma imagem

[Beto Lima 0]

a forma é essa:

[Thiago Retondar 18]

Vamos lá: é necessário trabalhar com porcentagem? Eu, pessoalmente, não gosto de trabalhar com essa medida para toda a página.

 

Podia trabalhar com clear: both para que as opções sempre fiquem em baixo.

 

Trabalhe também com a tag label. ;)

 

Qual efeito que deseja? De um layout líquido?

 

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

[Beto Lima 0]

meu site ta alinhado a esquerda, nao precisa ser liquido pq ele tem width fixo.

tenho uma div 100% e 80px de altura. nela tenho um menu <ul><li> e ao lado é pra ficar essa busca.

[Thiago Retondar 18]

Então trabalhe com pixels nessa parte da página, vai ter um melhor controle.

 

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