Fondo mal en IE

[cyber_dark]

Saludos amigos foreros vengo a ustedes por un problema con el ie (que novedad...) pues me gustaria darle a unos iconitos la forma de un boton, en los navegadores de ff, gc y opera todo bien, esta es una imagen de como sale:



y este es el codigo:

Código:

img { border:0; }


	.pie {
	padding: 0;
	margin: 0;
	}

	.pie a:link, .pie a:visited, .pie a:hover, .pie a:active {
	text-decoration: none;
	font-size: 8pt;
	font-family: Arial;
	color:#6E6E6E;
	} 

              .pie a img{
	padding:3px 4px 3px 4px;
	background: url(bg.gif) no-repeat;
               }

Y el html es simple:

<div class="pie">
<a href="#"><img src="icono.png"></a>
</div>

La imagen icono.png mide 16x16 y la imagen bg.gif mide 23x22, como ven en el ie si pone la imagen de fondo pero no esta respetando el padding. Espero alguien pueda hecharme una manita.

[cyber_dark]

Alguien que pueda hecharme una manito

[emprear]

El IE no tiene nada que ver en esto
un poco raro lo que intentás hacer, si queres usar una imagen como contenido del link, por que sencillamente no hacer esto
<div class="pie">
<a href="#"><img src="icono.png"></a>
</div>
e integrar el icono con el fondo (que al parecer es un simple recuadro), en una sola imagen.
Si tu link no tiene texto alguno, para que entonces está todo esto
.pie a:link, .pie a:visited, .pie a:hover, .pie a:active {
text-decoration: none;
font-size: 8pt;
font-family: Arial;
color:#6E6E6E;
}
Si preferis hacerlo con css, algo así quedaría como lo que querés

Código HTML:

<div>
<a href="#" style="border: solid 1px #666;display: block; width:22px; height: 21px; border-radius: 3px;outline: none;">
<img src="a.jpg" alt="" style="margin: 2px 3px; width: 16px; height: 16px; border: none;" /></a>
</div>
 

podes eliminar el borde del <a> y ponerle el background


Saludos

[cyber_dark]

Muchas gracias por responer emprear si, si uso texto por eso tengo lo otro, y asi es un recuadro lo que quiero poner de fondo, para dar efecto como si fuera un boton, usaria tu codigo pero el border-radius no es soportado por todos los navegadores, y ya se que hay scripts para que se visualize esta propiedad, pero preferiria hacerlo como puse al principio, alguna idea de poder hacerlo asi?

[emprear]

la otra es como te dije hacer la imagen de fondo con los bordes redondeados, pero te aviso que la librería PIE Css funciona muy bien, es liviana, facil de implementar y da soporte para border-radius y otros efectos de CSS3 en ie8/7 (en el 9 no hay problemas)

SAludos