[Resolvido] Input de Pesquisa no Firefox

[Paulo Andraus 0]

Olá, pessoal.

 

Seguinte, eu fiz um pequeno formulário de busca.

Uma lupa na esquerda, um retângulo branco onde a pessoa digita o que procura e um botão "buscar".

 

Meu problema é que todos esses 3 elementos têm uma sombra inferior, e essa sombra obviamente está na altura da div que comporta todo o formulário.

 

Por essa altura ser maior que o formulário onde o cliente pesquisa, quando ele clica ali, esse cursor que "pisca" na tela fica maior do que o desejado.

Nos IE´s e outros navegadores o line-height é respeitado, mas não no FF.

 

Vou postar uma imagem de como ele aparece no Firefox caso eu tenha complicado um pouco a explicação:

 

Eu sei que é de praxe postar o código, porém como é um CMS, seria um pouco complicado e demorado.

Caso precise, postem aqui que eu posto.

Porém imagino que apenas de ver a imagem os mais experientes vão "ter uma luz".

 

Desde já agradeço aos que postarem.

[William Bruno 1501]

mas então cara... você aplicou essa sombra no elemento INPUT ne?!

 

trabalhe com o padding dele, deixando que o height, seja apenas a altura exata da area util do desenho (até um pouco menos)

 

se tiver dúvidas com oque falei, pergunta, ou posta o código isolado deste trecho, ou um link para o site online. (não hospede arquivos para download)

[Henrique Barcelos 290]

Dê um padding-bottom do tamanho da sombra (se não souber, meça no Photoshop, ou similares), não se esquecendo de diminuir a altura do input

[Paulo Andraus 0]

Opa, deu certo com a dica que vocês passaram.

Eu tinha colocado a imagem de fundo no Input já com a sombra.

Fiz o seguinte:

A sombra separada do Input, com position:relative; top;altura do input; (assim ele carrega igual em todos navegadores).

 

Valeu pessoal!