Bordes en Links

Hola que tal a todos...


Bueno pues primero que nada quiero comentar, que estoy trabajando por primera vez en XHTML y CSS y estoy maravillado, ademas no se me a hecho para nada complicado no se por que tarde tanto en intentarlo, creo que estaba demasiado acostumbrado a FLASH.

Segundo, como decía estoy trabajando en mi primer proyecto XHTML y CSS, casi todo va sin complicaciones. Excepto que estoy intentando poner dentro de un DIV, un par de pequeños botones en .PNG

Solo que en el navegador me aparecen con un borde blanco alrededor de la imagen. El codigo es el siguiente:
XHTML

Código :

<div id="smenu">
           <a href="index.html" title="Home"><img src="imagenes/homeico.png" /></a>
           <a href="contact.html" title="Contact"><img src="imagenes/mailico.png" /></a>
           </div>

Ahora CSS

Código :

#smenu {
    widht:244px;
   text-align: right;
   padding-top:5px;
   padding-right:10px;
}

Y ese borde blanco solo me sale cuando utiliso <a href=""></a> si no lo tengo como link me aparece perfecto.
Entonce e intentado usar algun codigo como este

Código :

#smenu a{
   border:0px;
   color:none;
    }

Pero no me a funcionado, Si me preguntan por que estoy usando ese código para quitar el borde, es por mera intuición. Honestamente no se cual sea el correcto de hecho ya use varios buscando en las listas de código CSS pero no e dado con el clavo así que me atrevo a preguntar.

A continuación les pongo el URL

[url=http://www.grupoevelsa.com/prev/consulting.html]

los botones son los 2 en la esquina superior derecha.

Gracias de antemano!!!

Agrega en tu hoja de estilos, bien arriba

Código HTML :

img {border: 0}

AAh te explico, el borde que estas viendo esta en tu imagen, no precisamente en el link, y eso es porque por defecto el navegador les coloca ese borde a imagenes linkeadas, el codigo que te pase es para que lo pongas en las pimeras lineas de tu .css eso hara que todas las imagenes tengan borde 0.

puedes evitarte muchos problemas utilizando una hoja de reset

http://developer.yahoo.com/yui/reset/

fack.us tiene razon, es una buena practica usar un "reset" para los estilos, y siempre debe estar en las primeras lineas de tu .css o si usas un archivo aparte, debes llamarlo antes de tu hoja principal de estilos.

Y el archivo reset.css de yahoo es bueno pero puede tener etiquetas que no vas a utilizar, esas las podrias borrar, asi reduces el tamaño del archivo.

Wow muchas gracias.. con lo de

img {border: 0}

Funciono perfecto....

aunque tengo una duda, sobre el reset.css, específicamente para que es? que beneficios tiene etc...

Cada navegador tiene sus propios valores por defecto para ciertas etiquetas, asi como la que experimentaste, lo que hace el reset es que todos los navegadores tengan los mismos valores por defecto para todas las etiquetas que uses. Esto es una buena practica cuando quieres que tu website sea vista por distintos navegadores, pero ojo que esto es solo para los valores por defecto, para que una website sea multinavegador, debes instalarte tantos navegadores puedas y probar, probar y probar.

Ah y por valores por defecto me refiero a borders, margenes, paddings, alturas de linea, etc.

A muy buen consejo gracias, actualmente hago mis pruebas en IE y FF y si tuve algunas diferencias con IE a comparacion de FF que es mi default, aparentemente corregi el error y ya se ve igual en ambos..

Pero creo que si seria bueno probar otros navegadores con diferentes motores para ver como me funciona

Muchas gracias !