[Resolvido] problemas com position no IE

dinhotaswolf · Julho 7, 2011

Olá pessoal, tenho um código que funciona bem em todos os navegadores, porém no IE não funciona.

O trecho abaixo é que está dando problema:

#mask {
position:relative;
left:0;
top:0;
background-color:#ffffff;
display:none;
z-index:1;
}

O trecho é uma mascara como a do lightbox. O original do código é position:absolute, funciona em todos os navegadores menos no IE que coloca a mascara na frente da imagem. Com position:fixed, funciona em todos os navegadores menos no IE que a mascara some. Com position:relative ou position:static, a mascara some em todos os navegadores.

Será que existe alguma maneira para que seja corrigido esse bug que dá quando apresentado no IE?

Fico grato por qualquer tipo de ajuda.

Ted k' · Julho 7, 2011

o bom é com absolute mesmo, o fato é que precisa de um z-index no box que irá aparecer em cima!

dinhotaswolf · Julho 7, 2011

Sim ele existe. Porém, como já dito ele não funciona.

Vou colocar o trecho completo:

#mask {
position:relative;
left:0;
top:0;
background-color:#ffffff;
display:none;
z-index:1;
}
#boxes .window {
position:absolute;
left:0;
top:0;
display:none;
z-index:2;
}

Esse é o elemento que deve aparecer na frente da mascara. Mas, somente não aparece na frente no IE, nos outros navegadores funciona normalmente com o position:absolute ou position:fixed.

Na real com position:fixed, o IE joga a mascara para baixo colocando a mascara no final da página. Com position:relative e position:static ele não some, ele também joga a mascara para o final da página só que em todos os navegadores.

Não faço ideia do que fazer.

Fico grato por qualquer ajuda.

Ted k' · Julho 8, 2011

Tem como disponibilizar via web esses códigos? Gostaria de analisar isso!

dinhotaswolf · Julho 8, 2011

Não sei se é isso que quer, mas vou disponibilizar aqui mesmo no fórum meu arquivo completo do CSS.

body {
margin:0;
padding:0;
background:#fff url(../imagens/background.gif);
text-align:center; /* hack para o IE */
}

#topo img {
width:775px;
height:199px;
}

#corpo {
width:775px;
padding: 2px;
margin: auto;
}

#sidebar {
width: 195px;
float: left;
position: relative;
}

#content {
width: 550px;
float: right; /* hack para o IE */
position: relative;
margin-left: 15px;
}
#content span {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ff0000;
text-align: center;
padding: 0px 0px 0px 0px;
}
#content h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #ff0000;
text-align: left;
padding: 0px 0px 0px 10px;
}
#content h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ff0000;
text-align: left;
padding: 0px 0px 0px 10px;
}
#content h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #ff0000;
text-align: left;
padding: 0px 0px 0px 10px;
}
#content h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #ff0000;
text-align: center;
padding: 0px 0px 0px 0px;
}
#content p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000080;
text-align: justify;
padding: 0px 10px 0px 10px;
}
#content p1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FF0000;
font-weight: bold;
}
#content li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000080;
text-align: left;
}
#content img {
border: 0px;
}

/* MENU */
#menu {
width: 200px;
margin-top: 0;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: #0FF;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li a {
text-decoration: none;
height: 32px;
 	voice-family: "\"}\""; 
 	voice-family: inherit;
 	height: 24px;
text-align:left;
}
#menu li a:link, #menu li a:visited {
color: #000080;
display: block;
background: url(../imagens/menu.gif);
padding: 8px 0 0 20px;
text-align:left;
}
#menu li a:hover {
color: #777;
background: url(../imagens/menu.gif) 0 -32px;
padding: 8px 0 0 25px;
text-align:left;
}
#menu li a:active {
color: #000080;
background: url(../imagens/menu.gif) 0 -64px;
padding: 8px 0 0 20px;
text-align:left;
}

/* CONTATOS */
#contatos {
text-align: center;
background: #D3F5D9;
}
#contatos p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000080;
font-weight: bold;
}
#contatos span{
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FF0000;
font-weight: bold;
}

#titulos-esq {
text-align: left;
background: #C8E8CD;
}

#titulos-esq h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-align: left;
font-weight: bold;
color: #ff0000;
margin: 5px 5px 5px 5px;
}

