Como poner borde y No un sombreado a numeros Y QUE FUNCIONE EN INTERNET EXPLORER

lepe · #1 (**permalink**) 22/08/2010, 08:57

Hola diseñadores, tengo un problema en el que no encuentro solucion debido a la incompatiblidad que tiene internet explorer en interpretar unos codigos que inserto en .css y que solo son validos para mozilla firefox y google chrome pero no para explorer 8. Yo queria introducir un borde a unos precios de mi web y como no sabia hacerlo pues inserte un sombreado con el siguiente codigo en el css:

- Funcionaba bien en todos los navegadores excepto para internet explorer:
font-weight: bold;
white-space: nowrap;
text-shadow: #000000 2px 2px 2px;

Entonces añadi otro codigo diferente arriba del todo de mi .css para que funcionase tambien en intenet explorer:
.shadow {
text-shadow:#000000 2px 2px; white-space:nowrap;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#0 00000', Direction=315, Strength=3);
}

El problema es que en internet explorer los numeros y el sobreado se ven como raros como si tuviesen dientes de sierra.
[URL=http://img834.imageshack.us/i/dientessierraie8.png/][IMG]http://img834.imageshack.us/img834/6155/dientessierraie8.png[/IMG][/URL]

Despues de pasar horas y no encontrar solucion me pregunto si hay algun codigo que sea válido para todos los navegadores para que en vez de sombreado aparezcan los numeros con borde exterior como la siguiente foto:

[URL=http://img541.imageshack.us/i/efectodeseado.png/][IMG]http://img541.imageshack.us/img541/7214/efectodeseado.png[/IMG][/URL]

Ojala algún experto me eche un cable porque por mas que googleo no encuentro ninguna solución que Internet explorer no la fastidie, saludos

maycolalvarez · #2 (**permalink**) 22/08/2010, 09:19

me parece que es por la configuración gráfica del OS, si en windows desactivo el suavizado de texto se ve así (ie hereda esta configuración), intenta probar con eso o verificando opciones similares en el IE8 relacionadas con gráficos, o desde otro computador, ya que ni desde css ni js podrás tocar ese punto

lepe · #3 (**permalink**) 22/08/2010, 09:34

Hola gracias por contestar, pues no se muy bien a lo que te refieres pero el windows esta recien formateado y trae la configuración por defecto porque aun no le he modificado nada y si yo no lo puedo ver bien en internet explorer tampoco creo que se les pueda ver bien a los futuros visitantes, ¿Sabrias decirme que codigo insertar para conseguir que los números se vean con borde exterior en vez de sombreado en todos los navegadores?

saludos

maycolalvarez · #4 (**permalink**) 22/08/2010, 10:10

precisamente, windows adapta las opciones gráficas de acuerdo al equipo y su capacidad gráfica, por ello puede tener deshabilitado el suavizado de texto aún así tengas una poderos tarjeta gráfica, en mi caso como no encontraba los drivers, los instalaba luego y tenia que habilitar manualmente esa característica, y sí el problema que presentas es éste, pues no hay nada que puedas hacer con respecto a los clientes.

lepe · #5 (**permalink**) 22/08/2010, 11:01

Hola, como te decia sigo pensando que no es nada del suavizado de texto de mi windows porque lo he comprobado y lo tenia activado y he estado echandole un vistazo y ese no es el problema. El problema como decia anteriormente es que Internet Explorer no interpreta los mismos codigos que mozilla firefox etc, el ejemplo de lo que aplique yo lo saque de aquí http://www.zoneartcss.com/webdesign/css/css-text-shadow/
Y segun opinan muchos otros usuarios el efecto de este filter que saco microsoft para añadirle text-shadow en Internet explorer es espantoso y no tiene nada que ver con el efecto que consigues en Firefox. Ahora mi intencion es ponerle un borde (y dejarme de sombreados..) y que se vea bien en todos los navegadores
¿Alguien sabe el codigo para añadir un borde a numeros?

lepe · #6 (**permalink**) 24/08/2010, 10:26

buenas, ¿algun programer que me ayude un poco con este codigo para internet explorer 8?
saludo

kseso? · #7 (**permalink**) 24/08/2010, 11:28

Todas las pruebas (tampoco son tantas) que he realizado con los filtros para lograr sombras en el texto (especialmente para simular un contorno) en ie (ver 7) han sido muy poco estéticas por la aparición de ese efecto aserrado (pixeles muy marcados).
Y creo que es por las deficiencias del navegador al renderizarla:

Los códigos implicados (con dos "filter" diferentes):

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kseso? Jugando con css</title>
 
<style type="text/css">
* {margin: 0; padding: 0; outline: 0; position: relative;}
p.sombra1, p.sombra2 {
  text-shadow: #000000 -1px -1px 0, #000000 1px 1px 0;
  color: red;
  font-size: 40px;
}
</style>
<!--[if IE]>
<style type="text/css">
p.sombra1 span {
  display: block;
  width: 100%;
  filter: glow(color=#000000,strength=1);
}
p.sombra2 {
  display: block;
  width: 100%;
  filter: dropshadow(color=#000000,offX=1,offY=1);
}
p.code {
  font-family: monospace;
  font-size: 15px;
  color: #444;
}
</style>
<![endif]-->
 
</head>
<body>
    <p class="sombra1"><span>Texto con un contorno</span></p><!--[if IE]>
    <p class="code">filter: glow(color=#000000,strength=1);</p><![endif]-->
    <p class="sombra2">Texto con un contorno</p><!--[if IE]>
    <p class="code">filter: dropshadow(color=#000000,offX=1,offY=1</p><![endif]-->    
</body>
</html>

Como alternativa, puede probar con algún js. Un ejemplo con mootools:
http://pr0digy.com/mootools/text-dropshadows/
Posiblemente con jQuery también haya.

Atentamente

lepe · #8 (**permalink**) 26/08/2010, 17:38

hola, muchas gracias por tu aporte, de los dos codigos que aportas parece que el filter dropshadow queda mejor que el otro filter glow, ¿Hay alguna otra alternativa para conseguir el contorno en los numeros como por ejemplo repitiendo dos veces el codigo y en la segunda repeticion que las letras sean mas grandes?
saludos cordiales

lepe · #9 (**permalink**) 29/08/2010, 17:54

Resubooo, tambien me gustaria saber como reducir el tamaño de letra de todos los decimales, digamos que he añadido en mi .css el siguiente codigo:

}
ul#product_list li .price{
font-size: 25px;
margin-bottom: 0.2em;
display: relative;
margin-right: 1px;
line-height: 30px;

}

ul#product_list li .price .decimals{
font-size: 22px;
margin-bottom: 0.2em;
display: relative;
margin-right: 1px;
line-height: 30px;
}

Al intentar insertar en el html un <p class="price"> seguido de un <span class="decimals" no se reduce el tamaño de los numeros despues de los decimales, ¿Como podria luego añadir esa propiedad del .css al html?

Saludos

kseso? · #10 (**permalink**) 30/08/2010, 06:29

¿Y por qué no utilizar un marcado más específico y semántico recurriendo a etiquetas que le son más propias?

Código HTML:

Ver original<var>54<sup>´32</sup>€</var>

Cambie /sup/ por /sub/ si lo quiere abajo.
Incluso se podría ahorrar el teclear la coma y el símbolo de la moneda con el uso de /:before/:after/ para generarlo (proveyendo una solucción para los ie).

Sobre su consulta del #8:
Sí, la hay. Al menos dos:

generando el texto con /:before/:after/ totálmente semántico y "automático".
Como en el caso del encabezado de ésta página o el el h1 y h2 de ésta otra.

Y como veo que todos sus problemas radican en hacerlo compatible con ie, quizás le conviene investigar y probar alguno de los js que fuerzan a esa familia a entender e interpretar propiedades de css que no soporta.

Atentamente

nakiox · #11 (**permalink**) 31/08/2010, 01:50

Hola.. otra alternativa que tienes es tratar los números como imágenes sin necesidad de crear una imágen para cada precio, lo que puedes hacer es:

- Generar una imágen por número con el sombreado (esto tb lo puedes hacer con el photoshop), o bien con la librería GD de PHP si quieres hacer "on-the-fly".

- A la hora de mostrar un precio (19,90€ por ejemplo) llamas a la imágen 1, luego a al 9, luego a la coma, luego al 9, etc..

Espero te sirva..
Saludos!

lepe · #12 (**permalink**) 31/08/2010, 17:04

Cita:

Iniciado por kseso?

¿Y por qué no utilizar un marcado más específico y semántico recurriendo a etiquetas que le son más propias?

Código HTML:

Ver original<var>54<sup>´32</sup>€</var>

Cambie /sup/ por /sub/ si lo quiere abajo.
Incluso se podría ahorrar el teclear la coma y el símbolo de la moneda con el uso de /:before/:after/ para [URL="http://bit.ly/bYF6kb"]generarlo[/URL] (proveyendo una solucción para los ie).

Sobre su consulta del #8:
Sí, la hay. Al menos dos:

generando el texto con /:before/:after/ totálmente semántico y "automático".
Como en el caso del encabezado de [URL="http://www.autosconarte.com/"]ésta página[/URL] o el el h1 y h2 de [URL="http://bit.ly/avLlfk"]ésta otra[/URL].

Y como veo que todos sus problemas radican en hacerlo compatible con ie, quizás le conviene investigar y probar alguno de los js que fuerzan a esa familia a entender e interpretar propiedades de css que no soporta.

Atentamente

Hola kseso? es muy interesante lo que explicas en tu web, sobre lo de "sup" y "sub" lo había visto en otras web que lo usan pero si tendria que añadir ese codigo para cada precio seria un trabajo interminable, el sombreado que queda en autosconarte me ha servido muy bien como ejemplo y queda muy bien el contorno para el tipo de letra "arial" y las mas comunes pero para el tipo de letra que queria utilizar no consigo que me quede el contorno por todos los lados de los numeros, muchas gracias por tu aporte

Cita:

Iniciado por nakiox

Hola.. otra alternativa que tienes es tratar los números como imágenes sin necesidad de crear una imágen para cada precio, lo que puedes hacer es:

- Generar una imágen por número con el sombreado (esto tb lo puedes hacer con el photoshop), o bien con la librería GD de PHP si quieres hacer "on-the-fly".

- A la hora de mostrar un precio (19,90€ por ejemplo) llamas a la imágen 1, luego a al 9, luego a la coma, luego al 9, etc..

Espero te sirva..
Saludos!

Tu alternativa es tambien muy interesante y no había caido en que se podria hacer de esta forma, ademas haciendo los numeros en photoshop quedarian los numeros con un contorno perfecto y real y ya no molestaria mas el dichoso internet explorer

¿Sabrias indicarme el codigo que necesitaria introducir en .css y luego en html para conseguir ese efecto?

Gracias por vuestro tiempo, saludos

lepe · #13 (**permalink**) 02/09/2010, 10:41

Cita:

Iniciado por nakiox

Hola.. otra alternativa que tienes es tratar los números como imágenes sin necesidad de crear una imágen para cada precio, lo que puedes hacer es:

- Generar una imágen por número con el sombreado (esto tb lo puedes hacer con el photoshop), o bien con la librería GD de PHP si quieres hacer "on-the-fly".

- A la hora de mostrar un precio (19,90€ por ejemplo) llamas a la imágen 1, luego a al 9, luego a la coma, luego al 9, etc..

Espero te sirva..
Saludos!

Resubo post, ¿Alguien sabe que codigo deberia insertar en css y en html para conseguir ese efecto de tratar los numeros como imagenes?

saludos