<option> que quebra layout apenas no firefox.

[Hanover 0]

Não sei porque isso ta acontecendo.

 

http://atlantic.sodavirtual.com.br/search-...rties/advanced/

 

Todas as páginas secundárias desse site tem a mesma estrutura.

A unica coisa que muda é o conteudo que fica dentro do div texto:

 

<div id="texto">

<form method="post" action="">

<fieldset>

<label>Type of prorpety</label>

<select>

<option>Please Select ... </option>

</select><br />

<label for="size">Size</label>

<input id="size" name="size" /><br />

</fieldset>

</form>

</div>

 

Aqui o layout quebrou apenas no firefox.

Nos ies, opera e safari (todos pra windows) não ocorreu o problema que teve no firefox.

 

O estranho é o seguinte.

O firefox so ta quebrando o layout quando eu coloco a tag <option> dentro do div.

Se eu tiro o <option> o layout fica certinho.

 

Isso é muito esquisito pq as outras páginas (ainda não as coloquei no ar) tem tabelas, listas, etc etc.

Esse problema so ocorreu no firefox e por conta desse maldito <option> que eu preciso usar dentro dos <select>

[Hanover 0]

Eu descobri uma forma de resolver o problema mas ainda não entendo a questão do layout bagunçar no firefox APENAS quando eu coloco a tag <option> dentro de um <select>.

 

Seguinte, eu me baseei no layout do http://www.revolucao.etc.br/ pra fazer essas duas colunas.

 

A da esquerda o conteudo nunca muda.

A da direita sempre muda, a ponto de expandir tanto (para baixo) que ultrapassa o bottom da coluna da esquerda.

 

Exemplo: http://atlantic.sodavirtual.com.br/the-area/brazil/

 

Então, pra coluna da esquerda continuar com o mesmo background até la embaixo eu fix o seguinte.

 

Crei um um div e joguei as colunas dentro dele:

<div id="wrap"><div id="coluna_direita"></div><div id="coluna_esquerda"></div></div>

o css do div wrap é o seguinte:

#wrap {	background-color: #01478C;	display:table;	margin:0 auto;	text-align:left;	width:68.071em;}

Esse display:table; é que faz o segurar background no firefox, opera e safari quando o div da direita ultrapassa o bottom da esquerda.

 

So que se eu coloco a tag <option> dentro do div coluna_esquerda o layout quebra apenas no firefox.

Mas se eu fasso isso eu desmarco o display:table do do div wrap o layout não quebra, mas ai o div coluna_esquerda deixa de expandir a cor do background quando o div coluna_direita expandi.

 

É dificil pra mim explicar essas coisas, mas espero que tenham entendido.