12 replies to this topic

[elanesp]

Olá,
Alguém sabe o que fazer para a imagem de fundo ficar realmente no fundo no IE?
uso background-image: url(../img/mainbox_bg.png); Mas em parte do código a imagem está sobrepondo. Como resolvo isso?
Tem a ver com transparência de imagens? li alguma coisa sobre hack, que o IE não lê png... mas não entendi muita coisa.

Grata,

[Boxer]

Olá!

A sua imagem de fundo está sendo usada como style?
Está usando na tag BODY ou criou uma DIV?

Posta o código aqui, pra gente dar uma olhada!

[]´s

[elanesp]

segue o código.

<%@ taglib uri="/tags/struts-tiles" prefix="tiles" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<%@ taglib uri="/tags/displaytag" prefix="display" %>

<tiles:insert page="../../../default/mainbox.jsp">
	<tiles:put name="titulo">
		Programas » Edição 
		<logic:present name="periodo">(<bean:write name="periodo" property="sigla" />)</logic:present>
		<logic:notPresent name="periodo">(Novo)</logic:notPresent>
	</tiles:put>
	<tiles:put name="corpo">			
		<img align="absbottom" border="0" src="site/img/icones/voltar.gif" /> <a href="###" onclick="link('PeriodoProgramaListar.do','right')">Programas</a><br><br>
			<html:errors/>
				<!-- essas abas são sobrepostas pela imagem -->
				<ul id="tabnav">
					<li id="tab1" class="active"><a href="###" onclick="link('acao1.do','tabcontent');">aba1</a></li>
					<li id="tab2"><a href="###" onclick="link('acao2.do','tabcontent');">aba2</a></li>
					<li id="tab3"><a href="###" onclick="link('acao3.do','tabcontent');">aba3</a></li>					
				</ul>
				<div id="tabcontent">
					<br><img src="site/img/carregando2.gif" /><br>
					&lt;script>link('acao1.do','tabcontent');</script>
				</div>
	</tiles:put>	  
 	</tiles:insert>

mainbox.jsp

<tiles:importAttribute scope="request"/>

<div class="mainbox">

	<logic:present name="buttonMenu" scope="request">
		<tiles:insert page="./buttonmenu.jsp">
		
			<tiles:put name="nomeMenu"><bean:write name="buttonMenu"/></tiles:put>
		</tiles:insert>
	</logic:present>
	<div class="titulo"><tiles:getAsString name="titulo"/></div>	
	<logic:present name="mensagem" scope="request">
		<div class="msgbox">
			<bean:write name="mensagem"/>
		</div>
	</logic:present>	

   <tiles:getAsString name="corpo"/>
	
	<br/>	   	
	
	<logic:messagesPresent>
		<div class="errorbox">
			<html:errors/>
		</div>
	</logic:messagesPresent>
	
	
</div>

css

div.all .main .right .mainbox {
  font-family: Verdana, Arial, Sans-serif, "Lucida Grande", "Lucida Sans Unicode", Lucida, Helvetica;
  padding: 5px;
  margin-bottom: 4px;
  background-image: url(../img/mainbox_bg.png);
  background-repeat: repeat-x;
  background-color: #f3f7fc;
  border: 1px solid #5d8cba;
  opacity: 0.90;
  filter: alpha(opacity=90);
}

div.all .main .right .mainbox .titulo {
  position: relative;
  top: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 4px;
  text-align: right;
  font-weight: bold;
  color: #376098;
}

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #336699;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #DFF4FF;
margin: 2px 2px 0 2px;
border: 1px solid #336699;
}

#tabnav .active{
border-bottom: 1px solid #fff;
background-color: #fff;
}

#tabnav .active{
color: #000;
}

#tabcontent h3 {
	border-bottom: 1px solid #376098;
	color: #376098;
	margin-bottom: 0;
	padding-bottom:0;
	font-size: 10pt;
}

[Boxer]

Tenta colocar um z-index:0 no CSS do mainbox...

[]´s

[Renan L. Queiroz]

Tenta colocar um z-index:0 no CSS do mainbox...

[]´s

Boxer ... às vezes tenho problemas com o z-index ... e acabo tendo que usar valores distantes
como por exemplo: Quero que a objeto 1 fique por cima os outros e o 2 fique intermediário
(por cima do 3 e abaixo do 1) ...

legenda:
1- Janela normal
2- Div transparente
3- Div cinza dentro da Div transparente

Veja figura anexa!

E acabo tendo que usar para o '3' z-index = -1, para o '2' z-index = 0 e para o '1' z-index = 10

Saberia me explicar esse fenômeno?

Edição feita por: Renan L. Queiroz, 15/01/2008, 14:53.

[Boxer]

Renan,

O z-index:0 é o q fica atrás de todos....

Então vc pode usar:

z-index:0 na 1
z-index:1 na 2
z-index:2 na 3

Sem a necessidade de jogar valores distantes para as DIVs....

Tá certo?

[]´s

[elanesp]

puxa! não funcionou com o z-index...
a div que estava sendo sobreposta veio para frente (mudei a cor para certificar), mas as abas não apareceram.

[Alex Hiroshi]

Tem como postar a saída HTML do código? Fica mais legível.

E o seu css está com alguns erros:

div.all .main .right .mainbox {
  font-family: Verdana,....

Você quis aplicar o estilo nas divs com as classes .all, .main, .right e .mainbox, certo? Para isso você precisa separar com vírgula cada um.

div.all,  div.main,  div.right,  div.mainbox {
  font-family: Verdana,...

[Renan L. Queiroz]

Renan,

O z-index:0 é o q fica atrás de todos....

Então vc pode usar:

z-index:0 na 1
z-index:1 na 2
z-index:2 na 3

Sem a necessidade de jogar valores distantes para as DIVs....

Tá certo?

[]´s

O engraçãdo é que para o Fx está tudo ok, mas a m**** do IE não coopera!

[elanesp]

Segue a saída HTML

<div class="corpo">
<div class="titulo">
	Programas » Edição 
		(Júnior 2009-2010)
		
</div>
		<img src="site/img/icones/voltar.gif" align="absbottom" border="0"> <a href="###" onclick="link('PeriodoProgramaListar.do','right')">Voltar</a><br><br>
			
				<!-- CSS TABS  -->				
				<ul id="tabnav">
					<li id="tab1" class="active"><a href="###" onclick="link('PeriodoProgramaEditar.do','tabcontent');">Geral</a></li>
					<li class="" id="tab2"><a href="###" onclick="link('AgenciaFinanciadoraListarPEP.do','tabcontent');">Agências</a></li>

					<li class="" id="tab3"><a href="###" onclick="link('ProjetoConfigurar.do','tabcontent');">Projeto</a></li>
					<li class="" id="tab4"><a href="###" onclick="link('PlanoConfigurar.do','tabcontent');">Plano</a></li>					
					<li class="" id="tab5"><a href="###" onclick="link('RelatorioConfigurar.do','tabcontent');">Relatórios</a></li>
					<li class="" id="tab6"><a href="###" onclick="link('CalendarioConf.do','tabcontent');">Calendário</a></li>
				</ul>				
				<div id="tabcontent">


	<h3>Informações Gerais</h3>		 
	<form name="periodoProgramaForm" method="post" action="/pibic/PeriodoProgramaSalvar.do" onsubmit="this.action= 'PeriodoProgramaSalvar.do'; submit_form('periodoProgramaForm','tabcontent'); return false;">
				
		<table class="tabela1">
		<tbody><tr>
			<td colspan="2">
			
			</td>
		</tr>
		<tr>

			<td width="156">
				<b>Status</b>			
			</td>
			<td width="460">
				<select name="status"><option value=""> </option>
				   <option value="1" selected="selected">em andamento</option>
<option value="2">concluido</option>
<option value="3">indisponível</option></select>	
			</td>

		</tr>
		<tr>
		 	<td><b>Tipo Programa</b></td>
			<td><select name="programa"><option value=""> </option>
					<option value="1">IC/PIBIC</option>
<option value="2" selected="selected">IC/JÚNIOR</option>
<option value="13">pictd</option></select>
			 </td>

		</tr>
		<tr>
		   <td><b>Descrição</b></td>
		   <td><input name="descricao" size="40" value="879871 jjj aaaaa" type="text"></td>
	 	</tr>

		<tr>
		   <td><b>Sigla</b></td>

		   <td><input name="sigla" size="40" value="Júnior 2009-2010" type="text"></td>
		</tr>
		<tr>
		   <td><b>Data Início</b> </td>
		   <td><input name="dtInicio" size="10" value="15/11/2007" type="text">	</td>
		</tr>
		<tr>

		   <td><b>Data Fim</b> </td>
		   <td><input name="dtFim" size="10" value="02/02/2006" type="text"></td>
		</tr>
		<tr>
		   <td><b>Nome do Edital</b></td>
		   <td><input name="edital" size="30" value="PIBIC-UFBAfggffg-www123" type="text"></td>
	 	</tr>		
		<tr>

			<td><b>Arquivo do Edital (.PDF)</b></td>
			<td>
			<div id="upload">

		<div id="editEdital" style="display: block;">
			<input name="editalArquivo" value="" type="file">

			<input onclick="micoxUpload(this.form,'PeriodoProgramaEditalSalvar.do','upload','Carregando...','Erro ao carregar');" value="Atualizar Edital" type="button">
			
		</div>	
		<div id="linkEdital">
			
		</div>		
							
		</div>
			</td>	
		</tr><tr>
			  <td> </td>
			<td>
				<div class="botoesAbaixo">

					<input id="Salvar" value="Salvar" class="botaoAzul" onmouseover="java script: changeClass(this, 'botaoAzulHover');" onmouseout="java script: changeClass(this, 'botaoAzul');" type="submit">	
				 </div>
			   </td>
		  </tr>
		</tbody></table>
	</form>

</div>
	</div>

Anexei um arquivo com as telas no firefox e no IE p/ entender melhor o erro. Observe que no IE não tem as abas.

Attached Files

•  tela.doc   234.5KB   1 downloads

[Alex Hiroshi]

E onde estão as classes que você utilizou no css?

[elanesp]

as classes estão lá em cima, no segundo post.

div.all .main .right .mainbox {
  font-family: Verdana, Arial, Sans-serif, "Lucida Grande", "Lucida Sans Unicode", Lucida, Helvetica;
  padding: 5px;
  margin-bottom: 4px;
  background-image: url(../img/mainbox_bg.png);
  background-repeat: repeat-x;
  background-color: #f3f7fc;
  border: 1px solid #5d8cba;
  opacity: 0.90;
  filter: alpha(opacity=90);
}

div.all .main .right .mainbox .titulo {
  position: relative;
  top: 0px;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 4px;
  text-align: right;
  font-weight: bold;
  color: #376098;
}

ul#tabnav {
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #336699;
margin: 0;
}

ul#tabnav li {
float: left;
height: 21px;
background-color: #DFF4FF;
margin: 2px 2px 0 2px;
border: 1px solid #336699;
}

#tabnav .active{
border-bottom: 1px solid #fff;
background-color: #fff;
}

#tabnav .active{
color: #000;
}

#tabcontent h3 {
	border-bottom: 1px solid #376098;
	color: #376098;
	margin-bottom: 0;
	padding-bottom:0;
	font-size: 10pt;
}

[elanesp]

Resolvido com um z-index gigantesco na div das abas.