Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Red_Noze

Problema com css no IE

Por , em Desenvolvimento frontend

Recommended Posts

Red_Noze    0

Red_Noze
Postado

Olá,

 

Estou um problema no IE.

 

Tenho um layout com duas colunas: menu e conteúdo.

 

Porém quando o tamanho do conteúdo passa do limite da tela o conteúdo é jogado para baixo.

 

Tem um exemplo online no endereço: www.isacvelozo.com/ex/exemplo.html

 

Imagem Postada

 

Abaixo segue o código

 

/* CSS Document */body{	margin:0; background:#FFF; min-width:400px; font:12px Verdana, Arial, Helvetica, sans-serif;}/* TOPO */#topo {	background:#e1e1e1 repeat-x left top; height:100px; padding:0; margin:0; }/* CORPO */#corpo {	margin:5px 0;}#esquerda {	float:left; width:190px; background:#009900; margin:0 0 5px 0; padding:0}#centro {	margin:0 10px 0 200px; min-height:300px; padding:5px; background:#f0f0f0; width:auto; }#centro * {	/*padding: 0 20px;*/ width:10;}/* ESQUERDA */#esquerda h1 {	font:bold 12px/25px Verdana, Arial, Helvetica, sans-serif; text-align:center; background: url(../imagens/bg/topo_menu.jpg) #CCCCCC; border-bottom:1px solid #e1e1e1; margin:0;}#esquerda a {	font:12px Verdana, Arial, Helvetica, sans-serif; background:#009900; border-bottom:1px solid #0066CC; display:block; color:#FFFFFF; font-weight:bold; display:inline; padding:5px 0 5px 10px; clear:both; float:left; width:180px; margin:0; cursor:"hand"; text-decoration:none;}#esquerda a:hover, #esquerda hover {	background:#566891; cursor:pointer; color:#FFFFFF; cursor:"hand";}/*#esquerda a.pai, #esquerda .pai{	background:#566891; border-bottom:1px solid #0066CC; display:block; color:#FFFFFF; font-weight:bold;}*//* SUB-MENU */.sub_menu{	position:absolute; left:190px; z-index:1; }#inclusao {	top:257px; }#consulta {	top:282px;}#download {	top:307px;}.sub_menu {	width:190px;}.sub_menu a {	font:12px Verdana, Arial, Helvetica, sans-serif; text-align:left; background:#0099CC; border-bottom:1px solid #0066CC; display:block; text-indent:10px; text-decoration:none; color:#FFFFFF; padding:5px 0; width:180px;}/*.sub_menu a {	font:12px Verdana, Arial, Helvetica, sans-serif; text-align:left; background:#33CCCC; border-bottom:1px solid #0066CC; display:block; text-indent:10px; text-decoration:none; color:#FFFFFF; padding:5px 0;}*/.sub_menu a:hover {	background:#66CCFF; color:#009900;}/* TEXTOS */#titulo_pagina {	font:bold 15px/30px Verdana, Arial, Helvetica, sans-serif; border-bottom:1px solid #009900;text-indent:15px;  color:#009900;}p {	margin:10px 5px; text-align:justify; text-indent:20px; }/* TABELAS */table.listagem {	border-collapse:collapse; /*width:95%;*/ border:1px solid #0066CC;}table.listagem tr td {	border:1px solid #0066CC;}table.listagem tr th { 	padding:3px; font:12px Verdana, Arial, Helvetica, sans-serif; background:#009900; color:#FFFFFF; font-weight:bold; border:1px solid #0066CC;}table.listagem tr th img { 	vertical-align:bottom;}table.listagem tr td { 	padding:3px; font:12px Verdana, Arial, Helvetica, sans-serif; background:#e1e1e1;}/* RODAPÉ */#rodape {	background:#e1e1e1; height:28px; text-align:center; font:11px/28px Arial, Helvetica, sans-serif;}/* CSS Document */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="css/exemplo.css"></head><body><!--Menu --><iframe name="isub_menu" id="isub_menu" frameBorder=0 scrolling="no" style="position:absolute; display:none; background:#666666"></iframe><div class="sub_menu" id="inclusao" style="display:none;" onmouseover="java script:verSubMenu(this,'inclusao')" onmouseout="java script:ocultarSubMenu(this,'inclusao')"><!--a href="#" onmouseover="java script:verSubMenu(this,'inclusao')">Acervo Paleontológico</a--><a href="paginas/aflora.html" target="iframe">Afloramentos</a><a href="http://geobank-dese/pls/cprm/Geocron.Cons_geocronologia" target="iframe">Datações Geocronológicas</a><a href="http://geobank-dese/pls/cprm/geobank.Estrutural.Cons_provincia" target="iframe">Estrutural</a><a href="http://geobank-dese/pls/cprm/geoambiental.Geoambiental.consultar" target="iframe">Geoambiental</a><a href="#">Geoquímica</a><a href="paginas/lito.html" target="iframe">Litoestratigrafia</a><a href="#">Recursos Minerais</a></div><div class="sub_menu" id="consulta" style="display:none;" onmouseover="java script:verSubMenu(this,'consulta')" onmouseout="java script:ocultarSubMenu(this,'consulta')">	<a href="#">Web Map</a>	<a href="#">Mapas Indice</a>	<a href="#">Projetos</a></div><div class="sub_menu" id="download" style="display:none;" onmouseover="java script:verSubMenu(this,'download')" onmouseout="java script:ocultarSubMenu(this,'download')">	<a href="#">Arquivos Vetoriais</a>	<a href="#">Manuais</a>	<a href="#">Programas</a></div><!-- Fim Menu --><!-- Topo --><div id="topo">	Topo</div><!-- Corpo --><div id="corpo">	<div id="esquerda">		<h1>Menu Principal</h1>		<a href="paginas/boas_vindas.html" target="iframe" class="pai">Página Inicial</a>		<a href="paginas/apresentacao.html" target="iframe" class="pai">Apresentação</a>		<a class="pai" onmouseover="java script:verSubMenu(this,'inclusao')" onmouseout="java script:ocultarSubMenu(this,'inclusao')">Inclusão/Alteração</a>		<a class="pai" onmouseover="java script:verSubMenu(this,'consulta')" onmouseout="java script:ocultarSubMenu(this,'inclusao')">Consultas</a>		<a class="pai" onmouseover="java script:verSubMenu(this,'download')" onmouseout="java script:ocultarSubMenu(this,'download')">Downloads</a>	</div>		<div id="centro" style="border:1px solid">		<div id="titulo_pagina">Título</div>		<br/>		<div style=" background:#999999"> 		</div>		<div >		<table class="listagem" width="98%" align="center">		  <tr>			<th>Teste</th>		  </tr>		  <tr>			<td>Teste</td>		  </tr>		</table>		<br>		<table class="listagem" width="100%" align="center" >		  <tr>			<th>Teste</th>		  </tr>		  <tr>			<td>Testedhsjghjkfdghkj fdgf dgs dgfdyyyyyyuuuuuuuuuuuuuuuuuuuuuyyuuuuuuuucasa</td>		  </tr>		</table>		</div>	</div></div>	<!-- Rodapé --><div id="rodape">	Rodapé</div><script>var height;for ( var i=0; i < div.length; i++ ) {	if ( div[i].id == "centro" ) {		height = div[i].offsetHeight;	}}for ( var i=0; i < div.length; i++ ) {	if ( div[i].id == "esquerda" ) {		div[i].style.height = height;	}}</script></body></html>
Agradeço antecipadamente

Compartilhar este post

Link para o post
Compartilhar em outros sites

xavrim    0

xavrim
Postado

Oiii...

 

Em vez de tabela que é para dados tabulares (formulario, calendário...) coloquei duas DIVS (Titulo e texto)

 

Oia:

 

<div id="conteudo"></div><div id="titulo">Título</div><div id="texto">Teste</div><div id="titulo_2">Título</div><div id="texto_2">Texto</div>

Repare que a DIV conteúdo que vai conter as novas DIVS onde era as tabelas.

 

Código CSS

 

#titulo, #titulo_2{	background-color:#339900;	width:100%;	height:24px;}#texto, texto_2{	width:100%;	height:auto;}

Só que o conteúdo vai aumentando como você mesmo falou, so que tem umas maneiras de bular este aumento sem ter que preocupar.

 

Faux Columns

 

Espero ter ajudado... Até mais

 

Há, uma última observação: Zeri alguns elementos. Coloque isso no começo do seu código CSS.

*{	margin:0 auto;	padding:0;	list-style:none;	vertical-align:middle;	text-decoration:none;	font-style:normal;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Acrescente semântica no código, sem div-mania:

<div id="conteudo">

<h1>
Título
</h1>

<p id="texto">
Teste
</p>

<h2>
Título
</h2>

<p id="texto_2">
Texto
</p>

</div>

 

Só uma sugestão http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito