hack para IE

The Leandro Machado · Junho 8, 2010

Pessoal, nunca desenvolvi muita coisa, porem estou mechendo num site do meu serviço aqui para testar porque o antigo é uma b#$%#$ de horrivel.

Fiz algo em css e tal e estou editando, no firefox esta abrindo perfeitamente, porém quando tento abrir no IE fica tudo fora do local, alguém por favor sabe como consertar?

LINK DO SITE: www.novanazare.mt.gov.br/novo/

CSS:

body  {
margin : 0;
padding : 0;
background : #4c9bcd url(images/img01.jpg) repeat-x left top;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
color : #919191;
}
h1, h2, h3 {
margin : 0;
text-transform : uppercase;
font-weight : normal;
color : #4c9bcd;
}
h4 {
margin : 0;
text-transform : capitalize;
font-weight : normal;
font-family : Georgia, "Times New Roman", Times, serif;
color : #549900;
}
h1 {
font-size : 44px;
}
h2 {
font-size : 18px;
}
h4 {
font-size : 32px;
}
p, ul, ol {
margin-top : 0;
line-height : 240%;
text-align : justify;
}
a {
color : #4999cb;
}
a:hover {
text-decoration : none;
}
a img {
border : none;
}
img.left {
float : left;
margin : 7px 30px 0 0;
}
img.right {
float : right;
margin : 7px 0 0 30px;
}
hr {
display : none;
}
.list1 li {
float : left;
line-height : normal;
}
.list1 li img {
margin : 0 30px 30px 0;
}
.list1 li.alt img {
margin-right : 0;
}
#header {
width : 940px;
height : 68px;
margin : 0 auto;
background : url(images/img02.jpg) no-repeat left top;
}
#menu {
float : left;
width : 500px;
height : 68px;
}
#menu ul {
margin : 0;
padding : 15px 0 0 5px;
list-style : none;
line-height : normal;
}
#menu li {
display : block;
float : left;
}
#menu a {
display : block;
float : left;
height : 32px;
padding : 10px 20px 0 20px;
letter-spacing : -1px;
text-decoration : none;
text-align : center;
text-transform : capitalize;
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
font-weight : normal;
color : #ffffff;
}
#menu a:hover {
text-decoration : none;
}
#search {
float : right;
padding : 10px 10px 0 0;
}
#search form {
float : right;
margin : 0;
padding : 4px 0 0 0;
}
#search fieldset {
margin : 0;
padding : 0;
border : none;
}
#search input {
float : left;
font : 12px Arial, Helvetica, sans-serif;
}
#search-text {
width : 170px;
margin-top : 8px;
margin-left : 60px;
margin-right : 40px;
padding : 6px 0 0 7px;
border : none;
background : none;
font-family : Arial, Helvetica, sans-serif;
color : #838383;
}
#search-submit {
width : 82px;
height : 28px;
margin-left : 10px;
padding : 0 5px;
background : url(images/img03.jpg) no-repeat left top;
border : none;
text-indent : -9999px;
color : #ffffff;
}
#page {
width : 880px;
margin : 0 auto;
padding : 40px 30px 0 30px;
background : #222222;
}
#logo {
width : 920px;
height : 45px;
margin : 0 auto;
padding-top : 5px;
padding-left : 20px;
}
#logo h1, #logo p {
float : left;
margin : 0;
line-height : normal;
text-transform : lowercase;
font-weight : normal;
color : #ffffff;
}
#logo p {
padding : 13px 0 0 5px;
text-transform : lowercase;
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 13px;
color : #ffffff;
}
#logo h1 {
letter-spacing : -1px;
font-size : 30px;
}
#logo a {
text-decoration : none;
color : #ffffff;
}
#banner {
padding-bottom : 20px;
}
#content {
float : left;
width : 600px;
}
.post {
margin-bottom : 30px;
padding-bottom : 20px;
border-bottom : 1px dashed #1d1d1d;
background : #1e1e1e;
}
.post .title {
padding : 4px 20px 0 20px;
height : 44px;
background : #161616;
}
.post .title a {
text-decoration : none;
text-transform : capitalize;
font-size : 30px;
color : #4999cb;
}
.post .date {
display : inline-block;
margin : 0;
padding : 0 10px;
color : #ffffff;
}
.post .meta {
margin-left : 2px;
padding : 10px 30px 0 10px;
font-family : Arial, Helvetica, sans-serif;
font-weight : normal;
font-size : 10px;
color : #66665e;
}
.post .meta span {
margin : 0;
}
.post .meta a {
padding : 8px 10px 5px 10px;
text-decoration : none;
color : #ffffff;
}
.post .entry {
padding : 30px 20px 20px 20px;
}
.post .links {
display : block;
width : 120px;
height : 25px;
margin : 0;
padding : 10px 0 0 20px;
background : #161616 url(images/img10.jpg) no-repeat right top;
text-decoration : none;
font-family : Arial, Helvetica, sans-serif;
font-size : 11px;
text-decoration : none;
font-weight : bold;
color : #ffffff;
}
.post .comments {
display : block;
width : 120px;
height : 18px;
margin : 0;
padding : 3px 0 0 40px;
background : #90bf35;
border : 1px dashed #1d1d1d;
text-decoration : none;
font-family : Arial, Helvetica, sans-serif;
font-size : 11px;
text-decoration : none;
font-weight : bold;
color : #ffffff;
}
#sidebar {
float : right;
width : 240px;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
#sidebar ul {
margin : 0;
padding : 0;
list-style : none;
line-height : normal;
}
#sidebar li {
margin-bottom : 30px;
padding : 0 0 10px 0;
background : #1e1e1e;
}
#sidebar li ul {
margin : 0 0;
}
#sidebar li li {
margin : 0;
padding : 8px 0 8px 0;
border-bottom : 1px solid #222222;
}
#sidebar li li a {
padding : 0 20px;
font-weight : normal;
}
#sidebar li li a:hover {
color : #666666;
}
#sidebar p {
margin : 0;
padding : 0 14px;
}
#sidebar h2 {
height : 30px;
margin : 0 0 10px 0;
padding : 6px 20px 2px 20px;
background : #161616;
text-transform : capitalize;
font-size : 18px;
font-weight : normal;
color : #4999cb;
}
#sidebar p {
line-height : 200%;
}
#sidebar a {
text-align : left;
text-decoration : none;
font-weight : bold;
color : #666666;
}
#calendar caption {
padding-bottom : 5px;
font-weight : bold;
}
#calendar table {
width : 100%;
border-collapse : collapse;
border-bottom : 1px solid #24130f;
border-left : 1px solid #24130f;
border-right : 1px solid #24130f;
}
#calendar thead th {
padding : 5px 0;
text-align : center;
border-top : 1px solid #24130f;
border-left : 1px solid #24130f;
background : #24130f;
}
#calendar tbody td {
padding : 5px 0;
text-align : center;
border-top : 1px solid #24130f;
border-left : 1px solid #24130f;
border-bottom : 1px solid #24130f;
}
#calendar tfoot td {
padding : 5px;
border-left : 1px solid #24130f;
border-bottom : 1px solid #24130f;
}
#calendar tfoot #next {
border-top : 1px solid #24130f;
text-align : right;
}
#calendar tfoot #prev {
border-top : 1px solid #24130f;
}
#calendar .pad {
border-bottom : 1px solid #24130f;
}
#calendar #today {
background : #24130f;
}
#footer {
width : 940px;
height : 120px;
margin : 0 auto;
padding : 0;
background : url(images/img09.jpg) no-repeat left top;
}
#footer p {
margin : 0;
padding : 30px 0 0 30px;
text-align : center;
text-transform : uppercase;
line-height : normal;
font-size : 10px;
}
#pages {
padding : 3px;
}
#pages ul {
list-style-type : none;
}
#pages li {
float : left;
display : inline;
margin : 0 5px 0 0;
display : block;
}
#pages li a {
color : #88af3f;
padding : 4px;
border : 1px solid #ddd;
text-decoration : none;
float : left;
}
#pages li a:hover {
color : #638425;
background : #f1ffd6;
border : 1px solid #85bd1e;
}
#pages li.nolink {
color : #ccc;
border : 1px solid #f3f3f3;
padding : 4px;
}
#pages li.current {
color : #fff;
border : 1px solid #b2e05d;
padding : 4px;
background : #b2e05d;
}
.aumentaimg a span {
display : none;
}
.aumentaimg a:hover span {
background : #ffffff;
display : block;
position : absolute;
z-index : 100;
}
.aumentaimga:hover em {
z-index : 1;
display : none;
}
.aumentaimg a img {
border : 1px solid #000;
}
.aumentaimg a:hover img {
border : 1px solid #000;

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>..:Prefeitura Municipal de Nova Nazare.:.MT:..</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
&lt;script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
&lt;script type="text/javascript" src="jquery/jquery.slidertron-0.1.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
@import "slidertron.css";
</style>
</head>
<body>
<!-- end #header-wrapper -->
<div id="logo"><img src="logo.png" width="100" height="80"/></img></div></div><br /><br />
<div id="logo">
    <h4><em><a href="index.html">Nova Nazaré - MT </a></em></h4>
    <h2><p><em> o futuro é agora.</em></p></h2>
</div>
<div id="header">
    <div id="menu">
        <ul>
            <li><a href="index.html" class="first">Inicio</a></li>
            <li class="current_page_item"><a href="construcao.html">Publicações</a></li>
            <li><a href="construcao.html">Legislação</a></li>
            <li><a href="construcao.html">Conheça</a></li>
        </ul>
    </div>    
    <!-- end #menu --></img>
    <div id="search">
        <form method="get" action="">
            <fieldset>
                <input type="text" name="s" id="search-text" size="15" />
            </fieldset>
        </form>
    </div>
    <!-- end #search -->
</div>
<!-- end #header -->
<hr />
<!-- end #logo -->
<div id="slideshow">
    <!-- start -->
        <div id="foobar">
        <div id="col1"><a href="#" class="previous"> </a></div>
        <div id="col2">
            <div class="viewer">
                <div class="reel">
                    <div class="slide"><img src="images/img04.jpg" width="726" height="335" alt="" /> <span>Administração 2009-2012.</span> </div>
                    <div class="slide"><img src="images/img07.jpg" width="726" height="335" alt="" /> <span>Transporte Escolar de Qualidade.</span> </div>
                    <div class="slide"><img src="images/img08.jpg" width="726" height="335" alt="" /> <span>Construção de Creche Municipal no valor de R$:1.300.000,00</span> </div>
                </div>
            </div>
        </div>
        <div id="col3"><a href="#" class="next"> </a></div>
    </div>
    &lt;script type="text/javascript">

                        $('#foobar').slidertron({
                            viewerSelector:            '.viewer',
                            reelSelector:            '.viewer .reel',
                            slidesSelector:            '.viewer .reel .slide',
                            navPreviousSelector:    '.previous',
                            navNextSelector:        '.next',
                            navFirstSelector:        '.first',
                            navLastSelector:        '.last'
                        });
                        
                    </script>
    <!-- end -->
</div>
<div id="page">
    <div id="page-bgtop">
        <div id="content">
            <div class="post">
                <p class="meta"><span class="date">Terça-Feira, 08 de Junho de 2010 </span> 9:18 AM Postasi por <a href="mailto:batistass9@hotmail.com">João Batista </a></p>
                <h2 class="title"><a href="#">novo Site no AR </a></h2>
                <div class="entry">
                  <p>No dia 08 de Junho de 2010 foi inaugurado o novo site do Municipio de Nova Nazaré - MT, trazendo um visual mais moderno e agil na abertura do site.                    
                    <p>Atualizações constantes serão feitas. <a href="galeria/real/farmacia2.jpg"></a><br />
                      
                    </div>
                <div><a href="mailto:batistass9@hotmail.com" class="links">Ass. de Imprensa </a></div>
            </div>
          <div class="post">
                <p class="meta"><span class="date">Terça-Feira, 08 de Junho de 2010 </span> 8:50 AM Postasi por <a href="mailto:batistass9@hotmail.com">João Batista </a></p>
                <h2 class="title"><a href="#">Colação de Grau - Administração UNIC</a></h2>
                <div class="entry">
                    <p>Nova Nazaré recebe os primeiros Bacharel em Administração de Empresa, são muitos   motivos para comemorar, pois, são quatro anos de muita luta e a Prefeitura   Municipal de Nova Nazaré participou desta luta do começo ao fim, com bolsas   universitárias em parceria com a UNIC CUIABÁ.<br />
                      A colação de grau ocorreu no   dia 13 de Maio de 2010 no rescinto da Igreja Evangélica Assembléia de Deus -   Ministério Madureira, logo a seguir houve a comemoração com uma grande   festividade nas dependencias da quadra poli-esportiva de nosso   municipio.<br />
                      Parabéns aos nossos Formandos.<br />
                      <div class="aumentaimg">
<a href="#"><em><img alt="Teste do Leandro Machado" src="galeria/colacao1.jpg" width="100px" height="70px" /> </em><span>
<img alt="Testado por Leandro Machado" src="galeria/colacao1.jpg" width="300px" height="210px"/> </span> </a>   
<a href="#"><em><img alt="Teste do Leandro Machado" src="galeria/colacao2.jpg" width="100px" height="70px" /> </em><span>
<img alt="Testado por Leandro Machado" src="galeria/colacao2.jpg" width="300px" height="210px"/> </span> </a>   
<a href="#"><em><img alt="Teste do Leandro Machado" src="galeria/colacao3.jpg" width="100px" height="70px" /> </em><span>
<img alt="Testado por Leandro Machado" src="galeria/colacao3.jpg" width="300px" height="210px"/> </span> </a>  </div>
                    <br />
                      <br />
                       </p>
            </div>
                <div><a href="mailto:batistass9@hotmail.com" class="links">Ass. de Imprensa </a></div>
                <div align="center"><div id="pages">
    <ul>
        <li><a href="index.html">1</a></li>
        <li><a href="cat197.html">2</a></li>
        <li><a href="cat198.html">3</a></li>
        <li><a href="cat199.html">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
        <li><a href="#">9</a></li>
        <li><a href="#">10</a></li>
    </ul>
</div>
</div>
          </div>
        </div>
        <!-- end #content -->
        <div id="sidebar">
            <ul>
                <li>
                    <h2>Calendário</h2>
                    &lt;script language="JavaScript"> 
function moveRelogio(){ 
    momentoAtual = new Date() 
    hora = momentoAtual.getHours() 
    minuto = momentoAtual.getMinutes() 
    segundo = momentoAtual.getSeconds() 

    horaImprimivel = hora + " : " + minuto + " : " + segundo 

    document.form_relogio.relogio.value = horaImprimivel 

    setTimeout("moveRelogio()",1000) 
} 
</script> 
<body onload="moveRelogio()"> 
<form name="form_relogio"> 
<input type="text" name="relogio" size="10" style="background-color : Grey; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;" onFocus="window.document.form_relogio.relogio.blur()"> 
</form> 

&lt;script type="text/javascript" language="JavaScript">
<!--
function calendar()
{
var monthNames = new Array("Janeiro", "Fevereiro", "Março", "Abril",
"Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");
var today = new Date();
var thisDay = today.getDate();
var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

year = today.getYear();
// ano bissexto?
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
monthDays[1] = 29;
// achar o numero de dias deste mes
nDays = monthDays[today.getMonth()];
firstDay = today;
firstDay.setDate(1);
startDay = firstDay.getDay();
document.writeln("<CENTER>");
document.write("<TABLE BORDER>");
document.write("<TR><TH COLSPAN=7>");
document.write(monthNames[ today.getMonth() ] + " " + year);
document.write("<TR><TH>");
document.write("Dom<TH>Seg<TH>Ter<TH>Qua<TH>Qui<TH>Sex<TH>Sab");
document.write("<TR>");
column = 0;
for (i=0, column=0; i<startDay; i++, column++)
document.write("<TD>");

for (i=1; i<=nDays; i++)
{
document.write("<TD>");
if (i == thisDay)
document.write("<FONT COLOR=\"#FF0000\">" + i + "</FONT>");
else document.write(i);
column++;
if (column == 7)
{
document.write("<TR>"); // inicio de nova linha
column = 0;
}
}
document.write("</TABLE>");
document.writeln("</CENTER>");
}
calendar();
//-->
</script>
                </li>
                <li>
                    <h2>Secretarias Municipais </h2>
                    <ul>
                        <li><a href="#">Prefeita</a></li>
                        <li><a href="#">Sec. Administração</a></li>
                        <li><a href="#">Sec. Finanças</a></li>
                        <li><a href="#">Sec. Saúde</a></li>
                        <li><a href="#">Sec. Educação</a></li>
                        <li><a href="#">Sec. Ação Social</a></li>
                        <li><a href="#">Sec. Obras e Serviços</a></li>
                        <li><a href="#">Sec. Agricultura</a></li>
                    </ul>
                </li>
                <li>
                    <h2>Utilidade</h2>
                    <ul>
                        <li><a href="www.receita.fazenda.gov.br">Receita Federal</a></li>
                        <li><a href="www.pgfn.fazenda.gov.br/">Dívida Ativa</a></li>
                        <li><a href="www010.dataprev.gov.br/cws/contexto/cnd/cnd.html">INSS</a></li>
                        <li><a href="www.sefaz.mt.gov.br/">Sefaz</a></li>
                        <li><a href="https://webp.caixa.gov.br/cidadao/Crf/FgeCfSCriteriosPesquisa.asp">FGTS</a></li>
                        <li><a href="https://www.previdencia.gov.br/">Previdência</a></li>
                        <a href="contato.html"><img src="email.png" width="52" height="43" /></a>            
                    </ul>
                </li>
            </ul>
        </div>
        <!-- end #sidebar -->
        <div style="clear: both;"> </div>
    </div>
    <!-- end #page -->
</div>
<div id="footer">
    <p>Todos os Direitos Reservados Pref Mun Nova Nazare 2009-2012. Feito por <a href="mailto:sr.machado@gmail.com">Leandro Machado.</a></p>
</div>
<!-- end #footer -->
</body>
</html>

alguém pode me ajudar por favor na solução?

desde já, muito obrigado

*FIT* · Junho 9, 2010

Bom, primeira coisa a se fazer ao estruturar um site, é verificar se o CSS está dentro dos padrões da W3C, verifiquei o seu site lá, e constam alguns erros.

Segue o link abaixo da verificação para você dar uma olhada, tente ir arrumando aos poucos e validando, no final se ainda sim tiver alguma coisa errada, damos um jeito.

http://jigsaw.w3.org/css-validator/validat...&lang=pt-BR

Abraços ;)

