Recursos web, diseño, joomla!, tutoriales, opinión, algunas noticias...

Suscríbete a través del feed RSS
Recibe los últimos artículos a tu e-mail
Realizar una búsqueda
CSS tip: Arreglar los bordes punteados en Internet Explorer Compartelo!
lunes, 30 de julio de 2007

Creo que es conocido el tratamiento que le da Internet Explorer 6 a los bordes punteados de 1px de grosor:

Bordes Punteados

 

Mientras que en cualquier navegador se visualizan los pequeños puntitos, en IE aparecen groseras lineas. Es por eso que en Foobr dan la solución más simple y práctica para este problema: Reemplazar el borde por una pequeña imagen.

En el caso de un DIV tenemos el siguiente HTML:


HTML
  1. <div id='dotted'>
  2. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at erat. Sed vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse eleifend laoreet eros. Pellentesque ac turpis vel purus facilisis aliquet.</p>
  3. </div>


Utilizando una pequeña imagen de 2 px X 2 px con un poco de CSS solucionamos el problema:


CSS
  1. #dotted {
  2. background: #FFF url(border-grid.gif);
  3. padding: 1px;
  4. }
  5.  
  6. #dotted p {
  7. background: #FFF;
  8. margin: 0;
  9. }


Y el resultado será:

Bordes punteados en DIV


Pero este ejemplo se aplica a DIVS, en el caso que queramos bordes punteados para links, tendremos que utilizar otra imágen , en este caso de 2 px X 1px y de CSS:

CSS
  1. a{
  2. text-decoration:none;
  3. background: #FFF url(borde.gif) repeat-x right bottom;
  4. }


Y el resultado:

Bordes punteados en links
Ejemplos



¿Te interesó este artículo?Puedes suscribirte al feed RSS ó dejar tu email para recibir las últimas noticias, tal como lo hacen actualmente las 2255 personas que siguen al blog





 Comentarios


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code
 
< Anterior   Siguiente >
[Volver]