O site desalinha no Firefox, se tem Div

Scherer · Fevereiro 8, 2011

Pessoal,

Estou tendo um problema num site que estou desenvolvendo no Dreamweaver. Ele tem uma Div na homepage, que deve estar centralizada. Tudo bem, ela está. Mas uma das páginas internas tem uma tabela, que deve estar também centralizada e tem as mesmas medidas que a Div da Home. Mas elas não ficam iguais, ao dar preview no Firefox. No Explorer e no Chrome tudo OK, isso só acontece no Firefox. Já observei isso também em outros sites - não meus - mas que visitei na web. Alguém sabe dizer como resolvo? Obrigado!

alebae · Fevereiro 8, 2011

Olá,

Você poderia passar o endereço da página ou código para analisarmos melhor o problema?

Scherer · Fevereiro 8, 2011

Claro que sim! Olha, é um desses 'freebies' que eu baixei e estou adaptando às minhas necessidades.

O html da página index.html segue abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
   <head>
       <title>Airlung Compressores de Alta Pressão</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="description" content="Airlung Compressores de Alta Pressão. 100% nacional. O mais moderno, robusto e confiável do mercado." />
       <meta name="keywords" content="Airlung, Compressor, Compressores, Limeira, Ar respirável, mergulho, cilindro, segurança, CIPA, Nitrogênio, bombeiros, Hélio, Claudio Araujo, Alta Pressão, óleo sintético, filtro, filtro de ar, Rodabrás, Ar comprimido"/>
       <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
       <style>
           *{
               margin:0;
               padding:0;
           }
           body{
font-family:Arial;
padding-top:0;
background:#FFF9DF url(title.png) no-repeat top center;
background-color: #FFF;
background-image: url();
           }
           a.back{
               background:transparent url(back.png) no-repeat 0px 0px;
               position:absolute;
               width:150px;
               height:27px;
               outline:none;
               top:2px;
               right:0px;
           }
           .reference{
               margin:20px auto;
               width:600px;
               padding:20px;
           }
           .reference p a{
               text-transform:uppercase;
               text-shadow:1px 1px 1px #fff;
               color:#666;
               text-decoration:none;
               font-size:10px;

           }
           .reference p a:hover{
               color:#333;
           }
       </style>
       <!--[if lte IE 6]>
            <link rel="stylesheet" href="css/styleIE6.css" type="text/css" media="screen"/>
       <![endif]-->
   </head>
<body>
       <div id="content">
         <div id="menuWrapper" class="menuWrapper bg1">
     <ul class="menu" id="menu">
                   <li class="bg1" style="background-position:0 0;">
                       <a id="bg1" href="#">A EMPRESA</a>
                       <ul class="sub1" style="background-position:0 0;">
                           <li><a href="empresa.html">QUEM SOMOS</a></li>
                           <li><a href="clientes.html">ALGUNS CLIENTES</a></li>
                           <li><a href="sist_gestao.html">SISTEMA DE GESTÃO DA QUALIDADE</a></li>
                       </ul>
                   </li>
                   <li class="bg1" style="background-position:-266px 0px;">
                       <a id="bg2" href="#">PRODUTOS</a>
                       <ul class="sub2" style="background-position:-266px 0;">
                           <li><a href="al7002.html">AL 7002</a></li>
                           <li><a href="al7003.html">AL 7003</a></li>
                       </ul>
                   </li>
                   <li class="last bg1" style="background-position:-532px 0px;">
                       <a id="bg3" href="#">SERVIÇOS</a>
                       <ul class="sub3" style="background-position:-266px 0;">
                           <li><a href="sma.html">SISTEMA DE MANUTENÇÃO AIRLUNG (SMA)</a></li>
                           <li><a href="padrao01.html">CONTATO</a></li>
                       </ul>
                   </li>
               </ul>
           </div>

           <div class="reference">
             <p> </p>
</div>
       </div>
       <!-- The JavaScript -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       <script type="text/javascript" src="jquery.bgpos.js"></script>
	<script type="text/javascript">
           $(function() {
               /* position of the <li> that is currently shown */
               var current = 0;

			var loaded  = 0;
			for(var i = 1; i <4; ++i)
				$('<img />').load(function(){
					++loaded;
					if(loaded == 3){
						$('#bg1,#bg2,#bg3').mouseover(function(e){

							var $this = $(this);
							/* if we hover the current one, then don't do anything */
							if($this.parent().index() == current)
								return;

							/* item is bg1 or bg2 or bg3, depending where we are hovering */
							var item = e.target.id;

							/*
							this is the sub menu overlay. Let's hide the current one
							if we hover the first <li> or if we come from the last one,
							then the overlay should move left -> right,
							otherwise right->left
							 */
							if(item == 'bg1' || current == 2)
								$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
									$(this).find('li').hide();
								});
							else
								$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
									$(this).find('li').hide();
								});

							if(item == 'bg1' || current == 2){
								/* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
								$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
								move(1,item);
							}
							else{
								/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
								$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
								move(0,item);
							}

							/*
							We want that if we go from the first one to the last one (without hovering the middle one),
							or from the last one to the first one, the middle menu's overlay should also slide, either
							from left to right or right to left.
							 */
							if(current == 2 && item == 'bg1'){
								$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
							}
							if(current == 0 && item == 'bg3'){
								$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
							}


							/* change the current element */
							current = $this.parent().index();

							/* let's make the overlay of the current one appear */

							$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
								$(this).find('li').fadeIn();
							});
						});
					}	
				}).attr('src', 'images/'+i+'.jpg');


               /*
               dir:1 - move left->right
               dir:0 - move right->left
                */
               function move(dir,item){
                   if(dir){
                       $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
                       $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                       $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
                           $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                       });
                   }
                   else{
                       $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
                           $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                       });
                       $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                       $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
                   }
               }
           });
       </script>
   </body>
