Problemas com o layout

[lpslucasps]

Lembram aqueles problemas causados por uma mudança na posição de um bloco de código do template, o que me levou a fazer dois posts com soluções para eles?
Pois bem, a equipe do site reverteu a mudança, então minhas soluções agora estão causando problemas! Mas não temam, a equipe é esperta: reverteram as modificações não só dos templates, mas dos arquivos CSS também.

Se estiverem enfrentando problemas com a renderização da página, limpem o cache de seu navegador. Peço que façam este simples procedimento antes de postarem aqui.

Eu falando assim até parece que sou da equipe de design do site, haha.

[Saishy]

Eu falando assim até parece que sou da equipe de design do site, haha.

Implicando que o site tem uma equipe de design.

[Gyorg Millenium]

Não sei se resolveu a solução do alinhamento para vocês, mas para mim está desalinhado e encontrei algumas inconsistências no CSS. Por exemplo, vocês querem criar a tabela com uma largura relativa, mas usam margens e padding em pixels, o que não resolve.



Então eu removo todas as definições fixas, que incrementam a largura relativa das colunas.

Código: Selecionar todos

style.php:976
li.header dl.icon dt {
padding-left: 0;
padding-right: 0;
}

style.php:989
dl.icon dt {
padding-left: 0;
background-repeat: no-repeat;
background-position: 5px 95%;
}

style.php:896
ul.topiclist dt {
width: 50%;
font-size: 1.1em;
padding-left: 0;
padding-right: 0;
}


Aqui tinha um table-cell no display, eu não usaria isso se quiser uma tabela cross-browser, é bugado no IE8 e nem funciona no 7 a menos que force o hasLayout.

Código: Selecionar todos

style.php:3159
ul.topiclist li.row dt, ul.topiclist li.row dd {
display: block;
float: left;
vertical-align: middle;
}


Alinhamento em 1024px


Alinhamento em 1366px


Até essas mudanças, o alinhamento vai funcionar bem em qualquer resolução, mas como removi o padding para tirar as diferenças de largura entre o cabeçalho/linhas os textos ficaram por cima do ícone da caixinha. Sugiro usar a caixinha como background de uma tag, ou como imagem e deixar o alt com seu significado, e manter flutuando a esquerda com uma pequena margem direita e esquerda de 5 ou 10px, dessa forma eles não afetam a largura das outras colunas mesmo sendo fixo, porque estão atuando como conteúdo do bloco.

Com a retirada do table-cell, algumas coisas vão ficar mal alinhadas verticalmente, mas isso pode ser ajustado por padding top/bottom, se necessário.

Espero que ajude ii'