Ir para conteúdo

POWERED BY:

Arquivado

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

darabia1

Dificuldade com compatibilidade entre navegadores

Por , em Desenvolvimento frontend

Recommended Posts

darabia1    0

darabia1
Postado

Po fiz um site

so que em certo navegadores com

cromer do google o internet explorer ,

fica ruim todo desajustado o botao some

so que no mozila fica 100%

 

entao como nos arruma isso

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

siga todas as dicas do post #2:

http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__view__findpost__p__1613498

Compartilhar este post

Link para o post
Compartilhar em outros sites

darabia1    0

darabia1
Postado

Bom meu site é www.megawave.vai.la

entao ja testei consegir conserta a questao da resoluçao

tavo com dificuldade nos codigo html ao mudei pra css funcionou !

a questao continua a mesma dificadade entre os diferente navegadores

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/scripts.js"></script>
<head>
<script language='JavaScript' src='js/fade.js' type='text/javascript'></script> 	
<title>MEGAWAVE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<link rel="stylesheet" href="themes/default/default.css"type="text/css" media="screen" />
<link rel="stylesheet" href="themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="demo/style.css" type="text/css" media="screen" />

<style>
		body{
background:#333 url(bg.jpg) repeat top Center;
font-family:Arial;
background-repeat: repeat-x;
margin-right: 0px;
margin-bottom: 0px;
		}
		span.reference{
			position:fixed;
			left:10px;
			bottom:10px;
			font-size:12px;
		}
		span.reference a{
			color:#aaa;
			text-transform:uppercase;
			text-decoration:none;
			text-shadow:1px 1px 1px #000;
			margin-right:30px;
		}
		span.reference a:hover{
			color:#ddd;
		}
		ul.sdt_menu{
			margin-top:150px;
		}
		h1.title{
			text-indent:-9000px;
			background:transparent url(title.png) no-repeat top left;
			width:633px;
			height:69px;
		}
	</style>

	<style type="text/css">
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {opacity:0.1;}
div.sidebar-social-gadget img:hover {opacity:1;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
#apDiv1 {
position:absolute;
left:187px;
top:6px;
width:207px;
height:105px;
z-index:1;
}
       #apDiv2 {
position:absolute;
left:219px;
top:1209px;
width:262px;
height:167px;
z-index:2;
}
       </style>

<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
<script language="JavaScript" type="text/JavaScript">

<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

   <body>
   <div id="apDiv1"><img src="imgs/logo.png" width="967" height="212" alt="" /></div>
   <div id="apDiv2">
     <p>
       <label for="textfield"></label>
     </p>
<form id="form1" method="post" action="">

<form action="http://www.netpoint.com.br/utils/forms/email.asp" method="post">
<input type=hidden name=para value="meu-email@meu_dominio.com.br">
<input type=hidden name=assunto value="Meu título do Formulário">
<input type=hidden name=p_prox value="http://www.meu_dominio.com.br/pagina_confirmacao.htm">
<input type=hidden name=p_erro value="http://www.meu_dominio.com.br/pagina_de_erro.htm">
<input type=hidden name="utf8" value="1"> 

 <p>Nome:
   <input type="text" name="textfield" id="textfield" />
 </p>
 <p>Endereço:
   <label for="textfield2"></label>
   <input type="text" name="textfield2" id="textfield2" />
 </p>
 <p>N°:
   <label for="textfield3"></label>
   <input name="textfield3" type="text" id="textfield3" value="" size="5" maxlength="15" />
 </p>
 <p>Referencia:
   <label for="textfield4"></label>
   <input type="text" name="textfield4" id="textfield4" />
 </p>
 <p>Telefone:
   <label for="textfield5"></label>
   <input type="text" name="textfield5" id="textfield5" />
 </p>
 <p>Instalação:
   <label for="select"></label>
   <select name="select" id="select">
     <option value="15">Internet</option>
     <option>Telefone</option>
     <option>Link Empresarial</option>
     <option>Suporte Tenico</option>
     <option>Instalaçao De Rede</option>
     <option>Telefone</option>
   </select>
 </p>
 <p>
   <input type="submit" name="button" id="button" value="Enviar" />
   <input type="submit" name="button2" id="button2" value="Enviar" />
 </p>
</form>
<p> </p>
   </div>
   <div id="fadeDiv">
</div>
   <!--content featured gallery here -->
   </div> 
<script type="text/javascript">
   if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
  </script>
 </div></div><!--/header--></div>


<div class="content"> 

 <h1 class="title"> </h1>
 <ul id="sdt_menu" class="sdt_menu">
   <li> <a href="index.html"> <img src="images/2.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">HOME</span> <span class="sdt_descr">Volta 
     Inicial</span> </span> </a> </li>

   <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">PLANOS</span> <span class="sdt_descr">Meu 
     Trabalhos</span> </span> </a> 
     <div class="sdt_box"> <a href="#">Websites</a> <a href="#">Illustrations</a> 
       <a href="#">Photoshop</a> </div>
   </li>

   <li> <a href="#"> <img src="images/3.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">SERVIÇOS</span> <span class="sdt_descr">Onde 
     as idéias se nasce</span> </span> </a>
   </li>

   <li> <a href="#"> <img src="images/4.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">CONTRATAR</span> <span class="sdt_descr">Gosto 
     de fotografia</span> </span> </a> </li>

   <li> <a href="#"> <img src="images/5.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">EMPRESA</span> <span class="sdt_descr">Fale 
     comigo</span> </span> </a> </li>

   <li> <a href="#"> <img src="images/6.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">CONTATOS</span> <span class="sdt_descr">Projeto 
     em andamento</span> </span> </a> 
     <div class="sdt_box"> <a href="#">Foto</a> <a href="#">website</a> <a href="#">Sistema</a> 
     </div>
   </li>
 </ul>
</div>
<div> </div>
</div>
</div> 

       <!-- The JavaScript -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
   <script type="text/javascript">

           $(function() {
			/**
			* for each menu element, on mouseenter, 
			* we enlarge the image, and show both sdt_active span and 
			* sdt_wrap span. If the element has a sub menu (sdt_box),
			* then we slide it - if the element is the last one in the menu
			* we slide it to the left, otherwise to the right
			*/
               $('#sdt_menu > li').bind('mouseenter',function(){
				var $elem = $(this);
				$elem.find('img')
					 .stop(true)
					 .animate({
						'width':'170px',
						'height':'170px',
						'left':'0px'
					 },400,'easeOutBack')
					 .andSelf()
					 .find('.sdt_wrap')
				     .stop(true)
					 .animate({'top':'140px'},500,'easeOutBack')
					 .andSelf()
					 .find('.sdt_active')
				     .stop(true)
					 .animate({'height':'170px'},300,function(){
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length){
						var left = '170px';
						if($elem.parent().children().length == $elem.index()+1)
							left = '-170px';
						$sub_menu.show().animate({'left':left},200);
					}	
				});
			}).bind('mouseleave',function(){
				var $elem = $(this);
				var $sub_menu = $elem.find('.sdt_box');
				if($sub_menu.length)
					$sub_menu.hide().css('left','0px');

				$elem.find('.sdt_active')
					 .stop(true)
					 .animate({'height':'0px'},300)
					 .andSelf().find('img')
					 .stop(true)
					 .animate({
						'width':'0px',
						'height':'0px',
						'left':'85px'},400)
					 .andSelf()
					 .find('.sdt_wrap')
					 .stop(true)
					 .animate({'top':'25px'},500);
			});
           });
       </script>
       <div class="box-1" align="center">
       </div>



       <div class="slaid-top" align="center">
       <div id="wrapper">



       <div class="slider-wrapper theme-default" align="center">
           <div class="ribbon" align="center"></div>
           <div id="slider" class="nivoSlider" align="center">
               <img src="images/toystory.jpg" alt="" />
               <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
               <img src="images/walle.jpg" alt="" />
               <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
           </div>
           <div id="htmlcaption" class="nivo-html-caption">
               <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
           </div>
       </div>

   </div>
  <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
  <script type="text/javascript" src="demo/jquery.nivo.slider.pack.js"></script>
   <script type="text/javascript">
   $(window).load(function() {
       $('#slider').nivoSlider();
   });
   </script>
      <div class="box-2">

      <img src="imgs/sitemegaware_r2_c1.jpg"width="1022" height="715" usemap="#Map"/>
      <map name="Map" id="Map">
        <area shape="rect" coords="452,254,573,341" href="ideia.html" target="_blank" alt="" />
      </map>
      </div>

      </div>


</body>
</html>

------------------------

Style css

body {
scrollbar-arrow-color: #666666;
scrollbar-base-color: #666666;
scrollbar-dark-shadow-color: #666666;
scrollbar-track-color: #666666;
scrollbar-face-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-3d-light-color: #666666;
}
.content{
position:relative;
left: 202px;
}
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1330px;
margin-right:1230
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:139px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
visibility: hidden;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
.box-1{
float:left;
width:1022px;
height:290px;	
float:left;
margin-top:359px
}
.slaid-top{
float:left;
width:891px;
height:90px;
margin-top:-750px
}
.box-2 img {
margin-left:205px;
margin-top:-0px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mais dicas:

 

-> não use o Dreamweaver em modo Visual:

http://wbruno.com.br/blog/2011/04/13/nao-editores-wysiwyg-em-desenvolvimento-web/

 

o grande problema ai, é essa estruturação incorreta usando diversos absolutes. Você deve refazer, pensando em floats e box model.

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