Sábana en explorer

[lktmaster]

Hola,

Soy un nobato en css y en codigo en general,
He estado creando una sábana de imagen, la he aplicado con css a una calculadora, y me funciona en todos los exploradores menos en explorer, que hace las funciones, pero se lia con la el trozo de imagen a buscar.

Código HTML:

.calculator-digit_1,
.calculator-digit_2,
.calculator-digit_3,
.calculator-digit_4,
.calculator-digit_5,
.calculator-digit_6,
.calculator-digit_7,
.calculator-digit_8,
.calculator-digit_9,
.calculator-digit_0,
.calculator-plus-minus,
.calculator-digit_s, 
.calculator-add,
.calculator-subtract,
.calculator-multiply,
.calculator-divide,
.calculator-equals,
.calculator-erase,
.calculator-clear-error,
.calculator-undo,
.calculator-mem-clear,
.calculator-mem-store,
.calculator-mem-recall,
.calculator-mem-subtract,
.calculator-mem-add,
.calculator-percent,
.calculator-exp,
.calculator-ln,
.calculator-log,
.calculator-inverse,
.calculator-power,
.calculator-sqr,
.calculator-sqrt,
.calculator-mik,
.calculator-random,
.calculator-pi,
.calculator-atan,
.calculator-acos,
.calculator-asin,
.calculator-tan,
.calculator-cos,
.calculator-sin,
.calculator-radians,
.calculator-degrees,
.calculator-logo {width: 30px; height: 30px; color:transparent; text-indent: -1200px; border: none; background-image:url(images/tot.png);}


.calculator-digit_1 {background-position:-30px -30px;}
.calculator-digit_2 {background-position:-30px -60px;}
.calculator-digit_3 {background-position:-30px -90px;}
.calculator-digit_4 {background-position:-30px -120px;}
.calculator-digit_5 {background-position:-30px -150px;}
.calculator-digit_6 {background-position:-30px -180px;}
.calculator-digit_7 {background-position:-30px -210px;}
.calculator-digit_8 {background-position:-30px -240px;}
.calculator-digit_9 {background-position:-30px -270px;}
.calculator-digit_0 {background-position:-30px 0px;}
.calculator-plus-minus {background-position:-30px -330px;}
.calculator-digit_s {background-position:-30px -300px;}
.calculator-add     {background-position:-30px -360px;}
.calculator-subtract{background-position:-30px -390px;}
.calculator-multiply{background-position:-30px -420px;}
.calculator-divide  {background-position:-30px -450px;}
.calculator-equals  {background-position:-90px 0px;}
.calculator-erase   {background-position:-90px -30px;}
.calculator-clear-error {background-position:-90px -60px;}
.calculator-undo    {background-position:-90px -90px;}
.calculator-mem-clear {background-position:-90px -120px;}
.calculator-mem-store {background-position:-90px -150px;}
.calculator-mem-recall{background-position:-90px -180px;}
.calculator-mem-subtract {background-position:-90px -210px;}
.calculator-mem-add  {background-position:-90px -240px;}
.calculator-percent  {background-position:-90px -270px;}
.calculator-exp      {background-position:-90px -300px;}
.calculator-ln       {background-position:-90px -330px;}
.calculator-log      {background-position:-90px -360px;}
.calculator-inverse  {background-position:-90px -390px;}
.calculator-power    {background-position:-90px -420px;}
.calculator-sqr      {background-position:-90px -450px;}
.calculator-sqrt     {background-position:-150px 0px;}
.calculator-mik      {background-position:-150px -30px;}
.calculator-random   {background-position:-150px -60px;}
.calculator-pi       {background-position:-150px -90px;}
.calculator-atan     {background-position:-150px -120px;}
.calculator-acos     {background-position:-150px -150px;}
.calculator-asin     {background-position:-150px -180px;}
.calculator-tan      {background-position:-150px -210px;}
.calculator-cos      {background-position:-150px -240px;}
.calculator-sin      {background-position:-150px -270px;}
.calculator-radians  {background-position:-150px -300px;}
.calculator-degrees  {background-position:-150px -330px;}
.calculator-logo     {background-position:-150px -360px; position: absolute; top: 0px; left: 102px}
     

