Min-height, hack rápido e fácil

Olá pessoal, hoje vou falar de um hack bem fácil pra se usar com a propriedade min-height. Talvez alguns não saibam, mas o IE 6 não interpreta esta propriedade.

Muitos estão se perguntando, nunca ouvi falar disso, o que esta propriedade faz cara?

Bem, esta propriedade simplesmente define uma altura mínima para o elemento em que for declarado, se os elementos forem filhos de um outro elemento e o conteúdo couber dentro do elemento pai então a altura não é alterada, mas se o conteúdo extrapolar a altura do elemento pai, então a altura é aumentada de acordo que o conteúdo se encaixe perfeitamente no elemento pai.

Bom, por motivos de clareza vamos exemplificar com imagens de renderização no IE 6 e Firefox.

Primeiro quero mostrar a diferença entre height e min-height no Firefox pra vocês:

O primeiro parágrafo foi definido como:
height: 60px;

E o segundo como:
min-height: 60px;

Vejam como o texto extrapolou o parágrafo e está fora dos limites, isto porque no total o parágrafo tem 96px de altura, mas só foi definido 60px usando a propriedade height. Agora no segundo parágrafo ficou tudo no tamanho certo, mesmo que tenha sido definido 60px usando min-height o tamanho foi ajustado de acordo com a largura do box que contém o texto.

Agora no IE 6:

No IE 6 não parece ter nenhum efeito, pois é, o IE 6 e anteriores não reconhecem a propriedade min-height, então ignoram esta propriedade, nestes navegadores height funciona como min-height, então ao definir um valor menor para o primeio parágrafo, o mesmo foi redimensionado para o tamanho ideal. No segundo paragráfo min-height é ignorado e como height tem o valor padrão como auto, tudo foi redimensionado, mas não é isso o que queremos, queremos que o segundo parágrafo tenha uma altura mínina.

A maneira correta de ser renderizado seria a do firefox, usando min-height, porque height mantém um valor fixo para um box.

Mas enfim cheguei aonde queria, para resolver este problema usamos um hack para que seja renderizado nos 2 browsers corretamente.

Vamos usar o hack com a declaração !important.

Bem não vou entrar em detalhes sobre esta declaração para que o post não fique muito extenso e também há bastante conteúdo sobre o assunto, talvez no próximo post comento um pouco sobre isto.
Mas vou deixar o link do blog do maujor pra quem quiser entender melhor esta declaração.

Muito bem chega de enrolação e vamos ao hack agora, segui o código:

min-height: 60px;
height: auto !important;
height: 60px;


Usamos no box que contém a propriedade height este hack e o firefox passa a reconhecer o valor de min-height e do height que contém a declaração com !important, porque tem maior prioridade, como o valor de height neste caso é auto — que é o valor padrão da propriedade height — o valor de height será igual ao tamanho de min-height para acomodar o conteúdo do box. Já no IE 6 e anteriores o valor de min-height não é reconhecido e é ignorado. Estes browsers não reconhecem a declaração !important, como há outra propriedade height logo após, o valor auto é substituído pelo valor da segunda propriedade height, e então tudo será renderizado conforme planejado.

Este hack funciona no IE 6 e anteriores, no Firefox, no Opera, no Safari.

É isso aí! Comentem se for possível!

Abraços, façam bom proveito!

Introdução a CSS

Bem, vou começar falando sobre Cascading Style Sheet, em português Folha de Estilo em Cascata.

As CSS foram criadas com o intuito de separar a marcação (X)HTML da apresentação da página, assim o (X)HTML é usado na estrutura da página, enquanto as CSS são usadas para criar estilos à elementos e tem muito mais poder do que os elementos visuais do HTML.

Usando folhas de estilos em sua página tudo fica melhor e mais fácil, criando um arquivo de folha de estilo separado você terá total domínio da apresentação, podendo em uma manutenção futura alterar o estilo de todas as páginas de uma vez só, aliás construindo um site com CSS e XHTML semântico (semântica significa: estudo da significação atual das palavras de uma língua, ou seja, em XHTML há semântica quando as marcações são usadas com a finalidade a qual foram criadas) fica muito mais simples e rápido para encontrar e editar uma marcação, com tabelas o processo é muito mais complicado se o site tiver um conteúdo razoavelmente maior, além de dificultar a manutenção do site é errado usar tabelas para montar um layout, tabelas não foram feitas para isso e sim para exibir dados tabulares (hehe, to cansado de ouvir isso).

Pessoal é isso aí por hoje é só isso!

O site do w3schools é uma boa referência, mesmo sendo em inglês é fácil para entender.

No próximo post vou falar de um hack bacana, o Min-Height Fast Hack.

Abraços e até a próxima!

Olá amigos

Olá pessoal, hoje inauguro este blog com a finalidade de transmitir alguns conhecimentos para meus caros leitores, embora eu seja um novato ainda em Web Standards, mesmo assim serei capaz de transmitir algo para vocês.

Agradeço a visita e voltem sempre.

Ah e adicionem os feeds do blog.

Abraços!