ilogico comportamiento + borde de imagen

[wawi]

bueno esta es mi imagen:

Código:

<img src="productos/imagenes/a20090916235142.jpg" alt="Producto3" class="productoImagen" />

y esta es la clase css que le da el estilo:

Código:

.productoImagen
{
	width: 100px;
	height: 100px;
	border: solid 20px #A0A0A0;
	margin: 0;
	padding: 0;
}

y este es el resultado:



pregunta: ¿porque se produce ese horror?

OFF: ME EQUIBOQUE DE FORO :S

byee Saludos!

[GatorV]

Tema trasladado desde PHP

[cristian_cena]

Hola wawi:

Supongo que tu imagen debe estar heredando algun estilo. postea el codigo completo o bien una url

Saludos!

[wawi]

elimine todos los estilos del .css dejando solo el de la imagen pero hace lo mismo, este es el css:

Código:

@charset "utf-8";
/* CSS Document */

/*######################################################################################*/
/*####-ESTRUCTURA-######################################################################*/

body
{
	margin: 0 0 0 0;
	background-color:#DBD8CF;
	background-image:url(images/fondo.jpg);
	background-repeat: repeat-x;
	font-size: 100%;
}


#contendor
{
	width: 914px;
	height: auto;
	margin: 0px auto; /*centrado*/
	position: relative;
}

#superior
{
	width: 914px;
	height: auto;
}

#contenidoCentral
{
	width: 914px;
	height: auto;
}

#encabezado
{
	width: 914px;
	height:74px;
}

#encabezadoSombraIzq
{
	width: 7px;
	height: 74px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/sombra_izq.png'); /*IE*/
	float:left;
}
/*Firefox*/
#encabezadoSombraIzq[id]{background-image:url(images/sombra_izq.png);}


#encabezadoSombraDer
{
	width: 7px;
	height: 74px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/sombra_der.png'); /*IE*/
	float:right;
}
/*Firefox*/
#encabezadoSombraDer[id]{background-image:url(images/sombra_der.png);}

#encabezadoCentral
{
	width: 900px;
	height: 74px;
	background-image:url(images/encabezado_fondo.jpg);
	float: right;
}


#animImagen
{
	width: 914px;
	height: 188px;
}

#animImagenSombraIzq
{
	width: 7px;
	height: 188px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/sombra_izq.png'); /*IE*/
	float:left;
}
/*Firefox*/
#animImagenSombraIzq[id]{background-image:url(images/sombra_izq.png);}

#animImagenSombraDer
{
	width: 7px;
	height: 188px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/sombra_der.png'); /*IE*/
	float:right;
}
/*Firefox*/
#animImagenSombraDer[id]{background-image:url(images/sombra_der.png);}

#animImagenCentral
{
	width: 900px;
	height: 188px;
	float: right;
}

#info
{
	width: 900px; /*914*/
	height: auto;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/contenido_fondo.png'); /*IE*/
	float:right;
	padding-left: 7px;
	padding-right: 7px;
}
/*Firefox*/
#info[id]{background-image:url(images/contenido_fondo.png);}

#infoMenu
{
	width: 241px;
	height: 371px;
	background-image:url(images/menu_fondo.png);
	background-repeat: repeat-x;
	float:left;
}

#infoPrincipal
{
	width: 659px;
	height: auto;
	background-color:#C3C3C3;
	background-image:url(images/principal_fondo.png);
	background-repeat: repeat-x;
	float: right;
}

#ubicacion
{
	width: 659px;
	height: 18px;
	background-image:url(images/principal_info.png);
}

#infoContenido
{
	width: 659px;
	height: auto;
}

#piepag
{
	width: 914px;
	height: 47px;
}

#piepagSombraIzq
{
	width: 19px;
	height: 47px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/piepag_izq.png'); /*IE*/
	float:left;
}
/*Firefox*/
#piepagSombraIzq[id]{background-image:url(images/piepag_izq.png);}

#piepagSombraDer
{
	width: 19px;
	height: 47px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/piepag_der.png'); /*IE*/
	float:right;
}
/*Forefox*/
#piepagSombraDer[id]{background-image:url(images/piepag_der.png);}

#piepagCentral
{
	width: 876px;
	height: 47px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=scale, src='images/piepag_cen.png'); /*IE*/
	float: right;
}
/*Firefox*/
#piepagCentral[id]{background-image:url(images/piepag_cen.png);}

/*###################################################*/
/*###-ENCABEZADO-####################################*/

#encabezadoLogo
{
	width: 200px;
	height: 74px;
	float: left;
}

#encabezadoBotones
{
	width: 700px;
	height: 74px;
	float: right;
	text-align: right;
}

/*###################################################*/
/*###-INFO_UBICACION-################################*/

#ubicacion p
{
	text-align: center;
	margin: 0 0 0 0;
	padding-top: 3px;
	font-size:11px;
	font-family: calabri, calibri, arial, "times New Roman";
	text-transform:uppercase;
	font-variant:small-caps;
}

#ubicacion p a:link, #ubicacion p a:visited
{
	color: #000000;
}

#ubicacion p a:hover
{
	color: #666666;
}

/*###################################################*/
/*###-PIE_PAGINA-####################################*/

#paginas
{
	width: 876px;
	height: 19px; /*22*/
	float: left;
	text-align:center;
	font-size: 12px;
	font-family: verdana, calibri, arial, "times New Roman";
	color: #999999;
	font-weight:bold;
	font-variant:small-caps;
	margin-top: 3px;
}

#paginas a:link, #paginas a:visited
{
	color: #666666;
	text-decoration:none;
}

