Padrões Web e CSS – Caio J Ruman

Se você já usou alguma vez uma imagem para background de um input text, sabe que no IE6, para a imagem não dar scroll quando uma quantidade de texto maior que o tamanho da caixa de texto for digitada, é só declarar background-attachment: fixed. Preferencialmente numa folha de estilos própria para o IE6.
Infelizmente, isso não funciona no IE7.

Até o momento, só há 2 modos de fazer com que a imagem não de scroll junto com o texto.

Primeiro modo, e mais simples e besta: Definir um maxlenght para a caixa de texto do mesmo tamanho da mesma.

Segundo modo, quando o primeiro modo não for possível:

Coloque um span em volta do input text, e na folha de estilos própria para o IE7, remova o background do input text e coloque no span.

Segue exemplo abaixo:
Exemplo do fix para background-image no IE7

Não é a alternativa mais elegante, mas é a única que eu descobri até o momento.
Se você não quiser “sujar” o html com tags inúteis, você pode colocar os spans via javascript.

Algo que os designers da empresa que trabalho sempre fazem, e eu não sabia um modo de fazer usando os padrões, era o de usar backgrounds diferentes para as laterais de uma página. Eu também nunca tinha parado para pensar em um modo de fazer. Normalmente quando precisava fazer isso, eu usava uma imagem grande, em torno de 1400-1600px de largura, para ser o background da página. Ou iria reclamar com o designer!
Então eu participei do concurso do site cssoff, e o vencedor do primeiro concurso usou essa técnica que eu vou descrever agora:

Em volta de todo o conteúdo do site, coloque duas divs, e de um id para elas, por exempo, #bgright e #bgleft. No exemplo elas estarão envolta da div #principal.

A div #principal estará centralizada, com um tamanho fixo (800px), e a seguinte margin:

margin: 0 auto 0 -400px;

Atente ao detalhe da margem esquerda tem um valor negativo que é a metade do tamanho da div. Isso é importante para centralizar a div #principal usando essa técnica.

A div #bgleft só precisa ter um background a sua escolha.
A div #bgright precisa ter um background a sua escolha e margin-left: 50%.

Pronto!

Página de exemplo: Exemplo para background laterais diferentes

O único porém dessa técnica, é que você vai ter uma ou duas divs sem sentido envolvendo todo o site.

Nota:
A ordem das divs tem que ser exatamente essa. #bgleft, #bgright com margin-left: 50% e a #principal com um tamanho fixo e margin: 0 auto 0 -x, onde x é metade do tamanho da div principal.
Caso a ordem das divs #bgleft e #bgright forem invertidas e aplicar margin-right: 50% na bgleft, o site não irá centralizar no Safari vs. 3.0.3 Windows. Nos outros browsers em que testei irá se comportar normalmente.

Nota2:
Você pode remover a div #bgleft, e o background esquerdo passa a ser a tag body. Desse modo é uma tag inútil a menos no html.

Dúvidas e sujestões? Entre em contato ou deixa um comentário abaixo!

E tem início o meu blog sobre css e padrões!
Aqui pretendo postar sempre que possível técnicas e dicas de css, comentários sobre o trabalho e o que me der na telha!