CSS Sprites

[Wellington09 1]

estou usando css sprite para diminuir a requisicao no servidor e ganhar mais velocidade na leitura das imagens, porem o IE7 não coloca as imagens nos seguintes campos da forma correta, ele repete a primeira imagem em todos os campos.

 

input[type="text"],
input[type="tel"],
input[type="email"]{
background-color:#F0F0F0;
background-image:url(../images/icons.jpg);
background-repeat:no-repeat;
}

input[type="text"]{
background-position:2px 4px;
}

input[type="tel"]{
background-position:2px -55px;
}

input[type="email"]{
background-position:2px -25px;
}

 

obs:

utilizei o plugin selectivizr para que o IE7 entenda seletores CSS

 

minha imagem segue na vertical

ex:

* *

* *

* *

* *

* *

* *

* *

* *

* *

* *

* *

* *

25X83 pixels

[ricardo_mc 19]

Posta um link da página com os scripts bugando que a gente dá uma analisada no código. Fica difícil ajudar sem ver o erro acontecendo.

[André do Vale 76]

E como você faz para o IE7 interpretar o input[type=tel] e input[type=email]? Esses tipos de campos são HTML5, e é esperado erros ao trabalhar com eles (no IE9 ou inferior). Caso você utilize algum script que "reinterprete" estes campos, no CSS você deverá tratar o resultado dele, e não o "original". :thumbsup:

[ricardo_mc 19]

E como você faz para o IE7 interpretar o input[type=tel] e input[type=email]? Esses tipos de campos são HTML5, e é esperado erros ao trabalhar com eles (no IE9 ou inferior). Caso você utilize algum script que "reinterprete" estes campos, no CSS você deverá tratar o resultado dele, e não o "original". :thumbsup:

 

Ele está usando o selectivizr, por isso o CSS3 está sendo aceito.

 

É como usar o Modernizr para que o IE 5-8 aceite as tags do HTML5

[André do Vale 76]

@ricardo_mc

 

O que eu quis dizer é: que com o tipo de campo utilizado, o IE7 não irá interpretá-lo, pelo simples fato dele não "existir" para o navegador. O campo pode até aparecer, e funcionar como método de entrada de texto, mas ele, de certo modo, é incompatível com o navegador, com ou sem selectivizr. Para o IE7 sugiro o uso de classe, ou no máximo "first-child" ou "+". :thumbsup:

 

IE8+ é okay. Irá interpretar sem problemas, e o selectivizr até ajuda de certo modo (apesar, de que, particularmente, eu acho que ele apronta uma bagunça no DOM, e o CSS fica "preso" com comentários acentuados, dentre outros).

[Wellington09 1]

ricard_mc

No IE7 aparece assim, mas o correto deveria ser assim.

 

Até o IE6 entende, não sei pq o IE7 está fazendo isso já que eu estou usando o selectivizr

 

link do exemplo para download

 

no exemplo eu não coloquei os plugins selectivizr e modernizr