Vamos iniciar os truques com a criança problema atual, o IE5.

Abra seu navegador IE5. Há duas coisas que eu notei instantaneamente que estão erradas. A primeira é que a página não é centralizada como deveria ser, e a segunda é que o rodapé tem um problema de alinhamento estranho.

O problema de alinhamento é bem conhecido, então vamos nos deter primeiramente neste.

O IE 5 e o 5.5 não reconhecem a propriedade CSS margin: auto; como deveria ser. Para corrigir isto, necessitamos usar a propriedade text-align: center; no body, que vai centralizar o contêiner div.

        body {
            font-family: Arial, Helvetica, Verdana, Sans-serif;
            font-size: 12px;
            color: #666666;
            text-align: center;
        }

Isto vai centralizar nosso contêiner div, mas vai centralizar também todo o texto dentro do div. Nós não queremos isto, então necessitamos sobrescrever o text-alignment dentro do contêiner div.

        #page-container {
            width: 760px;
            margin: auto;
            text-align: left;
        }

O que resolve o problema de centralização.

Agora, o rodapé esquisito.

Eu não consegui encontrar atualmente qualquer referência a este bug particular através de uma rápida pesquisa no google, então eu tentei imaginar um jeito de consertar isso. Eu pensei que o bug tinha algo a ver com o div altnav flutuante mas não pude identificar onde estava o problema exatamente. Então, eventualmente eu tentei colocar um div ao redor da informação de copyright e que fez com que o bug desaparecesse.

        <div id="copyright">
            Copyright © Enlighten Designs<br />
            Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
            <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
        </div>

Isto disparou alguns problemas de padding-top no rodapé, então eu removi o atributo padding-top: 13px; da regra #footer, e adicionei a ambas as div's: #copyright e #altnav.

        #footer #altnav {
            clear: both;
            width: 350px;
            float: right;
            text-align: right;
            padding-top: 13px;
        }

        #footer #copyright {
            padding-top: 13px;
        }

Há um último bug do IE que pude verificar, e é quando você passa o cursor do mouse sobre item selecionado da navegação. Ele reverte o fundo para branco como se não fosse selecionado. Nós não queremos que o item selecionado mude quando o cursor do mouse estiver sobre ele.

Se adicionarmos mais algumas poucas regras para nossa enorme regra que define a seleção da navegação, teremos nosso problema solucionado.

        body.about dt#about,
        body.about dt#about a,
        body.about dt#about a:hover,
        body.services dt#services,
        body.services dt#services a,
        body.services dt#services a:hover,
        body.portfolio dt#portfolio,
        body.portfolio dt#portfolio a,
        body.portfolio dt#portfolio a:hover,
        body.contact dt#contact,
        body.contact dt#contact a,
        body.contact dt#contact a:hover {
            background-position: 0 -100px;
        }

E agora está tudo certo. Espero que você tenha aprendido alguma coisa sobre layouts em CSS. Minha recomendação é que você procure mais sites especializados em CSS como os listados abaixo e repare em suas codificações HTML/CSS para ver como eles tem feito as coisas funcionarem. Em caso de dúvida, dê uma googlada.

Sinta-se à vontade para sugerir modificações ou melhorias neste tutorial (diretamente com o autor, em inglês), ou pergunte por tutoriais em outros tópicos do site.

Outras boas fontes:

A List Apart
Mezzoblue
SimpleBits

Voltar   Avançar