.calculator-digit_1:active {background-position:0px -30px;}
.calculator-digit_2:active {background-position:0px -60px;}
.calculator-digit_3:active {background-position:0px -90px;}
.calculator-digit_4:active {background-position:0px -120px;}
.calculator-digit_5:active {background-position:0px -150px;}
.calculator-digit_6:active {background-position:0px -180px;}
.calculator-digit_7:active {background-position:0px -210px;}
.calculator-digit_8:active {background-position:0px -240px;}
.calculator-digit_9:active {background-position:0px -270px;}
.calculator-digit_0:active {background-position:0px 0px;}
.calculator-plus-minus:active {background-position:0px -330px;}
.calculator-digit_s:active {background-position:0px -300px;}
.calculator-add:active     {background-position:0px -360px;}
.calculator-subtract:active{background-position:0px -390px;}
.calculator-multiply:active{background-position:0px -420px;}
.calculator-divide:active  {background-position:0px -450px;}
.calculator-equals:active  {background-position:-60px 0px;}
.calculator-erase:active   {background-position:-60px -30px;}
.calculator-clear-error:active {background-position:-60px -60px;}
.calculator-undo:active    {background-position:-60px -90px;}
.calculator-mem-clear:active {background-position:-60px -120px;}
.calculator-mem-store:active {background-position:-60px -150px;}
.calculator-mem-recall:active{background-position:-60px -180px;}
.calculator-mem-subtract:active {background-position:-60px -210px;}
.calculator-mem-add:active {background-position:-60px -240px;}
.calculator-percent:active  {background-position:-60px -270px;}
.calculator-exp:active      {background-position:-60px -300px;}
.calculator-ln:active       {background-position:-60px -330px;}
.calculator-log:active      {background-position:-60px -360px;}
.calculator-inverse:active  {background-position:-60px -390px;}
.calculator-power:active    {background-position:-60px -420px;}
.calculator-sqr:active      {background-position:-60px -450px;}
.calculator-sqrt:active     {background-position:-120px 0px;}
.calculator-mik:active {background-position:-120px -30px;}
.calculator-random:active   {background-position:-120px -60px;}
.calculator-pi:active       {background-position:-120px -90px;}
.calculator-atan:active     {background-position:-120px -120px;}
.calculator-acos:active     {background-position:-120px -150px;}
.calculator-asin:active     {background-position:-120px -180px;}
.calculator-tan:active      {background-position:-120px -210px;}
.calculator-cos:active      {background-position:-120px -240px;}
.calculator-sin:active      {background-position:-120px -270px;}
.calculator-radians:active  {background-position:-120px -300px;}
.calculator-degrees:active  {background-position:-120px -330px;}
.calculator-logo:active  {background-position:-120px -360px;}

Queria saver si alguien me puede decir si este css és correcto, o donde he metido la pata.
Quizas no se pueda hacer una sabana en explorer y tengo que hacerlo con imagenes idependientes?

Muchas gracias.

[Tecna]

Buenas,

en principio no tiene por qué haber problemas con los mapas de imágenes en explorer y con el código que muestras lo único que se ocurre es que tenga que ver con la forma en que explorer interpreta el modelo de cajas y que algun elemento tenga un tamaño diferente y por eso altere las posiciones, pero vamos es sólo una suposición. Lo que si que veo en el código es que utilizas una mala práctica que es poner un text-indent con un valor negativo muy elevado con la intención de esconderlo, eso dejaría el contenido de ese elemento inaccesible en el caso de que si que se disponga de css pero no se disponga de la imagen. Por eso mismo si son enlaces se debería facilitar una lista de enlaces y usar el atributo alt por si la imagen no está disponible. Lo mismo pasaría con la propiedad color que define el color de primer plano, es decir de la letra, si fuera transparente sería imposible leer el contenido, pero transparent no es un valor válido, así que probablemente lo herederá. Si se define un color ya sea de fondo o de primer plano hay que definir también el otro para que sea accesible y por supuesto no con el mismo color, con colores contrastados. No olvidemos que el contenido tiene que ser lo más importante y tiene que estar accesible siempre.

[lktmaster]

La cuestión és que el texto és necesario para dar la función, pero no se vea, por que en los botones son imagenes, prové de hacer lo del text indent para hacerlas desaparecer pero el firefox me las muestrà, así que terminé usando lo de transparent, ahora quitaré lo de text indent.

Aparte de eso, sigo sin saver que hacer, el active funciona con explorer?

Es que sinceramente le he dado bastantes vueltas, y no se por donde cogerlo, para arreglarlo y crear las imagenes por separado solo para el explorer és un coñazo Y puede dar problemas.

Muchas gracias