#paginas a:hover
{
	color:#333333;
	text-decoration: underline;
}

#creditos
{
	width: 876px;
	height: 25px;
	float: right;
}

#cortinasomar
{
	width: 438px;
	height: 25px;
	float: left;
	text-align:left;
	font-size: 12px;
	font-family: verdana, calibri, arial, "times New Roman";
	color: #666666;
	font-weight:bold;
	font-variant:small-caps;
}

#npcstudio
{
	width: 438px;
	height: 25px;
	float: right;
	text-align: right;
	font-size: 11px;
	font-family: verdana, calibri, arial, "times New Roman";
	color: #666666;
	font-weight:bold;
	font-variant:small-caps;
}

#npcstudio a:link, #npcstudio a:visited
{
	color: #666666;
	text-decoration:none;
}

#npcstudio a:hover
{
	color:#333333;
	text-decoration: underline;
}

/*###################################################*/
/*###-MENU-##########################################*/
/*
#infoMenu
{
	width: 241px;
	height: 371px;
	background-image:url(images/menu_fondo.png);
	background-repeat: repeat-x;
	float:left;
}*/

#infoMenu .botonProducto
{
	list-style-type: none;
	padding:0px;
	padding: 0;
	margin: 0;
}

#infoMenu .botonProducto li
{
	width: 235px;
	height: 21px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	text-indent: 20px;
	margin-bottom: 10px;
	font-family: calibri, arial, "times New Roman";
}

#infoMenu .botonProducto li a
{
	display:block;
	width: 235px;
	height: 21px;
	background-image:url(images/menu_botonOff.jpg);
	color: #414141;
	text-decoration:none;
}

#infoMenu .botonProducto li a:hover
{
	display:block;
	width: 235px;
	height: 21px;
	background-image:url(images/menu_botonOn.jpg);
	color: #414141;
	text-decoration:none;
}

/*###################################################*/
/*###-CONTENIDO-#####################################*/

#contenedorContenido
{
	width: 600px;
	height: auto;
	margin: 0px auto; /*centrado*/
}

.tituloContenido h1
{
	font-variant:small-caps;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#4f4e4e;
}

.lineaSupContenido
{
	width: 600px;
	height: 7px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=crop, src='images/linea_superior.png');
	background-repeat:no-repeat;
	background-position:center;
	float: left;
}
#infoContenido[id] .lineaSupContenido{background-image:url(images/linea_superior.png); background-repeat:no-repeat; background-position:center;}

.informacionContenido
{
	width: 600px;
	height: auto;
	margin-top:20px;
	margin-bottom:25px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:13px;
	float: left;
}

.lineaInfContenido
{
	width: 600px;
	height: 7px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
	sizingMethod=crop, src='images/linea_inferior.png'); /*IE*/
	background-repeat:no-repeat;
	background-position:center;
	float: left;
}
#infoContenido[id] .lineaInfContenido{background-image:url(images/linea_inferior.png); background-repeat:no-repeat; background-position:center;}

.campoTexto
{
	font-family:Tahoma, Geneva, sans-serif;	
}

.botonesFormulario
{
	width:90px;
}

.campoTexto
{
	width:300px;
}

img
{
	margin: 0;
	padding: 0;
	border: 0;
}

.lista
{
	list-style-image:url(images/cubito.gif);
}

.lista li
{
	margin-bottom: 25px;
}

/*MUESTRA_PRODUCTOS*/
/*
#contenedorContenido
{
	width: 600px;
	height: auto;
	margin: 0px auto;*/ /*centrado*/
/*}*/

.contenedorProducto
{
	width: 600px;
	height: auto;
}

.productoImagen
{
	width: 100px;
	float: left;
}

.productoDescripcion
{
	width: 485px;
	height: 100px;
	float: right;
	overflow: hidden;
}

.productoDescripcion h2
{
	margin: 0;
	margin-bottom: 3px;
	font-size: 16px;
	font-family: calibri, arial, "times New Roman";
	font-variant:small-caps;
	text-transform:uppercase;
	text-decoration:underline;
}

.productoDescripcion p
{
	margin-top: 0;
	margin-bottom: 0px;
}

.productoDescripcion img
{
	height: 0px;
	width: 0px;
	margin: 0px;
	padding: 0px;
	border: none 0px;
}

.productoImagen
{
	width: 100px;
	height: 100px;
	border: solid 2px #A0A0A0;
	margin: 0;
	padding: 0;
}

.productoLeerMas
{
	width: 600px;
	height: auto;
	float: left;
	text-align: right;
	font-variant:small-caps;
}

.productoLeerMas a
{
	color:#000000;
	font-size:14px;
	font-weight:bolder;
}

byee saludos

[Mikmoro]

Eso se tiene que deber a otros elementos que tienes antes o después, porque ni con la clase sola que muestras al principio, ni con lo que muestras al final, eso de debe producir.
Pon si puedes un enlace a donde poder verlo.

[wawi]

este es el link http://www.npcstudio.com.ar/clientes/cortinasomar la info de cada producto se corre porque le puse a proposito borde de 10px a la imagen para que se note mejor el problema

byee saludos

[kseso?]

Le aplicas la misma clase a la caja y a la imagen, así que tienes una caja de 100x100 (espacio para alojar su contenido) y quieres meter un objeto (la imagen) que mide 120x120 (recuerda el modelo de caja estádar: el tamaño es la suma de su margen, borde, padding y anchura).

Un saludo

[wawi]

huuyy me comi el img, lo arreglue con esto:

.productoImagen img
{

}

mil gracias kseso :) :)

byee saludos!