El Micox

Hopa.

Que tal editar simultaneamente o CSS no Firefox e no Internet Explorer?
Pode ser uma boa.

Então experimenta o CSSVista aí e me diz o que achou.

Todos sabem que eu curto muito a tag button em detrimento de input-type-submit ou input-type-button.
Afinal, a tag input é usada pra um pá de outras coisas enquanto a button é só button e pronto (além de ainda aceitar HTML dentro dela).
Com a button fica muito mais fácil estilizar, ’scriptar’, pá e talz.

Mas hoje, durante o dia, passei por um estranho bug que eu não sabia o que era no site que tô finalizando. Agora à noite mim descobrir qual ser o problema: Pra tag button, ao submeter um formulário, o IE manda como value da tag button o que está dentro dela e não o que está no atributo value.

Um código vale mais que 10 palavras:

<form action='' method='get'>
    <button type='submit' name='teste' value='FF e OF vao enviar este value'>O IE vai enviar este value</button>
</form>

Apesar disto, continuo preferindo o button.

Opa, dica rápida.

Edit 27/08/07 - Atenção: leia o post até o final onde está a solução do Chessman pois ela é a mais aconselhável.

Às vezes quando agente tá brincando com algum elemento ou pai de elemento que tem float: left ou display: table acontecem alguns bugs estranhos.

No Firefox, às vezes, o float não funciona quando se dá Control + F5, porém fica tudo beleza se você der um F5.

No Internet Explorer o pai do elemento simlesmente some. Vai entender.

Eu acredito que estas loucuras sejam bugs.

Aqui um exemplo de um cidadão com o problema.

Algumas soluções pra estas loucuras incluem um elemento fantasma (ou wrapper) no final da div pai com um clear both.
Outras sugerem colocar um display inline em quem tá com o float.

Eu vou entrar pro rol das soluções possíveis e tentar mostrar mais outra:

Tenta definir a largura e altura do elemento pai dos elementos com float.
Pode ser em porcentagem mesmo. Apenas defina. Se não der certo no pai dos floats, tente no avô dos floats também.

Aqui pra mim deu certo. Talvêz pra você dê certo também.

Edit: Uma perfecta (e inédita acredito eu) solução para este problema do bug foi feita pelo amigo de fórum senhor TheChessMan. Aqui o post onde ele desenvolveu inicialmente a solução. Parabéns chess.

Fui.

Heloou comédias, mais um post da série "eu estou vivo".

Como muitos já sabem tô fazendo uns projetos aí que tão exigindo muito do meu tempo daí o blog tá meio parado aqui. Mas quando eu voltar já sabem que terão toneladas de códigos afinal, é nos serviços que surgem novos códigos.

Hoje, mostrando pra vocês o que costuma sempre estar no início dos meus arquivos CSS. Estas declarações servem pra padronizar algumas coisas nos navegadores e tornar mais fácil o desenvolvimento do site. Tudo é pra reduzir diferenças em navegadores.

Faça um teste no próximo site que fizer. Coloque estas declarações e verá que muitas "diferenças" simplesmente não acontecem nos navegadores. Mas não simplesmente copie e cole. Dê uma lida pra entender o que eu fiz.

Incluí também algumas classes padrão que eu costumo usar.

* { margin: 0; padding: 0; /* padronizando nos navegadores */ }

