alinhamento no IE6 e 7

[Antonio Bilate 0]

Bom, antes de mais nada, saudações a povo do forum. Sou visitante assiduo do portal e sempre foi uma grande fonte de informações.

Nunca tive a curiosidade de clicar no forum para verificar a tonelada de informações que vocês compartilham aqui.

É muito bom começar a fazer parte de uma comunidade de pessoas, que pelo que eu pude ver na maioria dos tópicos, sempre solícitas a ajudar.

 

Infelizmente meu primeiro tópico não pode ser considerado uma efetiva contribuição, mas o problema de um pode ser o de outro né ?!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Então.. começando:

Eu fiz um site para um cliente, uma galeria, e fiz todos os teste no firefox, safari e IE7... tudo perfeito. Mas é claro que não podia deixar de lado o saudoso IE6... que está me fazendo perder alguns fios de cabelo.

 

o site é: www.raulhey.com

eu fiz uma imagem do site, montado de forma correta no FireFox: http://www.raulhey.com/siteOK.jpg

 

o que acontece no IE6 ?

- primeiro a barra que fica logo abaixo do cabeçalho do site, uma barra que é azul, verde ou marrom.. de acordo com o link aberto. Ela fica duplicada por algum motivo que desconheço completamente.

 

- a outra são os 2 DIVs do link gallery, eles tem seus tamanhos calculados de acordo com a tela da pessoa, para preencher a tela e o rodapé ficar no ponto certo do browser evitando scroll. No IE6 e no IE7 isso não acontece, eles ficam com tamanhos diferentes. O da esquerda calcula de forma correta mas o da direita não.

 

- os botões de link do rodapé da página(home, gallery, about), mudam de lugar quando passo com o mouse por cima. http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

 

- o rodapé fica com um tamanho diferente, abre uma barra cinza entre os botoes e a textura do fim da página... o que era pra ter 50px vira 71px..

 

Bom... acho que é só isso tudo. Se alguém puder me dar uma luz em qualquer um desses pontos já será de grande ajuda. Tenho gasto um bom tempo pesquisando na internet, já cheguei a usar alguns IE Hacks para testar..... e nada.

 

o link para os CSS:

http://www.raulhey.com/css/interface.css

http://www.raulhey.com/css/interfaceIE.css

 

Segue abaixo o trecho de calculo das dimensoes:

 

<script type="text/javascript">		// <![CDATA[				Ajax.Responders.register({			onLoading: function(){ Element.show('loading');},			onComplete: function(){ if(Ajax.activeRequestCount == 0){ Element.hide('loading'); } }		});				$('right').hide();				if(BrowserDetect.browser == 'IE') {			var heightUI = document.documentElement.clientHeight;			var widthUI = document.documentElement.clientWidth;			var heightF = (heightUI-195); // 55 212 = header + headerBar + Border + footer			$('main').setStyle({ height: heightF });						var heightLB = Math.floor(heightF-50);			var relative = widthUI*0.96;								$('rightBlock').setStyle({height: heightLB}); //setAttribute('style',heightrAttr);			$('leftBlock').setStyle({height: heightLB}); //setAttribute('style',heightRss);			$('container').setStyle({width: relative});		}		else{			var heightUI = window.innerHeight;			var widthUI = window.innerWidth;						var heightF = (heightUI-210); // 212 = header + headerBar + Border + footer			//var atrib = 'height:' + heightF + 'px';			$('main').setStyle({ height: heightF });						var heightLB = Math.floor(heightF-20);		}		var canvas = Math.round(widthUI*0.96);		if(canvas > 983){			var canvasTitle = Math.round(canvas*0.3);			var canvasImage = Math.round(canvas*0.7);		}		else {			var canvasImage = 750;		}		var par = 'widthUI=' + canvasImage;		var hedResp = new Ajax.Updater( 'headerResponse', '../headerMaker.php', { method: 'get', parameters: par });				var canvasAttr = canvas + "px";		var canvasTitleAttr = canvasTitle + "px";		var canvasImageAttr = canvasImage + "px";		$('header-image').setAttribute('style', 'background-image: url(../images/slices2/header-image-'+ canvasImage + '.jpg)');		$('header-name').setAttribute('style', 'width:' + canvasTitleAttr);		$('header-image').setAttribute('style', 'width:' + canvasImageAttr);				$('header-image').setStyle({'background-image': 'url(../images/slices2/header-image-' + canvasImage + '.jpg)' });				if(BrowserDetect.browser != 'Safari') {			$('header-name').setStyle({width: canvasTitle });			$('header-image').setStyle({width: canvasImage});		}				$('right').setStyle({width: '27%'});				var relative = widthUI*0.96;		var relativeAttr = 'width:' + relative + "px"; 		var heightGal = 'height:' + heightLB +'px';										var divList = document.getElementsByTagName('div');				document.getElementById('container').setAttribute('style',relativeAttr);				document.getElementById('leftBlock').setAttribute('style',heightGal);		document.getElementById('rightBlock').setAttribute('style',heightGal);				if($('container').getWidth() < 983) { $('container').setStyle({width: 983}); }		if($('left').getWidth() < 686) { $('left').setStyle({width: 686}); }		if($('right').getWidth() < 275) { $('right').setStyle({width: 275}); }		//if($('main').getHeight() < 560) { $('main').setStyle({height: 560}); }		if($('leftBlock').getHeight() < 510) { $('leftBlock').setStyle({height: 510}); }		if($('rightBlock').getHeight() < 510) { $('rightBlock').setStyle({height: 510}); }				var set = new Array();		var setId;......		 // ]]>		</script>

[Antonio Bilate 0]

Problema resolvido, tava dando confusão com lance de padding das DIVs... o IE calcula diferente, com era de se esperar...