[Resolvido] Problema layout Chrome

[DirceuM 0]

Bom dia pessoal;

Seguinte, desenvolvendo para .NET tive um problema no Google Chrome para uma Tabela que fica inserida dentro de uma fieldset.

O conteúdo da tabela expande para a lateral, superando a largura da fieldset. No entando a largura da fieldset não acompanha essa expansão do conteúdo, ocasionando uma anomalia visual incomoda.

IMAGEM

TRECHO HTML

<form>
<fieldset>
<div style="width:800px; height:300px"></div>
<table class="gridview">
 <tr>
   <td>DADOS</td>
   <td>DADOS</td>
   <td>DADOS</td>
   <td>DADOS</td>
   <td>DADOS</td>
   <td>DADOS</td>
   <td>DADOS</td>
 </tr>
 <tr>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
 <tr>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
</table>
</fieldset>
</form>

 

CSS

* {
margin:0;
padding:0;
list-style:none;
vertical-align:middle;
}

html, body, form {height:100%}
body {text-align:center; font-family:Arial, sans-serif; font-size:62.5%}
* html #login form {height:100%}

fieldset{
   background-color:#EAEAEA;
width:25%;
display:table;
padding:4px;
float:left}
div {
background-color:#000;
width:auto !important}
.gridview {
   font-size:1.4em;
   clear:both;
   margin:10px 0;
   border:medium none !important;
   border-collapse:collapse; background-color:#00CC66}
.gridview tr td {vertical-align:top; padding:5px; border-left:1px dashed #ccc}

 

A <div> que está no HTML também estava com o mesmo problema da <table>.

Resolvi no css passando a propriedade

width:auto !important

No entanto isso não funcionou no caso da <table>

 

Agradeço a ajuda.

[GustavoMelo 0]

É só você apagar o width:25% da fieldset.

[DirceuM 0]

Bom dia.

Olá Gustavo!

Seguinte, eu não posso mexer no valor da largura do fieldset por questões de layout, ela é padrão em várias telas do meu sistema.

[André do Vale 76]

Bom dia.

Olá Gustavo!

Seguinte, eu não posso mexer no valor da largura do fieldset por questões de layout, ela é padrão em várias telas do meu sistema.

 

Se não pode mexer na largura, porque quer que ele aumente de acordo com os filhos?

 

As soluções mais óbvias pro caso são:

 

- Retirar essa largura fixa;

- Trocar a largura fixa para largura mínima (min-width);

- Colocar overflow hidden nos filhos para que não excedam o tamanho;

- Quebrar a linha com white-space, ou quebrar a palavra com word-wrap (CSS3).

[DirceuM 0]

Como disse André, não posso alterar o valor da largura na fieldset.

 

Gostaria que o Chrome tivesse o mesmo comportamento do IE e Mozilla para esses casos, ou seja: A largura da fieldset acompanha o conteúdo da tabela. É apenas isso que preciso.

 

- Retirar essa largura fixa; (Infelizmente isso não seria opção)

- Colocar overflow hidden nos filhos para que não excedam o tamanho; (Não posso omitir os dados da tabela)

- Quebrar a linha com white-space, ou quebrar a palavra com word-wrap (CSS3). (Não posso comprometer a leiturabilidade do conteudo da tabela, quebrando as linhas, palavras, etc)

 

Irei testar essa possibilidade:

- Trocar a largura fixa para largura mínima (min-width);

[André do Vale 76]

Gostaria que o Chrome tivesse o mesmo comportamento do IE e Mozilla para esses casos, ou seja: A largura da fieldset acompanha o conteúdo da tabela. É apenas isso que preciso.

 

Mas dessa maneira, basta pensar em como serão renderizados os elementos. Se você tem um valor fixo de largura para o pai, os filhos irão se restringir nesta largura. Porém, se os filhos não conseguirem se retrair, eles irão sobrepor (por cima, literalmente), o pai.

 

Se outros browser não renderizam assim, são eles que estão fazendo errado. :thumbsup:

[Cassyn 0]

Testei com min-width e funcionou.

 

A mudança foi aqui:

 

min-width:25%;

[DirceuM 0]

André e Cassyn, o min-width resolveu o meu problema.

 

André, com relação aos browsers, acho que todos estamos de acordo que eles deveriam renderizar da mesma maneira. Infelizmente na prática não é isso que ocorre.

Devemos, portanto, nos adequar a essas situações afim de resolver os problemas e desafios de layout;

 

Obrigado e abraços.