Erro template no IE 7

  • lukweb
  • Avatar de lukweb Autor do Tópico
  • Offline
  • JCB! Novato
  • JCB! Novato
Mais
12 anos 4 meses atrás #59568 por lukweb
lukweb created the topic: Erro template no IE 7
Gostaria muito da ajuda de vocês,
desenvolvi um tema no joomla para um site, no IE8, Firefox e Chrome ele roda certinho,
porém no IE7 e inferior ele apresenta erros, perde alinhamento, propriedade margin e padding e também no inline no menu.
Em anexo posto uma imagem com destaques dos erros no IE7.
Agradeço Muito se puderem me ajudar.
Grato
Lucas
Anexos:

Please Entrar ou Registrar to join the conversation.


Mais
12 anos 4 meses atrás #59620 por edyonil
edyonil replied the topic: Re: Erro template no IE 7
Interessante o seu problema. Um erro típico nas regras CSS. O IE 7 não aceita a propriedade Display: Inline

Para tal terá que usar float:lef, para que o a lista passe a ser em linha

Os demais parece ser um problema no margin e padding dos elementos. Por padrão o IE define um margin e padding de 10px, para ambos os lados. Se você colocou tamanho fixo no box, terá que corrigir o problema diminuindo essas quantidade de pixel, ou então zeras mas margens e padding usando o CSS RESET.

Se o site tiver online posso ajudar a corrigir o problema.

Abraços

[b:8sje7mdx]________________________________________________________________[/b:8sje7mdx]
[size=110:8sje7mdx][color=#400080:8sje7mdx][b:8sje7mdx]Aprender e desenvolver são metas que para mim devem ser batida.[/b:8sje7mdx][/color:8sje7mdx][/size:8sje7mdx]
Ajudar é cumprir a missão que o Deus pai nos passou.
[url:8sje7mdx]http://edyonil.com[/url:8sje7mdx]
[url:8sje7mdx]http://gmais.de/edyonil[/url:8sje7mdx] - [url:8sje7mdx]http://twitter.com/edyonil[/url:8sje7mdx]
[url:8sje7mdx]...

Please Entrar ou Registrar to join the conversation.

  • lukweb
  • Avatar de lukweb Autor do Tópico
  • Offline
  • JCB! Novato
  • JCB! Novato
Mais
12 anos 4 meses atrás #59627 por lukweb
lukweb replied the topic: Re: Erro template no IE 7
edyonil
Muito Obrigado pela orientação, qto ao menu deu certo só coloquei o float e ficou beleza, porém qto ao restante ainda não resolvi.
usei o seguinte css reset:

* {
padding: 0;
margin: 0;
border: 0;
}

posso postar para vc os códigos index.php e o css?

agradeço a colaboração.

Please Entrar ou Registrar to join the conversation.

Mais
12 anos 4 meses atrás #59650 por edyonil
edyonil replied the topic: Re: Erro template no IE 7
Se você entende um pouco de linguagem post apenas os códigos html referentes aquelas áreas, e o css todo para que eu possa dar uma olhada.

Abraços.

[b:8sje7mdx]________________________________________________________________[/b:8sje7mdx]
[size=110:8sje7mdx][color=#400080:8sje7mdx][b:8sje7mdx]Aprender e desenvolver são metas que para mim devem ser batida.[/b:8sje7mdx][/color:8sje7mdx][/size:8sje7mdx]
Ajudar é cumprir a missão que o Deus pai nos passou.
[url:8sje7mdx]http://edyonil.com[/url:8sje7mdx]
[url:8sje7mdx]http://gmais.de/edyonil[/url:8sje7mdx] - [url:8sje7mdx]http://twitter.com/edyonil[/url:8sje7mdx]
[url:8sje7mdx]...

Please Entrar ou Registrar to join the conversation.

  • lukweb
  • Avatar de lukweb Autor do Tópico
  • Offline
  • JCB! Novato
  • JCB! Novato
Mais
12 anos 4 meses atrás #59652 por lukweb
lukweb replied the topic: Re: Erro template no IE 7
Mais uma vez obrigado pela ajuda, abaixo estou enviando os códigos:

HTML:

<html>
</head>

<body>
<div id="container_geral">
<div id="fundo">
<div id="topo">
<img class="flutuar_esquerda" src="templates/<?php echo $this->template ?>/images/logo.png" width="202" height="182" alt="Logo" />

</div>
<!
Fim topo
>
<div id="menu_de_topo">
<div class="flutuar_direita">
<ul >
<li><a href="#">P&aacute;gina Inicial</a></li>
<li><a href="#">Contato</a></li> |
<li><a href="#">Trabalhe Conosco</a></li>
<li><a href="#">Localiza&ccedil;&atilde;o</a><li/>

</ul>
</div>
</div>
</div><!
Fim menu_de_topo
>
<div id="container_meio">
<div id="container_esquerda">
<div id="container_esquerda">
<div class="titulo_menu">Titulo1</div>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Apresenta&ccedil;&atilde;o</div>
<div class="AccordionPanelContent">
<table width="170" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="sub_item"><a class="item_sub_menu_a" href="#">Item1</a></td>
</tr>
<tr>
<td class="sub_item"><a class="item_sub_menu_a" href="#">Miss&atilde;o, Vis&atilde;o e Valores</a></td>
</tr>
<tr>
<td class="sub_item"><a class="item_sub_menu_a" href="#">Logomarca</a></td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Mem&oacute;ria</div>
<div class="AccordionPanelContent">
<table width="170" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="sub_item"><a class="item_sub_menu_a" href="#">Hist&oacute;ria</a></td>
</tr>
<tr>
<td class="sub_item"><a class="item_sub_menu_a" href="#">Personalidade</a></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
<div class="AccordionPanel">
<div class="item_menu_maior"><a class="item_menu_a" href="#">Organiza&ccedil;&atilde;o e Administra&ccedil;&atilde;o</a></div>
</div>
<div class="AccordionPanel">
<div class="item_menu_maior"><a class="item_menu_a" href="#">Corpo</a></div>
</div>

<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Cidade</a></div>
</div>
<div class="titulo_menu">N&uacute;meros</div>
<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Complexo</a></div>
</div>

<div class="titulo_menu">Voluntariado</div>
<div class="AccordionPanel">
<div class="item_menu_maior"><a class="item_menu_a" href="#">Voluntariado</a></div>
</div>
<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Grupo</a></div>
</div>
<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Grupo de Volunt&aacute;rios</a></div>
</div>
<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Torne-se um Volunt&aacute;rio</a></div>
</div>
<div class="titulo_menu">Galeria de Imagens</div>
<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Caf&eacute;</a></div>
</div>
<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Fotos Hist&oacute;ricas</a></div>
</div>
<div class="AccordionPanel">
<div class="item_menu"><a class="item_menu_a" href="#">Eventos</a></div>
</div>
</div>
</div>
<!--script type="text/javascript"-->
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
<!--/script-->

</div><!
fim container_esqueda
>

<div id="container_centro">
<div id="menu_images">
<jdoc:include type="modules" name="top" style="" />
</div>
<div id="conteudo">
<jdoc:include type="modules" name="user5" style="" />
<jdoc:include type="component" />
</div>
</div>
<!
fim container_centro
>

<div id="container_direita">
<a href="#" target="_blank"><img src="templates/<?php echo $this->template ?>/images/plano_img_bloco_dir.png" width="213" height="123" alt="Plano" /></a>
<a href="#"><img src="templates/<?php echo $this->template ?>/images/bt_virtual.png" width="213" height="123" alt="Virtual" /></a>
<a href="#"><img src="templates/<?php echo $this->template ?>/images/bt_edu.png" width="213" height="123" alt="Educa&ccedil;&atilde;o" /></a>
<a href="#"><img src="templates/<?php echo $this->template ?>/images/bt_doe_sangue.png" width="213" height="123" alt="Doe Sangue" /></a>
<a href="#"><img src="templates/<?php echo $this->template ?>/images/bt_ouvido.png" width="213" height="123" alt="Ouvido" /></a>
<a href="#"><img src="templates/<?php echo $this->template ?>/images/bt_comunicacao.png" width="213" height="123" alt="Comunica&ccedil;&atilde;o" /></a>
<a href="#"><img src="templates/<?php echo $this->template ?>/images/bt_bem_viver.png" width="213" height="123" alt="Bem Viver" /></a>
<a href="#" target="_blank"><img src="templates/<?php echo $this->template ?>/images/btn_educa.png" width="213" height="123" alt="Educa" /></a>
</div>
<!
fim container_direita
>

<div id="rodape_geral">
<center>
<div id="menu_rodape">
<ul >
<li><a href="#">P&aacute;gina Inicial</a></li>
<li><a href="#">Contato</a></li> |
<li><a href="#">Trabalhe Conosco</a></li>
<li><a href="#">Localiza&ccedil;&atilde;o</a><li/>

</ul>
</div>
</center>
<div id="dados_copyright">ONG<br/>
Praça Ferraz - nº 100 Centro / CEP: 13230-000 - Campinas - SP, Brasil / Tel.: +19 3656-9200<br/>
Copyright © 2010 - 2011<br/>
Desenvolvido pela equipe de Tecnologia ONG<br/>
Apoio: <a href="#">ong.com</a>
</div>


</div>
</div><!
Fim container_geral
>
</div>
</div>
</body>
</html>

CSS:
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
border: 0;
}
/* config_body */
body{background-color:#17375E;
padding:0;
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
}
#container_geral{width:986px;
background: url(../images/borda_t.gif) no-repeat #FFF;
margin:0 auto;
text-align:center;
padding-top:20px;

}
#fundo{width:984px;
background: url(../images/bg_fundo.png) no-repeat;
margin:0 auto;
text-align:center;

}
/* topo */
#topo{height:196px;
background: url(../images/image_teste_topo.png) no-repeat right;
margin: 0 18px 0 18px;
}
/* menu de topo */
#menu_de_topo{
height:35px;
margin-right:18px;
font-size:14px;
padding:10px;
}
#menu_de_topo ul{margin:0; }
#menu_de_topo ul li {display:inline-block; padding-left:15px; padding-right:15px; float:left;}
#menu_de_topo ul li a{ list-style:none; text-decoration:none; color:#17375E; }
#menu_de_topo ul li a:hover{ color: #069; font-variant:small-caps; font-weight:bold;}

/* meio */
#container_meio{ overflow:hidden; margin-top:10px;
}
#container_esqueda{ width:200px; height:auto; float:left;}
.menu{ text-align: left; list-style:none; margin:0; padding:0;}
.titulo_menu{ background:url(../images/bg_menu_titulo.png) no-repeat; height:30px; text-align:right; padding-right:15px; font-size:14px; color:#FFF; padding-top:3px;}
.item_ul_menu{ text-align: left; list-style:none; margin:0; padding:0; width:180px;}
.item_menu{ background:url(../images/bg_menu_titulo2.gif) repeat-x bottom #A2BEE1; height:27px; text-align:right; padding-right:15px; width:155px; list-style:none; font-size:12px; color:#17375E; display:block; text-decoration:none;}
.item_menu_a{font-size:12px; color:#17375E; text-decoration: none;}
.item_menu_maior{ background:url(../images/bg_menu_titulo2.gif) repeat-x bottom #A2BEE1; height:38px; text-align:right; padding-right:15px; width:155px; list-style:none; font-size:12px; color:#17375E; display:block; text-decoration:none;}


.item_sub_menu{ background: url(../images/bg_menu_sub_item.gif) repeat-x bottom #CCDBEE; height:27px; text-align:right; padding-right:15px; list-style:none; display:block; width:155px; position:}
.item_sub_menu_a{font-size:12px; color:#17375E; text-decoration: none; padding-left:10px;}

#container_centro{ width:540px; height:auto; float:left; margin-left:15px;}
#container_direita{ width:200px; height:auto; float: right; padding-right:10px;}
#container_direita img{ border:none; text-decoration:none;}


/************************* Menu de imagens **********************************/
#menu_images{
background:url(../images/bg_topo_m_images.png) no-repeat;
padding-left:20px;
padding-top:10px;
width:545px;
height:190px;
margin-left:8px;
}
/************************* Fim Menu de imagens **********************************/

/*************************Exibição Conteúdo**********************************/
#conteudo{
width:545px;
margin:0; padding:0; text-align:left;
height: auto;
margin-top:5px;
padding-bottom:1000em;
margin-bottom:-999.5em;
}

/*************************Titulo**********************************/
.contentheading{font-size:16px;
font-weight:800;
color:#003366;
padding-left:30px;


}
/*************************Link Titulo**********************************/
.contentheading a{font-size:16px;
font-weight:800;
color:#003366;
padding-left:17px;


}
.contentpaneopen{ color:#0066CC; padding: 15px 15px 15px 25px; width:535px; text-align:left; margin-left:10px; background: url(../images/bg_apresentacao_conteudo.png) no-repeat #FFF; margin-top:-15px; height:160px;}
.contentpaneopentitle{ width:400px; text-align:left; margin-left:30px;}
.contentpaneopentitlegeral{padding:3px; width:488px; text-align:left; margin-left:10px; background:url(../images/bg_topo_conteudo.png) top no-repeat #FFF; margin-left:33px;}
.contentpaneopengeral{ color:#0066CC; padding-left:35px; width:535px; text-align:left; margin-left:10px; background: url(../images/conteudo.png) bottom no-repeat #FFF; padding-right:35px;}
/**background: url(../images/bg_apresentacao_conteudo.png) no-repeat #FFF;**/
.readon {background-color:#003366 ; color:#FFFFFF; padding:1px; float:right; margin-right:5px; margin-top:-10px; margin-bottom:10px;}
.readon:hover{background-color:#FFFFFF; color:#003366;}
/*************************Data e Hora**********************************/
.createdate{color:#666666;}
/************************* Fim Exibição Conteúdo******************************/

#rodape_geral{ width:986px; clear:both; background: url(../images/bg_rodape.png) no-repeat;height:146px; color:#17375E;}
#menu_rodape{width:100%; text-align:center; height: 25px;}
#menu_rodape ul{ margin:0; padding:0; display:inline-block; width:650px;}
#menu_rodape ul li{ list-style:none; margin:5px; float:left; padding:3px 30px 0 30px;}
#menu_rodape ul li a{ color:#FFFFFF;}
#menu_rodape ul li a:hover{ background-color:#FFFFFF; color:#17375E; padding:5px;}


#dados_copyright{ float:left; text-align:left; height:64px; width:650px; padding: 15px; font-size:9pt;}
.dados{float:left; text-align:left; color:#17375E; margin:0; padding:0;}
#dados_copyright img{ float:right;}
div._fonte{font-size:16px; font-weight: bold; color:#006699;}
.banneritem_pad{margin:0; margin-top:5px; margin-bottom:10px;}
#bloco_dir p{margin:0; margin-bottom:10px;}

#desenvolvedor{clear:both;}
.flutuar_esquerda{float: left;}
.flutuar_direita{float: right;}
#sub{
display: none;
}
.ThumbPagIni{height:96px; float: left; margin: 5px; border: 2px solid black;}

Aí está espero que possa me ajudar.
Grato
Lucas

Please Entrar ou Registrar to join the conversation.