</html>




Agora, o style.css:





.menuWrapper{
   font-family: "Trebuchet MS", Arial, sans-serif;;
   font-size: 15px;
   font-style: normal;
   font-weight: normal;
   text-transform:uppercase;
   letter-spacing: normal;
   line-height: 1.45em;
   position:relative;
   margin:20px auto;
   height:542px;
   width:797px;
   background-position:0 0;
   background-repeat:no-repeat;
   background-color:transparent;
}
ul.menu{
   list-style:none;
   width:797px;
}
ul.menu > li{
   float:left;
   width:265px;
   height:542px;
   border-right:1px solid #777;
   background-repeat:no-repeat;
   background-color:transparent;
}
ul.menu > li.last{
   border:none;
}
.bg1{
   background-image: url(../images/1.jpg);
}
.bg2{
   background-image: url(../images/2.jpg);
}
.bg3{
   background-image: url(../images/3.jpg);
}
ul.menu > li > a{
   float:left;
   width:265px;
   height:50px;
   margin-top:450px;
   text-align:center;
   line-height:50px;
   color:#ddd;
   background-color:#333;
   letter-spacing:1px;
   cursor:pointer;
   text-decoration:none;
   text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
   list-style:none;
   float:left;
   margin-top:-180px;
   width:100%;
   height:110px;
   padding-top:20px;
   background-repeat:no-repeat;
   background-color:transparent;
}
ul.menu > li ul li{
   display:none;
}
ul.menu > li ul.sub1{
   background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
   background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
   background-image:url(../images/bg3sub.png);
}
ul.menu > li ul li a{
   color:#fff;
   text-decoration:none;
   line-height:30px;
   margin-left:20px;
   text-shadow:1px 1px 1px #444;
   font-size:11px;
}
ul.menu > li ul.sub1 li{
   display:block;
}
ul.menu > li ul li a:hover{
   border-bottom:1px dotted #fff;
}



E finalmente o jquery.bgpos.js:





(function($) {
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
	var oldCurCSS = jQuery.curCSS;
	jQuery.curCSS = function(elem, name, force){
		if(name === 'background-position'){
			name = 'backgroundPosition';
		}
		if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){
			return oldCurCSS.apply(this, arguments);
		}
		var style = elem.style;
		if ( !force && style && style[ name ] ){
			return style[ name ];
		}
		return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force);
	};
}

var oldAnim = $.fn.animate;
$.fn.animate = function(prop){
	if('background-position' in prop){
		prop.backgroundPosition = prop['background-position'];
		delete prop['background-position'];
	}
	if('backgroundPosition' in prop){
		prop.backgroundPosition = '('+ prop.backgroundPosition;
	}
	return oldAnim.apply(this, arguments);
};

function toArray(strg){
	strg = strg.replace(/left|top/g,'0px');
	strg = strg.replace(/right|bottom/g,'100%');
	strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
	var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
	return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}

$.fx.step. backgroundPosition = function(fx) {
	if (!fx.bgPosReady) {
		var start = $.curCSS(fx.elem,'backgroundPosition');

		if(!start){//FF2 no inline-style fallback
			start = '0px 0px';
		}

		start = toArray(start);

		fx.start = [start[0],start[2]];

		var end = toArray(fx.options.curAnim.backgroundPosition);
		fx.end = [end[0],end[2]];

		fx.unit = [end[1],end[3]];
		fx.bgPosReady = true;
	}
	//return;
	var nowPosX = [];
	nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
	nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
	fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

};
})(jQuery);



Agora, abaixo, esta é a página que tem uma tabela que deveria ficar exatamente no mesmo lugar, horizontalmente centralizado, ocupado pela Div da página index. Mas não fica. Só no Firefox.



<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFF;
margin-top: 20px;
}
</style>
</head>

<body>
<table width="797" border="0" align="center">
 <tr>
   <td bgcolor="#006600"><p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p></td>
 </tr>
</table>
</body>
</html>

Desde já, muito obrigado! :-)

Alfredo

Entrar

Arquivado

O site desalinha no Firefox, se tem Div

Recommended Posts

Scherer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

alebae 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Scherer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

comando like (Mysql) no php

mostrar quanto tempo foi postado um conteudo

lendo RSS com PHP mostrando a imagem de preview

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante