Boas malta!
Ainda há pouco tempo eu queria colocar um botão bem bacana usando uma imagem de minha escolha. Funcionava bem, ela era apresentada em todos os navegadores substituindo a aparência padrão de um botão Submit, mas quando eu clicava neles supostamente deviam fazer uma certa função para mim. Era uma espécie de menu de navegação para um calendário.
Se eu carregasse num botão ele vinha para o mês anterior, se eu carregasse noutro ia para o mês a seguir, caso não carregasse nenhum mostrava o mês atual obtido com o método getdata() do PHP. E depois outra função ia fazer o calendário do mês com as semanas e o mês atual e ao lado ia buscar no MySQL todos os eventos para aquele mês e ano, tudo dentro do mesmo código PHP.
Funcionava perfeitamente em Firefox 3, Google Chrome e Safari (do Windows, não tinha MAC para testar). Agora acho que o pessoal concorda comigo, um site deve funcionar em todos os navegadores mais recentes. Certo?
No Opera não funcionava. E como o normal... no Internet Explorer 7 também não funcionava. Os botões estavam lá, mas ao clicar neles voltava ao mesmo arquivo PHP como devia, mas não funcionava. Descobri que o problema era que o IE não enviava o valor dos botões, então o PHP não podia recolhê-los para fazer o seu trabalho.
Isso pode ser resolvido facilmente, com um bocadinho de trabalho e recorrendo ao CSS.
1 - Crie 1 ficheiro sem nada dentro com o nome de "bt.css";
2 - Abra o seu código onde tem os botões e coloque a seguinte linha, logo abaixo da tag TITLE:
<link href="/css/bt.css" rel="stylesheet" type="text/css" />
Isto simplesmente vai importar a folha de estilos para o seu código e mudar os botões.
3 - Abra o arquivo "bt.css" e dentro coloque:
@charset "utf-8";
#bt_mes1 {
width: 21px;
height: 18px;
padding: 55px 0 0;
margin: 0;
border: 0;
background: transparent url(/images/bt_anterior.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* vai por o cursor como forma de mão ao passar por cima do botão */
cursor: hand; /* para o IE 5.x */
}
Depois só tem que substituir a URL pelo endereço da sua imagem, mudar a altura (height) e largura (width) em pixeis pelo tamanho que sua imagem tem. E claro, onde tem "bt_mes1", aí é o ID do botão.
Agora só tem mais uma coisa. No Opera os valores dos botões "value" seriam visíveis usando este código.
Para isso basta adicionar esta linha, mas usem a critério, ao usarem esta linha deixariam de ver os botões no IE e o valor teria que ser ajustado dependendo dos outros elementos da página.
Agora escolham Opera ou IE! xD
text-indent: -1000em;
Muito simples. Funcionou comigo, por isso deve funcionar com vocês.
Vou continuar trabalhando neste bug do Opera. Se encontrar solução posto aqui.
Meus comprimentos a comunidade, bom poder retribuir finalmente. xD
É realmente muito desagradável a falta de padrão reinante no mundo web...
A W3C se esforça para estabelecer padrões, mas parece que cada desenvolvedor de browsers quer fazer o seu padrão próprio, independente e incompatível.
Com isso quem sofre é o navegante web, pois deixa de usufruir daquilo que possa existir de melhor em cada página visitada.
Com referência especial ao IE, é lamentável que o desenvolvedor do site tenha que adicionar filtros do tipo "se for IE5, se for IE5.5, se for IE6, se for IE7", sinal de que a MS não toma jeito mesmo...