alinhamento middle IE6(gambiarra)

[brcontainer 16]

Moderadores se eu tiver colocado este tópico em sessão errada, alertemem obrigado

 

[solução]

ATUALIZADO (reduzi os DIVs e modifiquei o codigo, agora não importa aonde estiver o DIV ele alinha central)

 

Funciona perfeitamente no IE, FF e opera (ainda num vi nenhum BUG)

Nem é presciso mudar a altura do #Middle

por que eu estou usando clientHeight

 

estudando CSS + JAVASCRIT bolei isso(para quando não se usar "position"):

 

<style>#caixaA{	background:#cc0000;	width:500px;	height:600px;	display:table-cell;	vertical-align:middle;}#Middle{	_width:expression(document.getElementById("caixaA").clientWidth-3);	border:2px #0f0f0f solid;	_position: relative;	_top:expression((document.getElementById("caixaA").clientHeight - document.getElementById("Middle").clientHeight) /2 + "px");}</style><a href="#" onclick="alert(document.getElementById('caixaA').style.top +','+ document.getElementById('caixaA').scrollTop)">Ver posição</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="caixaA">		<div id="Middle">			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto<img src="foto" width="200">			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto			texto texto texto texto	</div></div>

 

E esse para caso sua DIV use position:absolute, assim não ocorrera erro no FIREFOX

<style>#caixaA{	border: 1px solid black;	display:table-cell;	width:200px;	height:400px;	vertical-align:middle;	position: absolute;	top: 100px;						left: 400px;}#caixaB{	border: 1px solid black;	width:200px;	height:400px;	display:table-cell;	vertical-align:middle;}#Middle{	_width:expression(document.getElementById("caixaA").clientWidth-3);	_position: relative;	_top:expression((document.getElementById("caixaA").clientHeight - document.getElementById("Middle").clientHeight) /2 + "px");	text-align: center;}</style><div id="caixaA">		<div id="caixaB">		<div id="Middle">			Primeira Linha de Texto<br>			Segunda linha<br>			<img src="foto" width="50"><br>			Terceira Linha<br>			Ultima Linha	</div>	</div></div>

Sem o action ativado no IE

 

Com Action ativado no IE

 

qualquer BUG retorne para mim

[FabricioGomes 0]

silverfox, ainda temos um problema....

 

assim nao funciona no Firefox, no IE continua... o primeiro DIV, se for posistion:absolute; nao funciona no FF...

 

<style>#caixaA{	border: 1px solid black;	display:table-cell;	_display:block;	width:200px;	height:400px;	vertical-align:middle;	position: absolute;				<-- nao funciona no FF se tiver essa linha...	top: 100px;					 	left: 400px;}#Middle{	_width:expression(document.getElementById("caixaA").clientWidth-3);	_position: relative;	_top:expression((document.getElementById("caixaA").style.top  + document.getElementById("caixaA").clientHeight - document.getElementById("Middle").clientHeight) /2 + "px");	text-align: center;}</style><div id="caixaA">		<div id="Middle">			Primeira Linha de Texto<br>			Segunda linha<br>			<img src="foto" width="50"><br>			Terceira Linha<br>			Ultima Linha	</div></div>

[hinom 5]

fiz testes nos browsers: - Internet Explorer - Netscape - FireFox - Opera - Maxthon - Safari todos tiveram o mesmo comportamento menos o Safari.No Safari o texto ficou alinhado como nos outros, mas o link S e as quebras de linha ficaram abaixo do texto.

[brcontainer 16]

FabricioGomes CASO VENHA A USAR POSTION:ABSOLUTE; http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

faça assim:

<style>#caixaA{	border: 1px solid black;	display:table-cell;	width:200px;	height:400px;	vertical-align:middle;	position: absolute;	top: 100px;						left: 400px;}#caixaB{	border: 1px solid black;	width:200px;	height:400px;	display:table-cell;	vertical-align:middle;}#Middle{	_width:expression(document.getElementById("caixaA").clientWidth-3);	_position: relative;	_top:expression((document.getElementById("caixaA").clientHeight - document.getElementById("Middle").clientHeight) /2 + "px");	text-align: center;}</style><div id="caixaA">		<div id="caixaB">		<div id="Middle">			Primeira Linha de Texto<br>			Segunda linha<br>			<img src="foto" width="50"><br>			Terceira Linha<br>			Ultima Linha	</div>	</div></div>

[tygo 0]

a galera de javascript deve brincar com isso na boa mas deixem-me tentar...

 

[va-i567fo] - Vertical-align baseado em nome de classe funcionando para ie5/5.5/6/7, ff e opera.

Não é preciso setar height do elemento q tem/recebe o conteúdo.

Não importa se é elemento de bloco ou linha. Não tem display:block.

http://www.solutionshop.com.br/webdeleve/v...67-ff-opera.htm

 

 

[va-i67fo-redim] - Vertical-align baseado em nome de id e de classe. funcionando para ie6/7, ff e opera - redimensionável com teste "online" para ie6/7 e ff

Permite que o conteúdo expanda a altura do elemento que o contém e continue centralizado verticalmente dentro de um outro elemento pai.

Mesmo que o elemento filho exceda a altura do elemento pai o javascript altera o tamanho do elemento pai para que ele comporte o elemento filho e dá ao elemento filho uma margem superior e inferior em relação ao pai.

http://www.solutionshop.com.br/webdeleve/v...mensionavel.htm

[brcontainer 16]

Minha nova solução

 

com esse código você pode alternar entre posição Vertical ou horizontal ou as duas

mechendo nesses códigos

conteudo.style.top = Calculoh;

conteudo.style.left = Calculow;

 

CSS:

<style>#conte{position:absolute;top:50px;left:50px;background:#f0f0f0;height:200px;}#Middle{height:1000px;background:#fc0;}</style>

js:

<script>function Centraliza(){//troque aqui o elemento pode-se usar tbm document.bodyvar elemento = document.getElementById("Middle");var conteudo = document.getElementById("conte");var Calculoh = (elemento.offsetTop +(elemento.clientHeight - conteudo.clientHeight) /2);var Calculow = (elemento.offsetLeft + (elemento.clientWidth - conteudo.clientWidth) /2);conteudo.style.top = Calculoh;conteudo.style.left = Calculow;}</script>

HTML:

<body onload="Centraliza()"><br /><br /><br /><br /><br /><br /><br /><div id="Middle">	<div id="conte">	sdsdsd	</div></div>

para alinha ao centro da página:

<style>#conte{position:absolute;top:50px;left:50px;background:#f0f0f0;height:200px;}</style><script type="text/javascript">function Centraliza(){var elemento = document.body;var conteudo = document.getElementById("conte");var Calculoh = (elemento.offsetTop +(elemento.clientHeight - conteudo.clientHeight) /2);var Calculow = (elemento.offsetLeft + (elemento.clientWidth - conteudo.clientWidth) /2);conteudo.style.top = Calculoh;conteudo.style.left = Calculow;}</script><body>	<div id="conte">	sdsdsd	</div><script type="text/javascript">Centraliza();</script></body>

agora trabalhando com mais JAVASCRIPT e ao inves de onload coloquei para chamar logo após o DIV, assim ele carrega mais rapido ;) (sem presisar carregar imagens)