Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Histórico de Bugs

Estávamos desenvolvendo um projeto com CSS Sprites, utilizando uma imagem de background com 3000px x 2800px. Ao testarmos o layout responsivo no iPad, a imagem não aparecia! Eis que, ao diminuir as dimensões da imagem, ela começou a funcionar.

Fazendo uma breve pesquisa no conteúdo do Safari Content Web Guide, da Apple, descobri que é realmente imposto um limite de dimensões para as imagens, dependendo da capacidade de memória RAM do aparelho. Sendo assim, os limites que temos são:

  • Imagens de 3 megapixels para dispositivos com menos de 256mb de memória RAM;
Podemos utilizar o cálculo width * height ≤ 3 * 1024 * 1024 para estes dispositivos inferiores.
  • Imagens de até 5 megapixels para dispositivos com 256mb ou mais memória RAM (todos os iPads se enquadram neste quesito).

Como nossa imagem tinha 8,4 megapixels, tivemos que enquadrá-la nas dimensões dentro dos 5 megapixels, resolvendo nosso “bug”.

Após uma atualização do Google Chrome, percebemos que todos nossos códigos estavam bugados pois a forma que o navegador estava renderizando a tag details é diferente.

Procuramos formas para resetar essa novidade (seta abre e fecha) e chegamos a alguns códigos para esse HTML:

<details open>
  <summary>Blog Web Standards</summary>
  <aside>Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia.</aside>
</details>

Reset CSS

details summary::-webkit-details-marker { display: none; }

Inclua no CSS essa linha conforme o seus estilos.

Reset do comportamento (abre e fecha)

A princípio desabilitamos com javascript, então escolha alguma das duas opções que desejar, com jQuery ou apenas com javascript sem jQuery.

Com jQuery
$(document).ready(function(){
  $('details summary').click(function(){
    return false;
  });
});
Sem jQuery
window.onload = function() {
	var summary = document.getElementsByTagName("summary");
  for (var i = 0; i < summary.length; i++) { 
  	summary[i].onclick = function () {
    	return false;
  	}
  }
};

Inclua um desses trechos de javascript em seu código confome desejar.

Alguma dúvida, sugestão, melhoras ou outras formas de resolver estamos a disposição

Última modificação: 12 abril 2011

Veja como resolver o bug no Firefox durante a estilização de um botão flexível (quando se usa um elemento dentro do button).

Layout do botão:

Botão

HTML:

<button class="botao" type="submit"><strong>Logar</strong></button>

CSS:

.botao,
.botao strong { display: inline-block; height: 27px; border: 0; background: url(../imagens/botao-marrom.png) no-repeat; line-height: 27px; text-shadow: rgba(72,25,24,.41) 1px 1px 0; color: #fff; }
.botao { padding-left: 12px; }
.botao strong { padding-right: 12px; background-position: right -27px; }

Nesse caso, a imagem de fundo do botão é o png “botao-marrom.png”:

Veja como o Firefox renderiza:

Botão quebrado

Para ajustar o bug, inclua o seguinte código no css:

button.botao::-moz-focus-inner { border: 0; padding: 0; }

Fonte da solução: a head creative

Última modificação: 12 abril 2011

Quando você terminar de fazer seu email marketing com HTML e partir para testar no Internet Explorer, o layout fica quebrado, com linhas entre as fatias (normalmente este problema acontece no Hotmail).

Veja um exemplo: Quebra de layout no email marketing.

[as divs com style que vocês irão ver, servem para corrigir um Bug de renderização no Hotmail, para evitar as linhas de quebra de layout]

Exemplo do Código HTML (ainda com defeito):

<tr>
<td width="100" height="100">
<img src="blog.jpg" alt="Blog" width="100" height="100" />
</td>
</tr>

Deve estar igualzinho seu código, e tudo era para dar certo mas não deu? Veja o código que vai resolver seus problemas:

<tr>
<td width="100" height="100"><img src="blog.jpg" alt="Blog" width="100" height="100" /></td>
</tr>

O IE interpreta o ENTER que você coloca para organizar seu código e indentação, como uma quebra de linha.

— RESUMO —
A solução é deixar o elemento e tudo que tem dentro, na mesma linha.

Gerador de e-mail marketing

Para facilitar o trabalho de inserção das medidas de cada imagem em sua célula-mãe e a criação de uma div envolvendo com sua altura correspondente, criamos o Gerador de e-mail marketing:

http://www.webstandards.blog.br/exemplos/gerador-email-marketing/

Última modificação: 12 abril 2011

Problema: Um bug extremamente estranho é a imagem que só funciona no Firefox, enquanto no Internet Explorer simplesmente não aparece!

Mágica? Não! Talvez o arquivo esteja corrompido.

Solução: Salvar a imagem novamente, para que funcione nos outros navegadores.