Problema con clase en internet explorer

quike88 · #1 (**permalink**) 22/07/2009, 09:51

Hola a todos, bueno tengo un problema con una clase de mi css:

.obras img{
padding: 10px;
border:solid 1px #000;
}

Bueno esto hace que cuando haya una imagen dentro de un div que use esta clase tenga un borde con un cierto espacio entre la imagen y el borde.

En el firefox o en el chrome se ve bien, pero en el internet explorer se ven las imagenes pegadas como si el padding no funcionara, no se si estoy haciendo algo mal o porque no funciona, les dejo un ejemplo del html q uso,

<div class="obras">
blah blah<img src=""><img src="">blah blah
</div>

Gracias.

Quike

alexk · #2 (**permalink**) 22/07/2009, 10:11

quike88 el "padding" es un margen "interno" por lo tanto no es su funcion separar, para eso tenemos el "margin" trata con

Código css:

Ver original.obras img{
margin:10px;
border:solid 1px #000;
}

Chao y suerte!...

quike88 · #3 (**permalink**) 22/07/2009, 10:41

Gracias por la respuesta, pero lo q busco es que haya una separacion entre la imagen y su borde.

Asi se ve en el firefox y es como quiero q se vea
sendavisual.com/imagenes/Untitled-1.jpg

y en el IE se ve asi
sendavisual.com/imagenes/Untitled-2.jpg

Saludos

alexk · #4 (**permalink**) 22/07/2009, 10:58

ahh entiendo... talvez el problema este en el HTML pega como lo tienes y el css de "obras" a ver que tal por que esta raro debe funcionar bien!... chao

kseso? · #5 (**permalink**) 22/07/2009, 11:01

Mira a ver si esto te sirve de ejemplo:

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>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none;  position: relative;}
.catalogo {
 min-width: 400px;
 width: expression(document.body.clientWidth < 401? "400px": "auto" );
 max-width: 800px;
 width: expression(document.body.clientWidth > 801? "800px": "auto");
 margin: 0 auto;
 border: 1px solid #600;
 overflow: hidden;
 text-align: center;
 }
.catalogo h5 {text-align: center; font-size: 1em; display: inline;}
.catalogo .articulo {
  float: left;
  width:170px;
  margin: 5px;
  padding: 10px;
  background: #444;
  overflow: hidden;
  color: #cdcdcd;
  }
.catalogo .articulo img {
  width: 170px;
  height: 170px;
  display: block;
  margin:5px auto;
}
</style>
</head>
<body>
<div class="catalogo">
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://ventas26.files.wordpress.com/2008/09/cliente-es-primero1.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://www.antoniodomingo.com/wp-content/uploads/2009/03/cliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://www.blocdeapuntes.net/images_wordpress/atencion_cliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://gonzalezsanchez.files.wordpress.com/2008/08/servicio-al-cliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://www.simply.es/images/izquierdaAtencionCliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://lacrudarealidad.blogsome.com/images/vodafone.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://elezeta.net/blog/wp-content/uploads/2008/03/el-cliente-siempre-tiene-la-razon.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://bligoo.com/media/users/0/11288/images/disenador%20cliente.JPG" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
</div>  
</body>
</html>

Las clases implicadas son:
.catalogo .articulo
.catalogo .articulo img
De todas formas, hay una pequeña diferencia entre ie6 y FF.

Un saludo

quike88 · #6 (**permalink**) 23/07/2009, 07:42

gracias por las respuestas, al final hice mas o menos como tu ejemplo Kseso? sigue teniendo una diferencia en el IE, pero es minima.

Gracias.. Saludos