Foros del Web » Creando para Internet » CSS »

Problema con clase en internet explorer

Estas en el tema de Problema con clase en internet explorer en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/07/2009, 10:51
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 9 años, 3 meses
Puntos: 87
Problema con clase en internet explorer

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
  #2 (permalink)  
Antiguo 22/07/2009, 11:11
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema con clase en internet explorer

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
  1. .obras img{
  2. margin:10px;
  3. border:solid 1px #000;
  4. }

Chao y suerte!...
  #3 (permalink)  
Antiguo 22/07/2009, 11:41
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 9 años, 3 meses
Puntos: 87
Respuesta: Problema con clase en internet explorer

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
  #4 (permalink)  
Antiguo 22/07/2009, 11:58
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Problema con clase en internet explorer

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
  #5 (permalink)  
Antiguo 22/07/2009, 12:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con clase en internet explorer

Mira a ver si esto te sirve de ejemplo:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin:0;padding:0; border:0; outline:none;  position: relative;}
  7. .catalogo {
  8.  min-width: 400px;
  9.  width: expression(document.body.clientWidth < 401? "400px": "auto" );
  10. max-width: 800px;
  11. width: expression(document.body.clientWidth > 801? "800px": "auto");
  12.  margin: 0 auto;
  13.  border: 1px solid #600;
  14.  overflow: hidden;
  15.  text-align: center;
  16.  }
  17. .catalogo h5 {text-align: center; font-size: 1em; display: inline;}
  18. .catalogo .articulo {
  19.   float: left;
  20.   width:170px;
  21.   margin: 5px;
  22.   padding: 10px;
  23.   background: #444;
  24.   overflow: hidden;
  25.   color: #cdcdcd;
  26.   }
  27. .catalogo .articulo img {
  28.   width: 170px;
  29.   height: 170px;
  30.   display: block;
  31.   margin:5px auto;
  32. }
  33. </head>
  34. <div class="catalogo">
  35.     <div class="articulo">
  36.     <h5>Artículo: nombre</h5>
  37.     <img src="http://ventas26.files.wordpress.com/2008/09/cliente-es-primero1.jpg" tittle="" alt= "" />
  38.     A&ntilde;adir al carro: 30
  39.     </div>
  40.     <div class="articulo">
  41.     <h5>Artículo: nombre</h5>
  42.     <img src="http://www.antoniodomingo.com/wp-content/uploads/2009/03/cliente.jpg" tittle="" alt= "" />
  43.     A&ntilde;adir al carro: 30
  44.     </div>
  45.     <div class="articulo">
  46.     <h5>Artículo: nombre</h5>
  47.     <img src="http://www.blocdeapuntes.net/images_wordpress/atencion_cliente.jpg" tittle="" alt= "" />
  48.     A&ntilde;adir al carro: 30
  49.     </div>
  50.     <div class="articulo">
  51.     <h5>Artículo: nombre</h5>
  52.     <img src="http://gonzalezsanchez.files.wordpress.com/2008/08/servicio-al-cliente.jpg" tittle="" alt= "" />
  53.     A&ntilde;adir al carro: 30
  54.     </div>
  55.     <div class="articulo">
  56.     <h5>Artículo: nombre</h5>
  57.     <img src="http://www.simply.es/images/izquierdaAtencionCliente.jpg" tittle="" alt= "" />
  58.     A&ntilde;adir al carro: 30
  59.     </div>
  60.     <div class="articulo">
  61.     <h5>Artículo: nombre</h5>
  62.     <img src="http://lacrudarealidad.blogsome.com/images/vodafone.jpg" tittle="" alt= "" />
  63.     A&ntilde;adir al carro: 30
  64.     </div>
  65.     <div class="articulo">
  66.     <h5>Artículo: nombre</h5>
  67.     <img src="http://elezeta.net/blog/wp-content/uploads/2008/03/el-cliente-siempre-tiene-la-razon.jpg" tittle="" alt= "" />
  68.     A&ntilde;adir al carro: 30
  69.     </div>
  70.     <div class="articulo">
  71.     <h5>Artículo: nombre</h5>
  72.     <img src="http://bligoo.com/media/users/0/11288/images/disenador%20cliente.JPG" tittle="" alt= "" />
  73.     A&ntilde;adir al carro: 30
  74.     </div>
  75. </div>  
  76. </body>
  77. </html>
Las clases implicadas son:
.catalogo .articulo
.catalogo .articulo img
De todas formas, hay una pequeña diferencia entre ie6 y FF.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 23/07/2009, 08:42
Avatar de quike88  
Fecha de Ingreso: agosto-2008
Mensajes: 471
Antigüedad: 9 años, 3 meses
Puntos: 87
Respuesta: Problema con clase en internet explorer

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:02.