Como já quebrei my a cabeça pra fazer o position:fixed funcionar no IE6, resolvi postar para que outros não percam tanto tempo fazendo essa Missão Impossível, rs

Vamos lá, se voc6e codificar o CSS assim, ele vai funcionar na maioria dos browsers atuais :

.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* position fixed Bottom */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* position fixed Left */{position:fixed;right:auto;left:0px;}
.fixed-right /* position fixed right */{position:fixed;right:0px;left:auto;}

Porém, entretanto .. muitas pessoas ainda usam o IE6 e não podemos desprezar estes usuários, afinal, eles também geram tráfego e comprar nossos serviços e produtos.
Para driblar as bugs, faça desse jeito que irá funcionar.

Crie um IE6 Hack, que na verdade é uma réplica da classe CSS, porém só é interpretada pelos IEs qdo iniciada com um simples “*classe”. Se quiser algo somente para o IE6, utilize “_classe”

Vamos ao código:

* html,* html body {background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right {position:absolute;right:auto; left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom {position:absolute;bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left {position:absolute;right:auto; left:expression(eval(document.documentElement.scrollLeft));}

Testei aqui e funcionou perfeitamente.

Caso encontrem algum problema d eimplementação ou bug, comments please

Uma das tarefas mais chatas e demoradas para quem monta um site com layout elaborado é montar um código css e deixá-lo visivelmente igual em todos os navegadores existentes. Inclusive no I.E. 6 que até hoje é usado por grande parte dos internautas e não pode ser deixado de lado. Em um dos sites que faço estudo de marketing e SEO, o I.E. 6.0 ocupa 30% dos acessos.

Muitos progrmadores de sites ignoram este assunto e não testam seu layout em diferentes navegadores, o resultado é que você está segmentando seu público… ” suponha que você possui um estacionamento e que não tenha vagas para carros de cor prata ? Entendeu ? Perde clientes … é a mesma coisa … ”

Voltando ao asunto… imagine você programar um código que tem N compiladores diferentes, e nem todos interpretam todos os comandos da mesma maneira, pois é, achou complicado ? Realmente é.

Mas a experiência e a vivência do dia a dia te deixam craque nos macetes e particularidades que cada navegador tem e você acaba aprendendo a programar seu css de maneira global.

Porém se desejar uma ajuda extra, o site Browser Shots testa seu layout em diversos browsers e em diferentes sistemas operacionais.

Confira lá como fica seu layout e depois comente aqui sua experiência …

Até mais.

Uma excelente maneira de se diminuir o número de hits (requisições de clientes ao servidor) ao seu site e deixá-lo mais leve é adotar este conceito.

Trata-se de usar somente uma imagem com todos os botões que você irá utilizar em seu site e programar seu css para mostrar apenas uma pequena parte da imagem correspondente para cada botão.

Isto é possível através do posicionamento de background (background-position).
Por exemplo :
#botao1{
background:url(/images/botoes.png) -50px 10px no-repeat;
}
Irá mostrar somente o quadrante determina por (-50px 10px) no background do botão com id “botao1″.

O trabalho é mapear a imagem e saber as coordenadas de cada pedaço que você quer usar, porém recentemente foi criada uma ferramenta para dar auxílio nesta árdua tarefa, trata-se do Sprite Creator – http://www.floweringmind.com/sprite-creator/, acesse o site e suba sua imagem, selecione o pedaço que você quer e automaticamente ele gera para você o código CSS com as respectivas coordenadas.

Diminuindo o número de imagens carregadas em seu site, você diminui o processamento e o consequentemente seu site fica mais leve, rápido e sem exigir muito do servidor, porém se o navegador do cliente não fizer cache, esta solução não adiantará muito.

Até mais,

Complemento do Firefox para validação de padrões HTML e CSS do website pelo próprio browser.

Html Validator

Link para download do complemento: https://addons.mozilla.org/pt-BR/firefox/addon/249

Adiantou muito, agora não preciso ficar indo no http://w3c.org toda hora

Se o seu site tem algum iframe ou blocos de adsense, basta clicar no ícone da ferramenta que fica no rodapé direito do Firefox e selecionar qual arquivo você quer validar.

Se achar algum erro, ele mostrará em qual linha está e a causa.

Um site bem organizado e com semântica, fica mais visível aos robôs de busca.

Até mais …