Crossbrowsing, deu pau no ie6 e agora?

Neste post estarei tratando alguns aspectos relativos a tecnologia XHTML+CSS que é utilizada na codificação de interfaces na web.

Antigamente eu codava CSS e perdia muito tempo alinhando elementos nos browsers da época, as vezes uma ficava sem altura, eu colocava borda e o negócio não funcionava. Até que um dia eu descobri através da leitura na internet de como corrigir esses “bugszinhos” com hack’s.

O hack mais interessante que consegui fazer foi colocar o atributo “overflow: hidden” quando você tem uma div como container e 2 sub-divs com float left e right. O atributo overflow ficaria na DIV container, corrigindo o bug de altura de uma div. Segue um exemplo utilizando CSS apenas:

div#container {
    width: 400px;
    overflow: hidden
}

div#container .left, div#container .right {
    float: left;
    width: 195px
}

Outra dica interessante é utilizar uma classe para alinhar elementos com float. Geralmente tenho utilizado a seguinte definição:

.left {
    float: left;
    display: inline /* este atributo é importante para corrigir bug de padding no IE6 */
}

.right {
    float: right;
    display: inline

}

Essas dicas me auxiliam bastante quando tenho problemas de espaçamento em diferentes browsers.