The Leandro Machado · Junho 9, 2010

Bom, primeira coisa a se fazer ao estruturar um site, é verificar se o CSS está dentro dos padrões da W3C, verifiquei o seu site lá, e constam alguns erros.
Segue o link abaixo da verificação para você dar uma olhada, tente ir arrumando aos poucos e validando, no final se ainda sim tiver alguma coisa errada, damos um jeito.
http://jigsaw.w3.org/css-validator/validat...&lang=pt-BR
Abraços ;)

mano, a maioria dos alertas (uns 90%) é sobre cor. mas irei mecher, a grande dificuldade ai é que nos POSITION: relative e absolute esta com alguma interpretação incorreta do IE e eu não estou sabendo como fazer...

*FIT* · Junho 9, 2010

São muitas divs, e pode estar dando algum conflito entre os floats no IE, aconselho 2 complementos do firefox, a FIREBUG junto com o IEtab, assim você simula o IE no firefox e usa a firebug para ir tentando encontrar o erro, ai o jeito é chutar, tira um float aqui, muda um position ali, e vai tentando arrumar, na verdade é o melhor jeito, as vezes é uma coisa besta, um display block, algo assim, mas a olho fica dificil saber.

Dei uma olhada por cima, e não vi uma div geral que englobe todas as outras divs, eu costumo fazer isso, pois toda a parte de centralização da página eu configuro nela, e monto as outras divs dentro.

Entrar

hack para IE

Pergunta

The Leandro Machado

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

FIT

Link para o comentário

Compartilhar em outros sites

The Leandro Machado

Link para o comentário

Compartilhar em outros sites

FIT

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades