Texto para fora do div

[Raphael Elias 0]

Boa tarde pessoal,

 

Estou com um problema onde um texto extenso sai do div no IE enquanto no FF fica normal.

 

Segue o CSS do div e da tabela que o mesmo se encontra:

div.caixa_vertical {
	border:2px solid #333333;
	display:-moz-grid;
	font-weight:bold;
	height:auto;
	min-height:35px;
	margin:0;
	padding:1px;
	text-align:center;
	vertical-align:middle;
	white-space:normal;
	/* ERRO NO IE
	width:auto;
	min-width:150px;
	*/
	width:150px;
}
table.organo_vertical {
	background-color:white;
	border:0 none;
	border-collapse:collapse;
	border-spacing:0;
	text-align:center;
}
table.organo_vertical td {
	border:0 none;
	height:20px;
	padding:0;
	text-align:left;
	white-space:nowrap;
	width:auto;
	/*min-width:150px;*/
	vertical-align:top;
}

Desculpe se já existe tópicos semelhantes, mas não os encontrei pela procura do fórum.

 

Tentei usar as propriedades width:auto; e min-width:150px; porém como os divs estão dentro de uma tabela, ocorre erro no IE.

 

Existe algum método para que ao invés do texto sair do div, o div aumente de largura?

 

Obrigadão!

[brcontainer 16]

mas ele sai para a direita ou para baixo?

ponha um link para analizar

[Raphael Elias 0]

Coloquei uma imagem de exemplo silverfox. Obrigado pela dica!

 

mas ele sai para a direita ou para baixo?

ponha um link para analizar

[brcontainer 16]

mas põe o link e ou o código HTML e CSS tambem ^^

ae nós poderemos ver =D

[Raphael Elias 0]

Código postado também silverfox! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

mas põe o link e ou o código HTML e CSS tambem ^^

ae nós poderemos ver =D

[brcontainer 16]

Bem como no Ie6 min-width não funciona, seu problema deve ser com o IE7, então vou testar no Ie7(estou instalando ^^).

[Raphael Elias 0]

Se eu colocar o min-width e width:auto, acontece o erro que postei no link http://forum.imasters.com.br/index.php?showtopic=305606

 

Veleu pela atenção silverfox.

[brcontainer 16]

mas então você resolveu?

Espero que sim ^^

[Raphael Elias 0]

Não silverfox! Se eu utilizo o min-width dá o problema do link que mandei..se utilizo width definido ele fica certo mas o texto fica pra fora do div como a figura.

 

Só falta esse detalhe para entregar o projeto.

 

mas então você resolveu?

Espero que sim ^^

[brcontainer 16]

Bem tenho três alternativas, primeira defina somente o WIDTH com o valor padrão que você deseja, tipo:

div.caixa_vertical{
	width:150px;
}

assim o texto irá para BAIXO.

 

Ou aumente a largura do caixa_vertical até um tamanho que você sabe que não irá o texto.

div.caixa_vertical{
	width:220px;/*pode variar aqui*/
}

ou tambem usar overflow para criar um scroll(barra de rolagem):

div.caixa_vertical{
	width:150px;
	overflow:auto;
}

[Raphael Elias 0]

A segunda opção seria a melhor, mas o conteúdo do div é dinâmico.

 

No FF ele fica perfeito, o div aumenta automaticamente. Só no IE acontece isso. Já tive esse problema em outro projeto, e até agora não encontrei a solução.

 

nao existe um hack para min-width para o ie será?

 

Bem tenho três alternativas, primeira defina somente o WIDTH com o valor padrão que você deseja, tipo:

div.caixa_vertical{
	width:150px;
}

assim o texto irá para BAIXO.

 

Ou aumente a largura do caixa_vertical até um tamanho que você sabe que não irá o texto.

div.caixa_vertical{
	width:220px;/*pode variar aqui*/
}

ou tambem usar overflow para criar um scroll(barra de rolagem):

div.caixa_vertical{
	width:150px;
	overflow:auto;
}

[brcontainer 16]

Sim, na seção de artigos eu postei um tópico para que funcione no IE(mas é no IE6):

http://forum.imasters.com.br/index.php?showtopic=258273

 

Você tambem pode tentar javascript com DOM.

[Alessandro Gonçalves 2]

Olá use no css:

 

word-wrap: break-word;

 

 

[HooDryd 0]

 

Olá use no css:

word-wrap: break-word;

 

 

 

 

PERFEITO!