Buenas a todos,
resulta que estoy repasando la compatibilidad entre los distintos navegadores y GNU/Linux y Windows. En concreto, son Chrome, Firefox, Opera e IE6, el 7 y 8 los miraré más adelante.
El tema es el siguiente, con la siguente función, que se que no tiene nada que ver con CSS pero por poner en situación del tratamiento de las imágenes, muestro las imágenes escaladas en todos los navegadores, y de hecho, funciona perfectamente...de no ser porque en IE6, al poner en height y width un valor inferior a 220, que es precisamente lo que necesito, las imágenes no se ven...
Os dejo el código PHP y CSS:
Código PHP:
echo "<div id=\"productos\">";
while( $resultados = $bd->fetch_array($consulta) )
{
if( $i > 0 )
{
$propiedades = GetImageSize("imagenesArticulos/$resultados[NombreImagen]");
$anchura=$propiedades[0];
$altura=$propiedades[1];
if($anchura > $altura) $res = "width=\"220\""; else $res = "height=\"220\"";
echo "<div class=\"articulo\">
<div class=\"articuloSuperior\">" . $resultados[Nombre] . "</div>
<div class=\"articuloCentral\"><a href=\"verArticulo.php?idArticulo=$resultados[CodArticulo]\"><img src=\"imagenesArticulos/$resultados[NombreImagen]\" " . $res . " alt=\"$resultados[NombreImagen]\" /></a></div>
<h4><object><a href=\"anyadeArticuloCesta.php?idArticulo=$resultados[CodArticulo]\">Comprar</a> " . " $resultados[Precio]€</object></h4>
</div>
";
if( $articulos > 0 )
{
echo "<span><img src=\"images/motivoLin.png\" alt=\"\"></img></span>";
}
$articulos--;
}
$i--;
}
echo "</div>";
Código PHP:
#catalogo {
border: 2px solid #228B22;
}
#catalogo , #catalogo2{
margin: 0 auto;
overflow: hidden;
text-align: center;
left: 1%;
position: relative;
}
#productos {
margin: 0 2%;
margin:0;
padding:0;
border:0;
outline:none;
position: relative;
}
#productos .articulo {
float: left;
width: 27%;
height: 190px;
margin: 2%;
padding: 5px;
position: relative;
}
#productos span {
float:left;
margin: 0 auto;
}
#productos h4 {
text-align: center;
}
#catalogo .articuloCentral img, #catalogo2 .articuloCentral img, #SuperVentas .articuloCentral img {
max-height: 140px;
max-width: 170px;
margin: 5px auto;
border: none;
position: relative;
}
#catalogo .articuloCentral img:hover, #catalogo2 .articuloCentral img:hover, #SuperVentas .articuloCentral img:hover {
border: 2px solid black;
}
No entiendo para nada el por qué, no lo veo lógico la verdad, imagino que hay algo que se escapa, porque he revisado todo a fondo y nada de nada...
Dejo igualmente la url de la web, para que la podais ver y además 2 imágenes con el resultado en chrome y el resultado en ie6:
www.costablancamodas.hostoi.com
Y aquí las imágenes que os he comentado:
