Ir para conteúdo

POWERED BY:

Arquivado

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

stview

Div sobrepondo conteudo nao rola no IE

Por , em Desenvolvimento frontend

Recommended Posts

stview    0

stview
Postado

Estou fazendo um site que disponibiliza textos na web, e o usuários pode comentar o texto, tipo no imasters.

 

Minha idéia era:

Clicou no botão para comentar, abre uma div 100% que sobrepõe o conteúdo com transparência, e sobre ele um outro div com os campos do form e textos com dicas para os campos.

 

No FF ta 100%, mas no IE ta uma IEca...

 

Segue o link pra ter uma idéia:

TESTE

 

/* EDIT */

O problema nao esta em esconder, mas em mostrar no IE, se a página tem rolagem o IE ignora, e só mostra o div no topo e nao ta 100% ...

Vejam o link.

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

position : fixed;_position : absolute;Já tentei todas as possibilidades e não consegui ...

Compartilhar este post

Link para o post
Compartilhar em outros sites

vagner.net    0

vagner.net
Postado

Deixa o DISPLAY DEFAULT e o POSITION como ABSOLUTE.Se não funcionar tenta criar essa DIV com Javascript DOM na hora que for exibir!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

Isso já esta, por isso postei o link, pra poder ver o código./**/O problema nao esta em esconder, mas em mostrar o div.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Já tentou fuçar no código do lightbox? Eu acho que pra ficar toda a tela mesmo soh com JS...[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

vagner.net    0

vagner.net
Postado

Pra fazer isso que você quer não precisa nem trabalhar com a propriedade DISPLAY, só POSITION e VISIBILITY resolve.

 

Esse é o teu código HTML adaptado, com uma DIV de teste que preenche a tela toda no IE, FF e Opera.

 

<script>  	function abrir(){		var a = document.getElementById('d1');		a.style.visibility = 'visible';	}	function fechar(){		var a = document.getElementById('d1');		a.style.visibility = 'hidden';	}</script><html><head></head><body><div style="position:absolute;width:100%;height:100%;background-color:#11bbcc;visibility:hidden;" id=d1>	<input value=FECHAR type=button onclick=fechar(); /></div> <input type=button onclick=abrir(); value=ABRIR /><table width="700" height="100%" border="0" align="center" cellpadding="0" cellspacing="10" bgcolor="#FFFFFF">  <tr>	<td id="TITULO"><strong><font size="2">TEXTOS</font></strong></td>  </tr>  <tr>	<td valign="top" id="CONTEUDO">	  <h1><div id="DATA">01/01/2001</div>	  <div id="NOME">TITULO</div>	  </h1>	  	  <div id="SCORE">10</div>	  <div id="VIEWS">50</div>	  	  <div id="TEXTOS">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce congue. Proin justo mi, convallis quis, ornare a, malesuada ut, dui.		Pellentesque vel eros. Cras aliquam. Proin id nibh a velit ultricies congue. Etiam massa ligula, pellentesque eu, gravida eu, mollis ut, pede. Donec		aliquet eros eget metus. Etiam scelerisque tristique sapien. Phasellus egestas pede quis augue commodo ultricies. Duis erat. Nullam aliquet urna quis		dolor. Fusce placerat pulvinar mauris. Vestibulum sit amet ante. Maecenas feugiat diam eu purus. Duis ac nulla adipiscing dui bibendum pulvinar. In		ante pede, tempor at, porta vitae, vehicula id, leo.		<p>Aliquam varius, lorem vitae rhoncus sodales, magna arcu aliquet velit, non ultricies justo lorem a sem. Ut vel justo. Vivamus a erat a libero rutrum		  scelerisque. Pellentesque eu enim. Maecenas sagittis, ante non vehicula vulputate, velit lacus condimentum sem, ut porta magna ipsum id dolor. Morbi		  varius dignissim nulla. Vestibulum rutrum tincidunt elit. Vivamus sapien. Morbi at sem ut dolor congue tempor. Nulla ornare, lectus ac tincidunt		  aliquet, tellus mi vulputate nibh, ac egestas dui justo quis felis. Cras ac nisi a nulla ullamcorper interdum. Vestibulum a urna vel nibh gravida		  consectetuer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>		<p>Duis commodo orci. Quisque et mi congue risus nonummy tincidunt. Integer luctus turpis. Nunc rhoncus nisl ac nisl. Nulla bibendum arcu nec est		  sodales porta. Proin at lorem. Nulla id risus. Quisque et erat. Proin consequat laoreet leo. Morbi vitae risus. Ut justo erat, tempor ac, auctor		  at, consectetuer venenatis, dolor.</p>		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing		  elit. Curabitur pede dui, tristique a, blandit suscipit, viverra et, eros. Aenean interdum lacus a nisi. Nullam sit amet tellus. Sed porta, ligula		  vel luctus gravida, dui quam ultricies nisi, a tincidunt ante eros et nisi. Ut est tellus, dapibus iaculis, sollicitudin vitae, placerat quis, tellus.		  Quisque nec eros eget arcu tempus scelerisque. Aenean tristique lorem ac ligula. Mauris porta nisi ac felis. Donec tempor accumsan mauris. Fusce		  metus neque, iaculis nec, rutrum ac, bibendum a, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.		  Quisque malesuada. Vestibulum eu odio. Nulla placerat, elit ac feugiat elementum, mauris tellus accumsan risus, et tincidunt nisl dui quis dui.		  Quisque porta, nibh et varius ultrices, libero nisl porta mi, quis consectetuer dui lorem eu quam. Sed ut velit ut felis sodales luctus. </p>		<p>Cras arcu nisl, porta non, dignissim in, scelerisque malesuada, eros. Nullam id augue. Donec venenatis. Vestibulum nibh risus, volutpat ut, tempor		  nec, placerat nec, tellus. Donec nisi massa, imperdiet vel, sagittis ut, scelerisque ac, leo. Duis sapien sapien, vehicula sit amet, imperdiet pretium,		  elementum nec, orci. Nulla libero. Aenean accumsan ante in est. Mauris vehicula dolor at purus sollicitudin molestie. Donec mattis, velit a viverra	  dignissim, urna lacus semper ipsum, sed aliquam dui elit a nisi. Duis a nisl. Quisque eget ligula ut massa suscipit tristique.</p>	  </div>	</td>  </tr>  <tr>	<td id="FEATURES"><div id="VOTE"><a href="javascript:;" onClick="LYR_ShowHelp('', 'AL_COMENT')">Comentar</a></div></td></tr>	<tr><td id="COMENTS"><div class='ncoment'>[ 14/05/2007 14:38:05 ]   <strong>Ricardo Gil</strong><br>		<em>djlhnfo aio nmkpo jijiha<br /><br />sa dpifjpijfioajpjm opiuh omhj jap<br />a sgfk ampokm paokmgk</em></div><div class='ncoment'>[ 14/05/2007 14:37:40 ]   <strong>Ricardo Gil</strong><br>		<em>djlhnfo aio nmkpo jijiha<br /><br />sa dpifjpijfioajpjm opiuh omhj jap<br />a sgfk ampokm paokmgk</em></div><div class='ncoment'>[ 14/05/2007 14:33:23 ]   <strong>Ricardo Gil</strong><br>		<em>aaa<br />bbb</em></div><div class='ncoment'>[ 14/05/2007 14:32:18 ]   <strong>Ricardo Gil</strong><br>		<em>teste<br />testaaa</em></div><div class='ncoment'>[ 14/05/2007 14:24:30 ]   <strong>Ricardo Gil</strong><br>		<em>1<br />2</em></div>	</td></tr>	<tr>	  <td height="1" align="center"><input name="voltar" type="button" value="« voltar" onClick="history.back();">	  </td>  </tr></table></body></html>

Sem usar o DISPLAY!

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

Eu comecei igual, mas role a página vertical, o div nao fica com 100%, dai fui mudando ate chegar onde esta hj.

Compartilhar este post

Link para o post
Compartilhar em outros sites

vagner.net    0

vagner.net
Postado

A DIV fica 100% na tela e não na página, nem no FF você faz isso... a diferença é que o FF permite layout FIXO e o IE não...

 

E pra você não repetir oq é obvio, ja deixo claro que eu sei que o seu protótipo exibe o conteúdo atrás da tranparencia da DIV...

 

Mas como quem não tem colírio usa óculos escuro, da pra fazer tranquilo jogando o conteúdo pra memória via Javascript/DOM e recuperando depois.

 

<script>	var cloneNode;  	function getChild(node){				for(i=0; node.childNodes.length;i++){			if(node.childNodes[i].nodeType == 1) return node.childNodes[i]		}	}  	function abrir(){		var a = document.getElementById('d1');		var b = document.getElementById('d2');						a.style.visibility = 'visible';		cloneNode = b.cloneNode(true);						b.removeChild(getChild(b));	}	function fechar(){		var a = document.getElementById('d1');		var b = document.getElementById('d2');				a.style.visibility = 'hidden';				b.appendChild(cloneNode);	}	</script><html><head></head><body><div style="position:absolute;width:98%;height:96%;background-color:#11bbcc;visibility:hidden;" id=d1>	<input value=FECHAR type=button onclick=fechar(); /></div> <input type=button onclick=abrir(); value=ABRIR /><div id="d2">	<table id="t1" width="700" height="100%" border="0" align="center" cellpadding="0" cellspacing="10" bgcolor="#FFFFFF">	  <tr>		<td id="TITULO"><strong><font size="2">TEXTOS</font></strong></td>	  </tr>	  <tr>		<td valign="top" id="CONTEUDO">		  <h1><div id="DATA">01/01/2001</div>		  <div id="NOME">TITULO</div>		  </h1>		  		  <div id="SCORE">10</div>		  <div id="VIEWS">50</div>		  		  <div id="TEXTOS">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce congue. Proin justo mi, convallis quis, ornare a, malesuada ut, dui.			Pellentesque vel eros. Cras aliquam. Proin id nibh a velit ultricies congue. Etiam massa ligula, pellentesque eu, gravida eu, mollis ut, pede. Donec			aliquet eros eget metus. Etiam scelerisque tristique sapien. Phasellus egestas pede quis augue commodo ultricies. Duis erat. Nullam aliquet urna quis			dolor. Fusce placerat pulvinar mauris. Vestibulum sit amet ante. Maecenas feugiat diam eu purus. Duis ac nulla adipiscing dui bibendum pulvinar. In			ante pede, tempor at, porta vitae, vehicula id, leo.			<p>Aliquam varius, lorem vitae rhoncus sodales, magna arcu aliquet velit, non ultricies justo lorem a sem. Ut vel justo. Vivamus a erat a libero rutrum			  scelerisque. Pellentesque eu enim. Maecenas sagittis, ante non vehicula vulputate, velit lacus condimentum sem, ut porta magna ipsum id dolor. Morbi			  varius dignissim nulla. Vestibulum rutrum tincidunt elit. Vivamus sapien. Morbi at sem ut dolor congue tempor. Nulla ornare, lectus ac tincidunt			  aliquet, tellus mi vulputate nibh, ac egestas dui justo quis felis. Cras ac nisi a nulla ullamcorper interdum. Vestibulum a urna vel nibh gravida			  consectetuer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>			<p>Duis commodo orci. Quisque et mi congue risus nonummy tincidunt. Integer luctus turpis. Nunc rhoncus nisl ac nisl. Nulla bibendum arcu nec est			  sodales porta. Proin at lorem. Nulla id risus. Quisque et erat. Proin consequat laoreet leo. Morbi vitae risus. Ut justo erat, tempor ac, auctor			  at, consectetuer venenatis, dolor.</p>			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing			  elit. Curabitur pede dui, tristique a, blandit suscipit, viverra et, eros. Aenean interdum lacus a nisi. Nullam sit amet tellus. Sed porta, ligula			  vel luctus gravida, dui quam ultricies nisi, a tincidunt ante eros et nisi. Ut est tellus, dapibus iaculis, sollicitudin vitae, placerat quis, tellus.			  Quisque nec eros eget arcu tempus scelerisque. Aenean tristique lorem ac ligula. Mauris porta nisi ac felis. Donec tempor accumsan mauris. Fusce			  metus neque, iaculis nec, rutrum ac, bibendum a, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.			  Quisque malesuada. Vestibulum eu odio. Nulla placerat, elit ac feugiat elementum, mauris tellus accumsan risus, et tincidunt nisl dui quis dui.			  Quisque porta, nibh et varius ultrices, libero nisl porta mi, quis consectetuer dui lorem eu quam. Sed ut velit ut felis sodales luctus. </p>			<p>Cras arcu nisl, porta non, dignissim in, scelerisque malesuada, eros. Nullam id augue. Donec venenatis. Vestibulum nibh risus, volutpat ut, tempor			  nec, placerat nec, tellus. Donec nisi massa, imperdiet vel, sagittis ut, scelerisque ac, leo. Duis sapien sapien, vehicula sit amet, imperdiet pretium,			  elementum nec, orci. Nulla libero. Aenean accumsan ante in est. Mauris vehicula dolor at purus sollicitudin molestie. Donec mattis, velit a viverra		  dignissim, urna lacus semper ipsum, sed aliquam dui elit a nisi. Duis a nisl. Quisque eget ligula ut massa suscipit tristique.</p>		  </div>		</td>	  </tr>	  <tr>		<td id="FEATURES"><div id="VOTE"><a href="javascript:;" onClick="LYR_ShowHelp('', 'AL_COMENT')">Comentar</a></div></td></tr>		<tr><td id="COMENTS">	<div class='ncoment'>[ 14/05/2007 14:38:05 ]   <strong>Ricardo Gil</strong><br>			<em>djlhnfo aio nmkpo jijiha<br />	<br />	sa dpifjpijfioajpjm opiuh omhj jap<br />	a sgfk ampokm paokmgk</em></div>	<div class='ncoment'>[ 14/05/2007 14:37:40 ]   <strong>Ricardo Gil</strong><br>			<em>djlhnfo aio nmkpo jijiha<br />	<br />	sa dpifjpijfioajpjm opiuh omhj jap<br />	a sgfk ampokm paokmgk</em></div>	<div class='ncoment'>[ 14/05/2007 14:33:23 ]   <strong>Ricardo Gil</strong><br>			<em>aaa<br />	bbb</em></div>	<div class='ncoment'>[ 14/05/2007 14:32:18 ]   <strong>Ricardo Gil</strong><br>			<em>teste<br />	testaaa</em></div>	<div class='ncoment'>[ 14/05/2007 14:24:30 ]   <strong>Ricardo Gil</strong><br>			<em>1<br />	2</em></div>		</td></tr>		<tr>		  <td height="1" align="center"><input name="voltar" type="button" value="« voltar" onClick="history.back();">		  </td>	  </tr>	</table></div></body></html>

Fiz de qq jeito e usei qq variável, se servir pra você adapta isso e transforma em uma CLASSE...

 

PS: É Crossbrowser, funciona no IE, FF e Ópera...

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strinct.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Div posição fixa</title>			<style type="text/css">html{	overflow: hidden;}body{	overflow: auto;	font: 76% verdana, arial, sans-serif;}html,body{	height: 100%;	margin: 0px;	padding: 0px;}.transparencia{	position: fixed !important;	position: absolute;	top: 0px;	left: 0px;	z-index: 10;	width: 100%;	height:100%;	-moz-opacity : 0.6;	opacity: 0.6;	color: #000000;	background-color: #E0E0E0;	}*.transparencia{	filter: alpha(opacity = 60);}</style></head><body>	<div id="div1" class="transparencia"></div>	<p>asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />	asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br />asfdasfdasd<br /></p></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

Ahhh muleke ... É casca qnd você procura uma solução e fica só nela, nem tenta fazer de outra maneira, chega uma hora que trava.Não tinha nem pensado em fazer isso.Valeu vagner.net !!

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

1 solução já é boa, 2 então!!!hunternh, sua solução funcionou perfeitamente, já adaptei e esta 100%.Mas o mais importante, pq funcionou?Fiquei com algumas duvidas tipo:- Pq declarar 2 vezes o position?- Pq declarar separado o filter:alpha?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Em relação ao position é o seguinte:

 

position: fixed !important; -> navegadores complacentes

 

position: absolute; -> já da pra saber pra quem...

 

e o filter separado foi por gosto mesmo.

 

Agora o motivo principal por ter funcionado está aqui:

 

html{	overflow: hidden;}body{	overflow: auto;	font: 76% verdana, arial, sans-serif;}

Faça alguns testes modificando o overflow para ver o que acontece.

Compartilhar este post

Link para o post
Compartilhar em outros sites

stview    0

stview
Postado

hunternh,Surgiu outro problema, estou usando isso em outro projeto que possui background no body, dai ele esta fixando o bg e rolando o conteudo./**/O problema acima eu não resolvi, mas mas consegui o resultado que queria tirando o bg do html e colocando num div ...O problema agora é, se eu usar um div com width:100% o scroll some ...

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