/* LINK azul */
a.linkazul:link {
color:#0033CC;
text-decoration:underline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a.linkazul:visited {
color:#0033CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a.linkazul:hover {
color:#ff0000;
text-decoration:underline;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a.linkazul:active {
color:#0033CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

/* RODAPE */
.rodape{ 
clear:both; 
width: 775px;
height: 35px;
line-height: 35px;
}
.rodape p{
color:#000080;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.rodape a:link {
color:#ff0000;
text-decoration:underline;
}
.rodape a:visited {
color:#ff0000;
text-decoration:none;
}
.rodape a:hover {
color:#000080;
text-decoration:underline;
}
.rodape a:active {
color:#ff0000;
text-decoration:none;
}

/* modal */
#mask {
position:absolute;
left:0;
top:0;
background-color:#ffffff;
display:none;
z-index:9000;
}
#boxes .window {
position:absolute;
left:0;
top:0;
display:none;
z-index:9999;
}
#boxes #dialog{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog0{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog1{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog2{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog3{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog4{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog5{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog6{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog7{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog8{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog9{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog10{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog11{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog12{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog13{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog14{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog15{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog16{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog17{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog18{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog19{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog20{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog21{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog22{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog23{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog24{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog25{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog26{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog27{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog28{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog29{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog30{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog31{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog32{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog33{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog34{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog35{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog36{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog37{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog38{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog39{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog40{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog41{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog42{
width:420px; 
min-height:420px;
background-color:#C8E8CD;
}
#boxes #dialog43{
width:420px; 
min-height:420px;
background-color:#D3F5D9;
}

Aí esta meu JS completo:

<!--
$(document).ready(function() {	

	$('a[name=modal]').click(function(e) {
		e.preventDefault();

		var id = $(this).attr('href');

		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		$('#mask').css({'width':maskWidth,'height':maskHeight});

		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	

		//Get the window height and width
		//var winH = 167;
		//var winW = 338;
		var winH = $(boxes).height();
		var winW = $(boxes).width()/2;

		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);

		$(id).fadeIn(2000); 

		//alert("Height="+winH+" width="+winW);
		//alert("maskHeight="+maskHeight+" maskWidth"+maskWidth+"\n\n Height="+winH+" width="+winW);
	});

	$('.window .linkazul').click(function (e) {
		e.preventDefault();

		$('#mask').hide();
		$('.window').hide();
	});		

	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			

});
-->

Era isso que queria?

Caso não, informe.

Fico grato pela sua atenção e ajuda.

Ted k' · Julho 9, 2011

Eu já usei isso, olha aqui:

http://tedk.com.br/projects/finococo/produtos.php?acesso=cadastro-01

Compare o HTML para ver se está igual ao meu, e veja também o CSS...

dinhotaswolf · Julho 12, 2011

Olá Ted K'!

Verifiquei seu código para ver o que poderia mudar no meu. Mudei algumas coisas de CSS que não afetaram muito. Percebi que a mascara e o tamanho da janela você define inline na página. Seu código JS é quase igual ao meu. Tentei implementar o seu código JS realizando alguns ajustes. Mas não funcionou em nenhum navegador. Acabei por perceber a diferença de versão do DOCTYPE e realizei a modificação no código. Este sim fez uma grande diferença. A modificação pode ser vista abaixo:

Antes estava assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Agora está assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Com o primeiro código funcionava em todos os outros navegadores menos no IE. Agora o IE esta funcionando normal, mas o FireFox e o Netscape pararam de funcionar. Não estão mais apresentando a imagem.

Vou postar aqui os códigos completos para teste e o link para verificar:

CSS:

body { margin:0; padding:0; background:#fff url(../imagens/background.gif); text-align:center; /* hack para o IE */ }

#topo img { width:775px; height:199px; }

#corpo { width:775px; padding: 2px; margin: auto; }

#sidebar { width: 195px; float: left; position: relative; }

#content { width: 550px; float: right; /* hack para o IE */ position: relative; margin-left: 15px; }
#content span { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #ff0000; text-align: center; padding: 0px 0px 0px 0px; }
#content h1 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #ff0000; text-align: left; padding: 0px 0px 0px 10px; }
#content h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold;	color: #ff0000;	text-align: left; padding: 0px 0px 0px 10px; }
#content h3 { font-family: Arial, Helvetica, sans-serif;	font-size: 12px; font-weight: bold; color: #ff0000;	text-align: left; padding: 0px 0px 0px 10px; }
#content h4 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #ff0000;	text-align: center; padding: 0px 0px 0px 0px; }
#content p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000080; text-align: justify; padding: 0px 10px 0px 10px; }
#content p1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #FF0000; font-weight: bold; }
#content li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000080; text-align: left; }
#content img { border: 0px; }

/* MENU */
#menu { width: 200px; margin-top: 0; font-family: Arial, Helvetica, sans-serif;	font-weight: bold; background: #0FF; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li a { text-decoration: none; height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-align:left; }
#menu li a:link, #menu li a:visited { color: #000080; display: block; background: url(../imagens/menu.gif); padding: 8px 0 0 20px; text-align:left; }
#menu li a:hover { color: #777; background: url(../imagens/menu.gif) 0 -32px; padding: 8px 0 0 25px; text-align:left; }
#menu li a:active { color: #000080; background: url(../imagens/menu.gif) 0 -64px; padding: 8px 0 0 20px; text-align:left; }

/* CONTATOS */
#contatos { text-align: center; background: #D3F5D9; }
#contatos p{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000080; font-weight: bold; }
#contatos span{ font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #FF0000; font-weight: bold; }

#titulos-esq { text-align: left; background: #C8E8CD; }

#titulos-esq h1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-align: left; font-weight: bold; color: #ff0000; margin: 5px 5px 5px 5px; }

/* LINK azul */
a.linkazul:link { color:#0033CC; text-decoration:underline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
a.linkazul:visited { color:#0033CC; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
a.linkazul:hover { color:#ff0000; text-decoration:underline; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
a.linkazul:active {	color:#0033CC; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

/* RODAPE */
.rodape{ clear:both; width: 775px; height: 35px; line-height: 35px; }
.rodape p{ color:#000080; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-align: center; }
.rodape a:link { color:#ff0000; text-decoration:underline; }
.rodape a:visited { color:#ff0000; text-decoration:none; }
.rodape a:hover { color:#000080; text-decoration:underline; }
.rodape a:active { color:#ff0000; text-decoration:none; }

/* modal */
#mask { position:absolute; left:0; top:0; z-index:9000; background:#D3F5D9; display: none; opacity: 80%;}
#boxes .window { position:absolute; left:0; top:0; margin: 5% 0 0 0; width:420px; min-height:420px; display:none; z-index:9999; padding:10px; }
#boxes #dialog{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog0{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog1{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog2{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog3{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog4{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog5{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog6{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog7{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog8{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog9{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog10{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog11{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog12{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog13{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog14{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog10{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog16{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog17{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog18{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog19{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog20{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog21{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog10{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog23{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog24{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog25{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog26{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog27{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog28{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog29{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog30{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog31{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog32{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog33{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog34{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog35{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog36{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog37{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog38{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog39{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog40{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog41{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog42{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}
#boxes #dialog43{ width:420px; min-height:420px; background-color:#C8E8CD; float:left; padding: 10px 10px 10px 10px;}

JS:

<!--
/*
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var winH = $(window).height();
var winW = $(window).width(); 

$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(1000);	
$('#mask').fadeTo("slow",0.9);	 
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000); 

$('.window .linkazul').click(function (e){
	e.preventDefault();

	$('#mask').hide();
	$('.window').hide();
});		
*/

$(document).ready(function() {	

	$('a[name=modal]').click(function(e) {
		e.preventDefault();

		var id = $(this).attr('href');

		var maskHeight = $(document).height();
		var maskWidth = $(window).width();

		$('#mask').css({'width':maskWidth,'height':maskHeight});

		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	

		//Get the window height and width
		//var winH = 167;
		//var winW = 338;
		var winH = $(boxes).height();
		var winW = $(boxes).width()/2;

		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);

		$(id).fadeIn(2000); 

		//alert("Height="+winH+" width="+winW);
		//alert("maskHeight="+maskHeight+" maskWidth"+maskWidth+"\n\n Height="+winH+" width="+winW);
	});

	$('.window .linkazul').click(function (e) {
		e.preventDefault();

		$('#mask').hide();
		$('.window').hide();
	});		

	/*	
		$('#mask').click(function () {
			$(this).hide();
			$('.window').hide();
		});			
	*/			
});
-->

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>PRODUTOS - FELTEC</title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="language" content="pt-br" />
	<meta name="title" content="" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="Page-Topic" content="" />
	<meta name="robots" content="index, follow" />
	<meta name="copyright" content="e-YourSolutions.com" />
	<meta name="author" content="e-YourSolutions.com" />
	<meta name="url" content="http://www.e-yoursolutions.com" />
	<meta name="cache-control" content="Public" />
	<meta name="Publisher-Email" content="vendas@e-yoursolutions.com" />

	<link rel="shortcut icon" href="ico/logo-feltec.ico" />
	<link href="./css/estilos.css" rel="stylesheet" type="text/css">

	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
	<script type="text/javascript" src="js/modal.js"></script> 
</head>

<body>
	<!-- INICIO TOPO -->
		<div id="topo">
			<img border="0" src="imagens/topo-feltec.gif" usemap="#Map">
			<!-- 
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" height="200" width="776">
				<param name="movie" value="swf/topo-feltec.swf">
				<param name="quality" value="high">
				<param name="menu" value="false">
				<param name="wmode" value="transparent">
				<embed src="swf/topo-feltec.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent" height="200" width="776">
			</object> 
			-->
		</div>
	<!-- FIM TOPO -->

	<!-- INICIO CORPO -->
		<div id="corpo">
			<div id="sidebar">
				<!-- INICIO CONTATOS -->
					<table border="0" width="180" height="30">
						<tr>
							<td id="titulos-esq">
								<h1>MENU</h1>
							</td>
						</tr>
						<tr>
							<td id="titulos-esq">
								<!-- INICIO MENU -->
									<div id="menu">
										<ul>
											<li><a href="index.php" title="HOME">HOME</a></li>
											<li><a href="empresa.php" title="EMPRESA">EMPRESA</a></li>
											<li><a href="servicos.php" title="SERVIÇOS">SERVIÇOS</a></li>
											<li><a href="produtos.php" title="PRODUTOS">PRODUTOS</a></li>
											<li><a href="orcamento.php" title="ORÇAMENTO">ORÇAMENTO</a></li>
										</ul>
									</div>
								<!-- FIM MENU -->
							</td>
						</tr>
						<tr>
							<td id="titulos-esq">
								<h1>CONTATOS</h1>
							</td>
						</tr>
						<tr>
							<td id="contatos">
								<p>
									vendas@feltec.com.br
								</p>
								<p>
									<span>TELEFONES:</span><br>
									(011) 2748-0089<br>
									(011) 2076-8398<br>
									(011) 2076-8899
								</p>
								<p>
									<span>FAX:</span>
									(011) 2076-3625
								</p>
								<div align="center">
									<table border="1" bordercolorlight="#CCCCCC" bordercolordark="#000000">
										<tr>
											<td id="contatos">
												<p>
													CEL: (011) 8345-8782<br>
													<span>José Alves (FERRUGEM)</span>
												</p>
											</td>
										</tr>
									</table>
								</div>
								<p>
									<span>ENDEREÇO</span><br>
									R: Marques de Valença, 549<br>
									Móoca - São Paulo - SP<br>
									CEP: 03182-040
								</p>
							</td>
						</tr>
						<tr>
							<td id="titulos-esq">
								<h1>Mapa de Localização</h1>
							</td>
						</tr>
						<tr>
							<td id="contatos">
								<iframe width="195" height="215" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=Rua+Marqu%C3%AAs+de+Valen%C3%A7a,+549,+S%C3%A3o+Paulo,+Brasil&aq=3&sll=37.0625,-95.677068&sspn=37.052328,86.572266&ie=UTF8&hq=&hnear=R.+Marqu%C3%AAs+de+Valen%C3%A7a,+549+-+M%C3%B3oca,+S%C3%A3o+Paulo,+03182-040,+Brasil&ll=-23.559321,-46.590756&spn=0.000655,0.001321&t=h&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=pt-BR&geocode=&q=Rua+Marqu%C3%AAs+de+Valen%C3%A7a,+549,+S%C3%A3o+Paulo,+Brasil&aq=3&sll=37.0625,-95.677068&sspn=37.052328,86.572266&ie=UTF8&hq=&hnear=R.+Marqu%C3%AAs+de+Valen%C3%A7a,+549+-+M%C3%B3oca,+S%C3%A3o+Paulo,+03182-040,+Brasil&ll=-23.559321,-46.590756&spn=0.000655,0.001321&t=h&z=14" target="_blank"><center><font color="#0000FF" face="Arial">Exibir mapa ampliado</font></center></a></small>
							</td>
						</tr>
					</table>
				<!-- FIM CONTATOS -->				
			</div>

			<div ID="content">
				<!-- INICIO CONTEUDO -->
					<table cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td bgcolor="#D3F5D9">
								<img src="imagens/spacer.gif" height="10" width="10">
							</td>
						</tr>
						<tr>
							<td bgcolor="#D3F5D9">
								<h1>Produtos</h1>

								<table width="500" border="1" align="center">
									<tr>
										<td>
											<p>
												Atendemos todos os ramos industriais e entregamos correias de linha em 24 horas.
												<br><br>
												Abaixo estão imagens de produtos <p1>(Correias e Polias) FELTEC</p1> para demonstrar toda nossa qualidade.
												<br><br>
												Clicando na imagem, você poderá ver a imagem em tamanho maior e uma breve descrição sobre o produto em questão.
												Confira e não perca a oportunidade, faça seu <a href="orcamento.php" class="linkazul" title="ORÇAMENTO">orçamento</a> 
												já.
											</p>
										</td>
									</tr>
								</table>

								<br>

								<div id="boxes" align="center">
									<div style="float:left; padding: 0 0 0 15px;">
										<span>
											Galeria de imagens<br>
											Polias
										</span>
										<br>

										<a href="#dialog" name="modal"><img src="galeria/Untitled-1.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-1.gif" width="400" height="400" alt="" title="">
											<p>teste imagem teste imagem teste imagem teste imagem teste imagem teste imagem teste imagem</p>
											<p>teste imagem</p>
											<p>teste imagem</p>
											<p>teste imagem</p>
											<p>teste imagem</p>
											<p>teste imagem <a href="http://www.e-yoursolutions.com/modelos/feltec/orcamento.php" class="linkazul">teste imagem</a></p>

										</div>

										<a href="#dialog0" name="modal"><img src="galeria/Untitled-2.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog0" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-2.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog1" name="modal"><img src="galeria/Untitled-3.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog1" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-3.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog2" name="modal"><img src="galeria/Untitled-4.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog2" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-4.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog3" name="modal"><img src="galeria/Untitled-5.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog3" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-5.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>

									<div style="float:right; padding: 0 15px 0 0;">
										<span>
											Galeria de imagens<br>
											Planas de Transmissão
										</span>
										<br>

										<a href="#dialog4" name="modal"><img src="galeria/Untitled-6.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog4" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-6.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog5" name="modal"><img src="galeria/Untitled-7.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog5" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-7.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog6" name="modal"><img src="galeria/Correia em V.png" width="45" height="45" alt="" title=""></a>
										<div id="dialog6" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correia em V.png" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog7" name="modal"><img src="galeria/CORREIA ESPECIAL COM FUROS.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog7" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL COM FUROS.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog8" name="modal"><img src="galeria/CORREIA ESPECIAL COM TALISCAS.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog8" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL COM TALISCAS.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>


									<div style="float:left; padding: 0 0 0 15px;">
										<br>
										<span>
											Galeria de imagens<br>
											Gráfica
										</span>
										<br>

										<a href="#dialog9" name="modal"><img src="galeria/CORREIA ESPECIAL REVESTIDA.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog9" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL REVESTIDA.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog10" name="modal"><img src="galeria/Correias Sincronizadas 2.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog10" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correias Sincronizadas 2.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog11" name="modal"><img src="galeria/Correias Sincronizadas.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog11" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correias Sincronizadas.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog12" name="modal"><img src="galeria/correias-sincronizadoras-708515s0.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog12" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/correias-sincronizadoras-708515s0.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog13" name="modal"><img src="galeria/Sincronizadas com revestimento 2.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog13" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Sincronizadas com revestimento 2.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>

									<div style="float:right; padding: 0 15px 0 0;">
										<br>
										<span>
											Galeria de imagens<br>
											Transportadoras
										</span>
										<br>

										<a href="#dialog14" name="modal"><img src="galeria/Untitled-1.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog14" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-1.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog15" name="modal"><img src="galeria/Untitled-2.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog15" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-2.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog16" name="modal"><img src="galeria/Untitled-3.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog16" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-3.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog17" name="modal"><img src="galeria/Untitled-4.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog17" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-4.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog18" name="modal"><img src="galeria/Untitled-5.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog18" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-5.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>


									<div style="float:left; padding: 0 0 0 15px;">
										<br>
										<span>
											Galeria de imagens<br>
											Trabalhos em Madeira
										</span>
										<br>

										<a href="#dialog19" name="modal"><img src="galeria/Untitled-6.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog19" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-6.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog20" name="modal"><img src="galeria/Untitled-7.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog20" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-7.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog21" name="modal"><img src="galeria/Correia em V.png" width="45" height="45" alt="" title=""></a>
										<div id="dialog21" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correia em V.png" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog22" name="modal"><img src="galeria/CORREIA ESPECIAL COM FUROS.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog22" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL COM FUROS.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog23" name="modal"><img src="galeria/CORREIA ESPECIAL COM TALISCAS.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog23" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL COM TALISCAS.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>

									<div style="float:right; padding: 0 15px 0 0;">
										<br>
										<span>
											Galeria de imagens<br>
											Têxtil
										</span>
										<br>

										<a href="#dialog24" name="modal"><img src="galeria/CORREIA ESPECIAL REVESTIDA.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog24" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL REVESTIDA.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog25" name="modal"><img src="galeria/Correias Sincronizadas 2.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog25" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correias Sincronizadas 2.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog26" name="modal"><img src="galeria/Correias Sincronizadas.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog26" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correias Sincronizadas.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog27" name="modal"><img src="galeria/correias-sincronizadoras-708515s0.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog27" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/correias-sincronizadoras-708515s0.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog28" name="modal"><img src="galeria/Sincronizadas com revestimento 2.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog28" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Sincronizadas com revestimento 2.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>


									<div style="float:left; padding: 0 0 0 15px;">
										<br>
										<span>
											Galeria de imagens<br>
											Química, Alimentícia e <br> Farmacêutica
										</span>
										<br>

										<a href="#dialog29" name="modal"><img src="galeria/Untitled-1.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog29" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-1.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog30" name="modal"><img src="galeria/Untitled-2.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog30" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-2.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog31" name="modal"><img src="galeria/Untitled-3.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog31" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-3.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog32" name="modal"><img src="galeria/Untitled-4.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog32" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-4.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog33" name="modal"><img src="galeria/Untitled-5.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog33" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-5.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>

									<div style="float:right; padding: 0 15px 0 0;">
										<br>
										<span>
											Galeria de imagens<br>
											Redontas em Poliuretano <br> (polycord)
										</span>
										<br>

										<a href="#dialog34" name="modal"><img src="galeria/Untitled-6.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog34" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-6.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog35" name="modal"><img src="galeria/Untitled-7.gif" width="45" height="45" alt="" title=""></a>
										<div id="dialog35" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Untitled-7.gif" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog36" name="modal"><img src="galeria/Correia em V.png" width="45" height="45" alt="" title=""></a>
										<div id="dialog36" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correia em V.png" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog37" name="modal"><img src="galeria/CORREIA ESPECIAL COM FUROS.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog37" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL COM FUROS.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog38" name="modal"><img src="galeria/CORREIA ESPECIAL COM TALISCAS.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog38" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL COM TALISCAS.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>

									<div style="float:center;">
										<span>
											<font color="#D3F5D9">Galeria de Corrias</font>
											<br>
											Galeria de imagens<br>
											Correias Especiais com Revestimento:
										</span>
										<br>

										<a href="#dialog39" name="modal"><img src="galeria/CORREIA ESPECIAL REVESTIDA.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog39" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/CORREIA ESPECIAL REVESTIDA.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog40" name="modal"><img src="galeria/Correias Sincronizadas 2.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog40" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correias Sincronizadas 2.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog41" name="modal"><img src="galeria/Correias Sincronizadas.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog41" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Correias Sincronizadas.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog42" name="modal"><img src="galeria/correias-sincronizadoras-708515s0.jpg" width="45" height="45" alt="" title=""></a>
										<div id="dialog42" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/correias-sincronizadoras-708515s0.jpg" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>

										<a href="#dialog43" name="modal"><img src="galeria/Sincronizadas com revestimento 2.JPG" width="45" height="45" alt="" title=""></a>
										<div id="dialog43" class="window">
											<a href="#" class="linkazul" alt="FECHAR" title="FECHAR">Fechar [X]</a>
											<h2>Titulo</h2>
											<img src="galeria/Sincronizadas com revestimento 2.JPG" width="400" height="400" alt="" title="">
											<p>teste imagem</p>
										</div>
									</div>
								</div>
							</td>
						</tr>
						<tr>
							<td bgcolor="#D3F5D9">
								<img src="imagens/spacer.gif" height="10" width="10">
							</td>
						</tr>
					</table>
				<!-- FIM CONTEUDO -->
			</div>

			<!-- INICIO RODAPÉ -->
				<div class="rodape">
					<p>
						Copyright © 2006 / 2011 - Todos os direitos reservados - Produzido, Hospedado e Mantido por:
						<a href="http://www.e-yoursolutions.com/" target="_blank">
							e-YourSolutions.com
						</a>
					</p>
				</div>
			<!-- FIM RODAPÉ -->
		</div>
	<!-- FIM CORPO -->

	<!-- Máscara para cobrir a tela -->
	<div id="mask"></div>

	<map name="Map" id="Map">
		<area shape="poly" coords="8,173,8,164" href="index.php" title="Voltar a página inicial" />
		<area shape="poly" coords="7,174,7,164,42,162,40,107,164,107,121,71,129,40,151,14,226,15,252,37,243,70,216,108,341,108,340,160,380,163,379,174" href="index.php" title="Voltar a página inicial" />
	</map>
</body>
</html>

O link para a página onde a estou testando na WEB é:

http://www.e-yoursolutions.com/modelos/feltec/produtos.php

O que mais devo fazer?

Fico grato por qualquer ajuda.

dinhotaswolf · Julho 14, 2011

Olá pessoal,

solucionei o problema com um cambalacho, mas agora funciona em todos os navegadores.

A solução foi cria três páginas para produtos. Uma para o IE com o DOCTYPE que ele exige, outra para os outros navegadores com o outro DOCTYPE e outra para os usuários que não possuem JavaScript. (os DOCTYPE's a que me refiro estão em alguma mensagem acima).

Para que funcionasse criei o código JavaScript dentro de um arquivo PHP e fiz a chamada através do link "PRODUTOS/' em todas as páginas, leia abaixo:

<link href="./css/estilos.css" rel="stylesheet" type="text/css">
<noscript>
	<br><br><br><br><br><br><br><br><br><br>

	<table width="500" border="1" align="center">
		<tr>
			<td align="center" bgcolor="D3F5D9">
				<br>
				<font style="color:#FF0000; font-weight:bold; font-family: Arial, Helvetica, sans-serif; font-size: 24px;">
					Mensagem importante !!!
				</font>
				<br><br>
				<font style="color:#FF0000; font-weight:bold; font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
					Se você esta visualizando essa mensagem é porque seu navegador não suporta JavaScript ou ele não está ativado. Por isso, você não poderá utilizar algumas funcionalidades da página de produtos.<br><br>
					<a href="produtos-sem-js.php"><font style="color:#0033CC; text-decoration:underline; font-family: Arial, Helvetica, sans-serif; font-size: 24px;">Ir para a página de produtos</font></a><br><br>
					Agradecemos sua compreensão.
				</font>
				<br><br>
			</td>
		</tr>
	</table>
</noscript>
<script type="text/javascript">  
	<!--
		var browser=navigator.appName;  
		var b_version=navigator.appVersion;  
		var version=parseFloat(b_version);  

		if (browser !== "Microsoft Internet Explorer") {
			window.location.href="produtos-ff-ns.php";
		} else {
			window.location.href="produtos.php";
		}
	-->
</script>

Com isso, dou esse tópico como finalizado.

Grato por qualquer ajuda.

Arquivado

[Resolvido] problemas com position no IE

Recommended Posts

dinhotaswolf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinhotaswolf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinhotaswolf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ted k' 126

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinhotaswolf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dinhotaswolf 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante