Dúvidas Layout

Front-end
#1

Bom dia galera, segue imagem em anexo, é o seguinte, minha aplicação está rodando normalmente com o Firefox, mas, quando eu tento acessar com o Chrome, é inserido um espaço enorme antes da página. Isto acontece em todas as páginas que eu uso a api do google de mapas.

Se alguém puder ajudar, desde já agradeço!

Att.
Diego Silva

#2

dá um inspecionar elemento no espaço branco brother =/ ,dai você vê oque está ocupando esse espaço…

#3

Então, está gerando outro em branco.
O que pode ser isso?

#4

[i]Cara, vc postou pouquissima informação, basicamente o que vc postou é, chuta ai galera o que pode ser

a propriedade que vc está usando pode n ser compatível com a versão do navegador, a propriedade pode n estar configurada corretamente.

pode estar configurada corretamente, mas n ser cross browser.

Enfim, são algumas possibilidades, se vc postar o fonte ficaria mais fácil.

Boa sorte

[/i]

#5

Foi mal aí galera! Segue abaixo o código da minha página e o CSS.

<%@page import="br.com.hibernate.model.TsClienteResp"%>
<%@page import="br.com.monisat.util.JsfHelper"%>
<%@page contentType="text/html;charset=iso-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@taglib uri="http://myfaces.apache.org/sandbox" prefix="s"%>

<html>

<head>

<%@include file="../home/importar.jsp"%>

<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=AIzaSyANwE3Cxjr5NhHlDFvWVgmS2iw4jqzFEEQ"
	type="text/javascript"></script>
<script
	src="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.0/src/mapiconmaker.js"
	type="text/javascript"></script>

<script type="text/javascript">
    var locations = {}; 
    var map;
    function load( lat, log, zoon, idVeiPos ) {
      map = new GMap2(document.getElementById("mapa"));
      map.setUIToDefault();
      map.enableRotation();
      map.setCenter(new GLatLng(lat,log), zoon);
      
      locations = {}; 
      url = "/monisat/retornaxml?id=<%=((TsClienteResp) JsfHelper.getSessionAttribute("usuario"))
					.getIdCliente()%>";
      if( idVeiPos > 0 ) {
    	  url += "&idVeiPos="+ idVeiPos;
      }
      
      GDownloadUrl( url, function(data) {   
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("form:marker");
        
        for (var i = 0; i < markers.length; i++) {
          var id = markers[i].getAttribute("id");
          var placa = markers[i].getAttribute("placa");
          var dhpos = markers[i].getAttribute("dhpos");
          var ciduf = markers[i].getAttribute("ciduf");
          var rua = markers[i].getAttribute("rua");
          var rod = markers[i].getAttribute("rod");
          var vel = markers[i].getAttribute("vel");
          var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                  parseFloat(markers[i].getAttribute("lng")));
          var store = {id: id, placa: placa, dhpos: dhpos, latlng: latlng, ciduf: ciduf, rua: rua, rod: rod, vel:vel};
          
          var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
          latlngHash = latlngHash.replace(".","").replace(".", "").replace("-","");
          if (locations[latlngHash] == null) {
            locations[latlngHash] = []
          }
          locations[latlngHash].push(store);
        }
        for (var latlngHash in locations) {
          var stores = locations[latlngHash];
          if (stores.length > 1) {
            map.addOverlay(createClusteredMarker(stores));
          } else {
            map.addOverlay(createMarker(stores));
          }
         }
      });
    }

    function createMarker(stores) {
      var store = stores[0];
      var newIcon = new GIcon(G_DEFAULT_ICON, "../themes/img/icone/caminhao.png");
      newIcon.iconSize = new GSize(32, 32);
      var marker = new GMarker(store.latlng, {icon: newIcon}); 
      var html = "<b>ID: </b>" + store.id + "   <b>Placa: </b> "+store.placa +"<br/>"+ 
                 "<b>Cidade: </b>" + store.ciduf +"<br/>"+ 
                 "<b>Rodovia: </b>" + store.rod +"<br/>"+ 
                 "<b>Atualizado em: </b> "+store.dhpos+"<br/>"+ 
                 "<b>Velocidade: </b> "+store.vel+" Km/h.<br/>"; 
      var hint = "ID...: <b>"+ store.id    + "</b><br/>"+ 
                 "Placa: <b>"+ store.placa + "</b>"; 
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      GEvent.addListener (marker, 'mouseover', function() {
        marker.openInfoWindowHtml(hint);
      });
      GEvent.addListener(marker, 'mouseout', function() {
        marker.closeInfoWindow();
      });
      return marker;
    }

    function createClusteredMarker(stores) {
      var store = stores[0];
      var newIcon = new GIcon(G_DEFAULT_ICON, "../themes/img/icone/caminhao.png");
      newIcon.iconSize = new GSize(32, 32); 
      var marker = new GMarker(stores[0].latlng, {icon: newIcon});
      var html = "";
      var hint = "";
      for (var i = 0; i < stores.length; i++) {
        html +=  "<b>ID: </b>" + store.id + "   <b>Placa: </b> "+store.placa +"<br/>"+ 
                 "<b>Cidade: </b>" + store.ciduf +"<br/>"+ 
                 "<b>Rodovia: </b>" + store.rod +"<br/>"+ 
                 "<b>Atualizado em: </b> "+store.dhpos+"<br/>"+ 
                 "<b>Velocidade: </b> "+store.vel+" Km/h.<br/>"; 
        hint +=  "ID...: <b>"+ store.id    + "</b><br/>"+ 
                 "Placa: <b>"+ store.placa + "</b>"; 
      }
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      GEvent.addListener (marker, 'mouseover', function() {
        marker.openInfoWindowHtml(hint);
      });
      GEvent.addListener(marker, 'mouseout', function() {
        marker.closeInfoWindow();
      });
      return marker;
    }
    //-- Função para arrastar DIV
    $(function() {
		$(".draggble").resizable({maxHeight:450, maxWidth:1260,
			minHeight:120, minWidth:1260});
	});
  	//----------------------------------------
    
    //-- Função para dar o refresh na DIV
  function refresh() {
  			setTimeout('dorefresh()', 0);
  		}

  function dorefresh() {
  			document.getElementById('filterTable').innerHTML = window.location.reload();
  		} 
	//----------------------------------------
	
	//-- Função para contagem regressiva
  		var sHors = "00"; 
  		var sMins = "09";
  		var sSecs = 60;
  		function getSecs(){
  			sSecs--;
  			if(sSecs<0) {
  			sSecs=59;sMins--;
  				if(sMins<=9)sMins="0"+sMins;
  			}
  			if(sMins=="0-1") {
  				sMins=5;sHors--;if(sHors<=9)sHors="0"+sHors;}
  				if(sSecs<=9)sSecs="0"+sSecs;
  					if(sHors=="0-1") {
  						sHors="00";sMins="00";sSecs="00";
  						clock1.innerHTML=sHors+"<font color=#000000>:</font>"+sMins+"<font color=#000000>:</font>"+sSecs;
  						refresh();
  				}else {
  		   			clock1.innerHTML=sHors+"<font color=#000000>:</font>"+sMins+"<font color=#000000>:</font>"+sSecs;
  		   		setTimeout('getSecs()',1000);
  				}
  			}
  	//----------------------------------------	
    //]]>
    
</script>

<style type="text/css">
#mapa {
	width: 100%;
	height: 97%;
	margin-left: 0px;
	border: solid 2px #EFEFEF;
}

#info_mapa {
	width: 160px;
	height: 160px;
	padding: 0px;
	padding-left: 30px;
	border: 0px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#info_mapa img {
	margin-bottom: 5px;
}

.draggble {
	background-color: #ffffff;
	width: 100%;
	height: 120px;
}

.filterTable {
	margin-left: 10px;
	width: 97%;
	height: 59%;
}

.botoes {
	margin-left: 96%;
}
</style>
</head>

<body onload="load(-16.693026, -49.288331, 5, 0 )" onunload="GUnload()" class="normal">
	<f:view>
		<h:form id="form">

			<div id="toolbar-home">
				<div class="migalha">
					<a href="../home/home.jsf">Início</a> &gt; <b>Grid</b>
				</div>

				<%@include file="../home/sair.jsp"%>

				<div class="clear"></div>
				<t:div styleClass="botoes" rendered="#{home.grid eq 'true'}">
					<h:panelGrid columns="1" width="10" rendered="#{home.grid eq 'true'}">
						<t:column>
							<h:commandButton title="Exportar planilha para Excel"
								action="#{grid.chamaGrid}"
								image="../themes/img/botao/btnExcel.png" rendered="#{home.grid eq 'true'}"/>
						</t:column>
					</h:panelGrid>
				</t:div>
			</div>
			<t:div rendered="#{home.grid eq 'true'}">
			<a4j:commandButton action="home" value="Voltar"
				styleClass="garbo-button border"></a4j:commandButton>
			<a4j:commandButton onclick="load(-16.693026, -49.288331, 4, 0 );"
				value="Ver Todos" styleClass="garbo-button border"></a4j:commandButton>
			<f:verbatim >Próxima Atualização em: <span id="clock1">
					<script>setTimeout('getSecs()',1000);</script>
				</span>.</f:verbatim>
			</t:div>

			<div class="draggble">
				<div id="mapa"></div>
			</div>
			<div style="background-color: #ffffff;" align="center">
				<f:verbatim>
					<img src="../themes/img/icone/nbExpand.png">
				</f:verbatim>
			</div>

			<div class="filterTable">
				<t:dataTable id="tabela" style="width: 100%;" rendered="#{home.grid eq 'true'}"
					rowClasses="row1, row2" var="list" value="#{ grid.tabela }">
					<t:column>
						<f:facet name="header">
							<h:outputText value="Operação" />
						</f:facet>
						<h:outputText value="#{ list.veiculo.operacao.descricao }" />
					</t:column>
					<t:column sortable="true">
						<f:facet name="header">
							<h:outputText value="Placa"/>
						</f:facet>
						<h:outputText value="#{ list.placa }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Data/Hora Posição" />
						</f:facet>
						<h:outputText value="#{ list.dtAux }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="KM/H" />
						</f:facet>
						<h:outputText value="#{ list.velocidade }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Cidade" />
						</f:facet>
						<h:outputText value="#{ list.cidade } - #{ list.uf }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Rua" />
						</f:facet>
						<h:outputText value="#{ list.rua }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Rodovia" />
						</f:facet>
						<h:outputText value="#{ list.rodovia }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Rota" />
						</f:facet>
						<h:outputText value="#{ list.rota }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Latitude" />
						</f:facet>
						<h:outputText value="#{ list.latitude }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Longitude" />
						</f:facet>
						<h:outputText value="#{ list.longitude }" />
					</t:column>
					<t:column>
						<f:facet name="header">
							<h:outputText value="Visualizar" />
						</f:facet>
						<h:commandLink value="Visualizar"
							onclick="GUnload(); load( #{ list.latitude }, #{ list.longitude }, 13, #{ list.idVeiculoPos } ); return false;">
						</h:commandLink>
					</t:column>
				</t:dataTable>
			</div>
		</h:form>
	</f:view>
</body>
</html>

CSS

* { 
	margin:0px; padding:0px; font-family: "Trebuchet MS",verdana,arial; font-size:12px;
}
.body {
	padding-left:10px; padding-right:10px;
	padding-top: 0;
}
img {
	border:none; 	
}
.login-div {
	background: url("../img/fundo/caminhao2.gif") left;
	background-attachment: fixed;
}
.ladoEsquerdo{
	width:350px; height:100px; background:#F5F5F5; overflow-y:scroll;    	 
}
.usuario {
	background: #FFF url("../img/icone/user.png") no-repeat left 
	center; padding: 4px 4px 4px 25px;	border: 1px solid #CCCCCC; background-position:5px;
}
.senha {
	background: #FFF url("../img/icone/pass.png") no-repeat left 
	center; padding: 4px 4px 4px 25px; border: 1px solid #CCCCCC; background-position:5px; 
}
.fonte {
	margin-left: 20px;	
}
.segundo {
	display:block; width:150px; margin-left: 10px; 	 	
}
.terceiro {
	display:block; width:150px; margin-left: 20px;
}

.aceitaRisco {
	background:#FFCCCC; border:1px solid #FF0000; 
	text-align:justify; width:580px; padding:10px;  
}
table.opcoeslabel tbody tr td label {
	padding:5px; margin-bottom:2px; display:block; width:590px; border:1px solid #CCC; 
	cursor:pointer; background:#FFFF77; text-align:justify; height:40px; padding:4px;   	
}
input.opcoeslabel {
	display:block; float:left; width:20px; height:40px; margin-right:10px; 
}

.transparente {
	border:1px solid #CCC; background:#FAFAFA; color:#D8D8D8;
}

#toolbar, #toolbar-home {
	margin:2px; border-bottom:1px solid #999; background: #E8E8E8; 
}
#toolbar-home { 
	color:#333; padding:5px;
}
#toolbar-home .migalha {
	float:left; 
}
#toolbar-home .logout {
	float:right;
}
#toolbar-home .clear {
	clear:both; 
}
#corpo .bloco {
	width:100px; text-align:center; margin:8px; cursor:pointer; 
	padding:3px; display:block; text-decoration:none; border:none;
}
#corpo .bloco img {
	border:none;
}
#corpo .bloco:hover {
	text-decoration:underline;
}
#corpo .primeira {
	margin-top:70px;
}
#corpo2 .bloco {
	width:100px; text-align:center; margin:8px; cursor:pointer; 
	padding:3px; display:block; text-decoration:none; border:none;
}
#corpo2 .bloco img {
	border:none;
}
#corpo2 .bloco:hover {
	text-decoration:underline;
}
#corpo2 .primeira {
	margin-top:70px;
}
#corpo2 .primeira2 {
	margin-top:45px;
}
#form {
	/*background: #FFF;*/
}
.selecionar {
	padding:3px; color:#333;	
}
.titulo-pas {
	color:#333;	 
}
.titulo-des {
	color:#000;
}
.link {
	display:block; width:90px; text-decoration:none; padding-left:20px; 
} 
.link:hover {
	text-decoration:underline;
}
.excluir {
	background: url("../img/icone/delete.png") no-repeat left center;	
}
.editar {
	background: url("../img/icone/editar.png") no-repeat left center;	
}
.telefone {
	background: url("../img/icone/telefone.png") no-repeat left center;	
}
.acima {
	background: url("../img/icone/acima.png") no-repeat left center;	
}
.subreboque {
	background: url("../img/icone/subreboque.png") no-repeat left center;	
}
.sair {
	background: url("../img/icone/exit.png") no-repeat left center;	
}
.reenviar {
	background: url("../img/icone/reenviar.png") no-repeat left center;	
}
.aceitar { 
	background: url("../img/icone/aceitar.gif") no-repeat left center; 
	width: 100%;
}
.novo {
	background: url("../img/icone/novo2.png") no-repeat left center;
}

.normal {
	background: url("../img/fundo/caminhao2.gif") left;
	background-attachment: fixed;
}

.formulario {
	font-size:12; font-family:serif; background:#F8F8F8; 		
}
.formulario .campo {
	padding:1px; border:1px solid #999; 
}
.formulario .label {
	padding:1px; border:1px solid #999; 
}

.titulo {
	font-size: 16; font-weight: bold; margin-top:15px; margin-bottom:15px; display: block; 
}
.amplia { 
	width:100%; background:#F5F5F5; border:1px solid #CCC; padding:3px 0px; 
	display:block; margin:5px 0px; text-align:center; text-decoration:none; color:#999;  	
}
.amplia:hover {
	color:#666; background:#F0F0F0; 	
} 
.tabela {
	width: 100%; height: 100%;	
}
.login-div {
	width: 550px; height: 230px; border:3px solid #CCCCCC;
}
.frame-interno {
	position:absolute; left:0px; right:0px; bottom:0px; top:36px; 
	width:100%; height:90%; display:block; border:none; background:#F8F8F8;
}
.menu-pagina a {
	text-decoration:none; font-size:12px; padding:5px; display:block; width:112px; height:26px; color:#000;
}
.menu-pagina a:hover {
	background:#B5BED6; border:1px solid #333; width:110px; height:24px;
}
.botao {
	cursor:pointer; height:32px; width:32px; margin-bottom:8px;	margin-right:8px; border:1px solid #FFF;	
}
.botao:hover {
	border:1px solid #FF0000; height:32px; width:32px;
}
.botao-salvar {
	background: url("../img/icone/salvar.png") no-repeat center center;	
}
.botao-novo {
	background: url("../img/icone/novo.png") no-repeat center center;	
}
.ok_button {
}

.cancel_button {
}

/*Usado no jsp de rotas*/
.tabelaRota {
	background:#F2F2F2; width:410px; padding:0px 10px 0px 10px; height:135px; overflow-y:scroll; 
}
.tabelaRota2 {
	background:#F2F2F2; width:420px; padding:0px 10px 0px 10px; height:240px; overflow-y:scroll; 
}
.alinhaDireita {
	text-align:right; width:100%;
}
.dojoPopupContainer {
	width: 360px !important; font-size:7px !important; font-family:arial,tahoma; 
}
.dojoTableSuggest {
	width:100%;	
}
#6