img { border: 0;}
fieldset { display: block; border: 2px ridge #FFF; padding: 10px; /* padronizando nos navegadores */ }
ul, ol { margin-left: 10px; /* padronizando nos navegadores */}
input[type=hidden]{ display: none !important; visibility: hidden !important; /* esconde mesmo inputs hidden no FF */}
button { border: 1px outset #AAA;}
form button { text-align: center; margin: 5px auto; display: block; }
form ul { list-style: none; margin-left: 0; }
fieldset label { display: block;}
fieldset .radios label { display: inline; }
p { margin-top: 5px; }

/* padronizando tamanhos de cabecalho em todos os browsers */
h1 { font-size: 250%;}
h2 { font-size: 200%;}
h3 { font-size: 150%;}
h4 { font-size: 120%;}

/* classes costumeiras */
.ak { text-decoration: underline; /* access keys */ }
.u { text-decoration: underline; /* textos underline */}
.secoes { display: none; /* exibe nomes das seções se o CSS estiver desativado */ }
.img-left { float: left; }
.img-right { float: right;}
.erroinfo { background: #FFCCCC;}
.erro { background: #FF0000;}

Té mais povo.

Malditas popups, malditos falsos links, MALDITAS POPUPS!!!! AARRRGHHH!

Pronto, acalmei. Bom, hoje vou sair um pouco do objetivo deste blog (só hoje hehe), que prometi NÃO ficar viajando nem divagando, mas sim, mostrando soluções práticas.
É que estas malditas popups e falsos links me tiram do sério.
Não, não me venham dizer pra baixar anti-popups. Sim, é lógico que eu uso o FF.

A questão que eu to levantando agora é daqueles malditos links que você pensa que é link, mas na verdade, lá na barra de rolagem tem escrito um maldito “javascript:open…blablabla…”.
Quais as consequências disso? Bom, a consequencia é que o usuário não consegue acessar aquele conteúdo abrindo sua própria aba, (ou janela pra quem ainda não evoluiu), entre outros problemas.
Desta maldita forma, eu SOU OBRIGADO a abrir a maldita popup (a não ser que faça alguns truques trabalhosos).

Coincidentemente, ontem eu tinha lido um post no fatorW dizendo que os usuários tem que poder usar o site, onde o cara fala muito bem sobre usabilidade básica.
Eu quero apenas abrir o link em outra aba, só isso… Por que eles (e eles, e vários outros ‘eles’) não me deixam???

Os “infográficos” do Terra são uma piada. Pra quê popup naquilo meu deus??!?!!! Alguns usam as malditas popups pra “tentar” esconder o endereço real do visitante, ou pra configurar a janela, mas os do Terra… O endereço real tá à mostra. E a configuração de tela deles as vezes até esconde o conteúdo com uma barra de rolagem… Realmente algo sem motivo.
E o do noblat (na parte da enquete), pra quê popup naquela enquete minha gente???

Por favor my friends, não cometam este pecado mortal…
Desvantagem das popups dessa forma eu não preciso nem falar né?

• Ganhará o ódio de alguns de seus visitantes (como eu)
• Usabilidade baixa
• Acessibilidade baixa
• Mecanismos buscadores??? Ferrou-se
• Browsers sem javascript??? Ferrou-se
• Dificuldade do seu usuário colocar aquela página nos favoritos
• etc, etc, etc…

Caso realmente seja necessário usar uma popup (não podemos generalizar, há alguns projetos em que popups realmente são necessárias), use com moderação e com algumas técnicas pra reduzir as desvantagens citadas acima:

Não coloque seu javascript direto no href do link. O href do link deve ser usado pra colocar o endereço da página. Assim seu usuário conseguirá abrir seu popup em outra aba diboas e não morrerá de ódio da sua página; os mecanismos de busca conseguirão chegar lá…; browsers sem javascript conseguirão chegar lá…; novamente etc, etc, etc…

“Mas micão, assim ele deixa de ser popup!”. Calma meu filho, minha filha, muitos já escreveram sobre isso (no momento não lembro de nenhum link pra recomendar), mas é só colocar um javascriptzinho no “onclick” do link que abre seu popup.

Comparando:

<script>
  function abrePopup(url){      janela=window.open(url,'janela','width=400,height=500,top=100,left=100,resizable=yes')
  }
</script>
<a href="javascript:abrePopup('http://elmicox.blogspot.com/');" >link maldito </a>
<a href="http://elmicox.blogspot.com/" target="_blank" onclick="abrePopup(this.href);return false;">link beleza</a>

Acho que não preciso explicar o código acima não né? Tá bem simples.
No primeiro link, temos o exemplo maldito, onde você ferra com seu link. Percebam as coisas “bonitas” que aparecem na barra de status no link maldito.

No segundo exemplo, temos um link “menos mal”. O href tá certo, abrindo em um novo target pra quem não quer o popup. Mas se o cara clicar normalmente, o evento onclick é disparado, a popup é aberta com o endereço do link (this.href) e o link é cancelado (return false). Testem aí e vejam. (Não vou entrar em detalhes de javascript não obstrusivo (Unobtrusive JavaScript) aqui não, to com pressa, e muita gente já falou sobre isso. Meu script tá errado nesse ponto sim, preguiça… hhehe)

Teste ele aqui:
link maldito ; link beleza

Melhorando ainda mais… Voce poderia também marcar os links que são popup com uma classe daí colocaria os eventos nele através do attachEvent, e colocar uma estilização diferente nele pra seu visitante saber que se trata de uma popup, colocar uma figurinha ao lado do link, etc… Ficaria bonitim. heheh.

É isso aí povo. Té mais…