Verifico o psd, e para minha infelicidade, vejo que a fonte não é uma fonte padrão para a web.
Começo a fazer uma lista sobre o que tentar fazer no menu. Pelo modo como estava o menu, ele parecia ser gerenciável. Então eu descartei as técnicas de background-replacement.
Sobraram duas alternativas: siFR e conversar com o cliente para mudar a fonte. Fiquei brincando por 40 min com o siFR, e a combinação site 100% com o flash do siFR não ficou boa.
Depois de perder 40 minutos nisso, eu fiz algo que deveria ter feito antes, e perguntei se o menu era gerenciável. E ele não era. Nota mental: Deixar a preguiça de segunda de manhã de lado e sempre tirar as dúvidas antes de iniciar algum projeto.

Desse modo eu comecei a recortar as imagens para fazer um background-replacement.
Após recortar e salvar todas os 10 itens do menu, percebi que faltava o estado hover deles. Como no photoshop não tinha nenhum estado hover, comecei a fazer o padrão de link, deixar o texto com text-decoration: underground. Iria salvar 2 imagens, uma para cada estado, juntar elas e trocar o estado delas no :hover com background-position. Simples.

A visão dos próximos 20 minutos de tédio que seria pegar os 10 itens do menu, deixar eles com underline, salvar as imagens novamente e depois juntar todas, desencadeou uma epifania!
Ao invés de fazer mais 10 imagens e juntá-las para o menu, eu peguei cada imagem, fiz um traço transparente embaixo de cada texto, e no :hover eu somente dei uma cor de fundo para o link. Voi-lá! E está pronto um menu com imagem e um :hover comum de text-decoration: underline.

Como algo visual vale mais que mil palavras, segue abaixo um link com exemplo!

Exemplo de um css menu, utilizando uma única imagem com detalhes transparentes e o fazendo o hover com um background-color.

Testado no IE6, IE7, Firefox, Safari e Opera, somente no windows.
O único ponto contra dessa técnica é que a imagem não pode ter mais nenhum tipo de transparência.

A uns 6 meses atraz eu passei a adotar o ‘em’ para as fontes, em todos os sites que eu estruturo.

ex:

html { font-size: 62.5%; }

body { font-size: 1em; }

Do modo acima, como a fonte padrão dos browser é 16px, a fonte de tudo fica como 10px, ou seja, 1em = 10px. Então nos outros elementos, se eu quiser a fonte como 13px, eu faço 1.3m.

Se o usuário aumentar a fonte padrão do browser, tudo aumenta também. Útil para quem não consegue ler direito.

Há um pequeno problema com isso, já que um elemento filho herda o tamanho da fonte do elemento pai, e setando um valor em ‘em’ para os 2 elementos, o tamanho da fonte do elemento filho não vai ser o que você espera.

Até hoje eu não tinha tido um retorno de ganho de tempo com isso. Até hoje! O atendimento veio com um pedido: “O cliente ligou desesperado! Precisa aumentar a fonte de todo o site! Urgente!” (incrível como tudo é urgente!).

Modificação necessária: somente 1 linha no css

body { font-size: 1.1em; }

Ahh, que maravilha. E um viva às unidades relativas.

Quando o site citado for ao ar eu coloco o endereço aqui! Por enquanto ele está em produção, então o NDA ainda conta.

ps: Vergonhosamente o meu blog não usa isso ainda. Está tudo em px mesmo XD

Foram dois hotsites para promoções de jogos da EA Games:

Promoção The Sims 2 Bon Voyage

Promoção Medal of Honor: Airborne

A minha colaboração nos 2 projetos foi o xhtml e css! Como são hotsites pequenos, eles foram simples e rápidos de fazer, com poucos problemas cross browser.

Pessoalmente, o site do Medal of Honor foi o mais fácil de fazer e o que ficou melhor. O do The Sims teve algumas mudança no meio do projeto, que ocasionaram pequenos problemas na hora de fazer certas partes do html. Além de que eu não gosto de The Sims e já joguei todos os Medal of Honor anteriores

Quanto a validação do Html dos 2 sites:
Nenhum dos 2 passa na validação. Mas são erros simples e com pouco impacto, como usar & no lugar de &. Porém, depois que você começa a trabalhar com sites grandes, e em uma agência onde várias pessoas irão mecher no código e que o prazo de entrega é curto, certas coisas se tornam muito difíceis de controlar. Deve existir um lugar perfeito, onde existam programadores e principalmente uma equipe de manutenção que não destrua um código bem feito. Enquanto eu não acho esse lugar, eu me contento em ensinar todo mundo ao meu alcance na empresa em que trabalho!

Se você comparar o código html do site da empresa, que foi feito antes de eu entrar na área que estou agora, com os sites que foram feitos desde outubro/2006 até hoje, tem uma diferença da água para o vinho!

Mudar o modo que a maioria das pessoas trabalha é difícil, mas é um bom desafio!

ps: Eu abomino o FCK Editor. Ele gera código obsoleto e desnecessário na página. Infelizmente ele é amplamente usado aqui no trabalho, e as minhas sugestões de usar um novo não foram aceitas.

Fiquei um tempo pensando do porque as imagens não estarem funcionando corretamente, mas não cheguei a nenhuma conclusão.
No horário de almoço resolvi terminar o post sobre css framework, e após postar e conferir os trackbacks (blogueiro é curioso!), vi o comentário n. 241 do post sobre css reset reloaded do Eric Meyer, que coincidentemente era exatamente o problema que eu estava tendo!

No final, a solução que eu tomei foi a seguinte:

- Tirar o img do reset principal, e fazer um exclusivo para ele, removendo a regra problemática, a vertical-align: baseline;

Problema resolvido!

E agora, voltando a procurar por um editor web fácil de usar por clientes leigos e por programadores, e que gere um código bom…

O css está dividido 7 arquivos:
base.css
estrutura.css
internas.css
reset.css
ie6.css
ie7.css
print.css

O base.css possui somente declarações principais (html, body e #principal), o import dos outros arquivos, o clearfix e classes básicas (bold, posicionamento de imagens). Esse também é o único arquivo que eu chamo no html.

O estrutura.css é o arquivo que vai conter todo o css relacionado a estrutura do site, normalmente é a home ou o esqueleto do site que se mantém por todas as páginas internas.

O internas.css contém todos os estilos das páginas internas, separados por blocos de comentário.

O reset.css é o arquivo de reset do Eric Meyer, com pequenas modificações, como a inclusão do button no reset e a remoção do line-height: 1 no body.

ie6.css e ie7.css são os estilos para o IE6 e IE7, reespectivamente.

E o print.css é o css de impressão.

Eu também inclui o arquivo iepngfix.htc, que eu uso para fazer png funcionar parcialmente no IE6.

Baixe aqui o meu arquivo de Css Framework.

Usem do modo que acharem melhor!

ps: O tema novo do blog deve sair nesse final de semana!

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.

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!