Resultado das CSS diferente para cada navegador

[Valéria P. 0]

Pessoal, preciso de ajuda para entender o seguinte problema, vou colar as imagens a seguir...

Eu tenho um SearchForm dentro de uma barra de topo, e precisei acrescentar uma combobox ao lado, o problem aé que o botão fica desalinhado no navegador firefox, enquanto no IE e no próprio Dreamweaver é mostrado do jeito certo...

Não possuo conhecimento profundo em CSS pra entender qual o motivo, alguém poderia me ajudar?

 

INTERNET EXPLORER

 

FIREFOX

 

O código CSS dos elementos da SearchForm é o seguinte:

/* ----------------------------------------------Search Form-------------------------------------*/

#topbar #search{
display:block;
float:right;
}

#topbar select{
display:block;
float:left;
width:210px;
height:auto;
margin:0 5px 0 0;
padding:5px;
color:#FFFFFF;
background-color:#003E61;
border:1px solid #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

}

#topbar input{
display:block;
float:left;
width:220px;
height:auto;
margin:0 5px 0 0;
padding:5px;
color:#FFFFFF;
background-color:#003E61;
border:1px solid #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

#topbar input#go{
float:right;
display:block;
width:50px;
height:auto;
margin:0 5px 0 0;
padding:5px;
color:#FFFFFF;
background-color:#003E61;
border:1px solid #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

 

 

Agradeço desde já.

[Guilherme Oderdenge 42]

Boa madrugada, Valéria.

 

Se funciona no Internet Explorer, mas não no Firefox, então temos um problema.

 

O seu CSS está, em sumo, desorganizado e possui propriedades desnecessárias, e mesmo que isso não venha ao caso, me sinto no dever de te notificar.

 

Mas então, vamos ao seu problema.

 

Tente remover as propriedades display das suas regras, ou seja, onde tiver "display: block;", remova e veja o que acontece.

 

Talvez isso seja o suficiente para você dominar o problema e então resolvê-lo.

[Giovani 104]

Valéria P., você tem um link pra postar pra galera?

 

Não use como base o DW par visualização, ele vai te enganar :grin:

... e no próprio Dreamweaver é mostrado do jeito certo...

[Diegus Miestro 21]

Se funciona no Internet Explorer, mas não no Firefox, então temos um problema.²

 

Bem, as vezes um reset CSS resolve.

 

http://meyerweb.com/eric/tools/css/reset/

 

Chame esse antes de todos os outros. Ele remove valores que os próprios navegadores inventam de colocar.