Lo pego aquí por si a alguien le sirve... parece que algo me iluminó y encontré una solución, no se si será la mejor, pero al menos funciona. En el código de abajo se ven los cambios que basicamente fueron generar un div que contenga al texto mas la lista y aplicarle el 100% de altura para que funcione tanto en Explorer como Firefox, con el código height: auto; min-height: 150px; _height: 160px;. Y se le agregó un position: relative. Luego, se eliminó el div que contenía a la lista, y la clase icons se aplicó directamente sobre el ul, al que le puse una position: absolute; bottom: 0px; right: 0px;

Gracias por sus colaboraciones.
Maira.

/ ***************** codigo ************************************************************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="es">
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

div.propiedad { height: auto; min-height: 163px; _height: 100%; margin: 0 0 10px 0; padding: 5px; background: #FFFCF4; border: 1px dotted #E3D190; } div.propiedad img { float: left; clear: left; margin: 0 10px 0 0; padding: 5px; border: 1px solid #E3D190; } div.propiedad_content { position: relative; height: auto; min-height: 150px; _height: 160px; margin: 0; padding: 0; }
div.propiedad_content h3 { margin: 10px 0 10px 5px; padding: 0 0 2px 0px; }
ul.icons { position: absolute; bottom: 0px; right: 0px; text-align: right; margin: 0; padding: 0; list-style: none; } ul.icons li { float: left; margin: 0 0 0 15px; padding: 2px 0 0 0; background-repeat: no-repeat; list-style: none; background-position: 0 50%; } ul.icons li a { margin: 0; padding: 0 0 0 20px; /* width of icon + whitespace */ color: #AB7335; text-decoration: none; font-weight: normal; } ul.icons li a:hover { margin: 0; padding: 0 0 0 20px; /* width of icon + whitespace */ color: #5B3E1C; text-decoration: none; font-weight: normal; } .pcamara { background: url(../images/iconcamara.gif) no-repeat top left; }
.pcontact { background: url(../images/iconcontact.gif) no-repeat top left; }

   </style>
</head>
<body>
   <div class="propiedad">
<img src="images/propiedades/alquileres/0000_1.jpg" alt="Oficina Paladino Propiedades" width="200" height="150" />
       <div class="propiedad_content">
           <h3>MAGNIFICA QUINTA</h3>
<p>En barrio privado con seguridad y a metros del lago san roque descanse en esta magnifica quinta de 3 dormitorios, gran piscina y un parque excepcional. Salida al lago.</p> <p>$170 por día. consulte descuestos para diciembre y febrero.</p>
               <ul class="icons">
                   <li>REF: 0001</li>
<li class="pcamara"><a href="sitio.html">ver fotos</a></li> <li class="pcontact"><a href="asdfias.html">consultar</a></li>
               </ul>
       </div>
   </div>
</body>
</html>


maira wrote:

Gracias Martin y Martí por su ayuda, sin embargo, probé todas esas formas, y ninguna me daba un buen resultado. Justo leyendo otro de los post de Re: [Ovillo] Por qué usar hacks?! ví una solución que funciona de Iban Rodriguez, y puse esto:

div.propiedad { height: auto; min-height: 163px; _height: 100%; margin: 0 0 10px 0; padding: 5px; background: #FFFCF4; border: 1px dotted #E3D190; }

y funcionó perfecto tanto en ie como en ff. Esta bien ponerlo asi?
Pero aún sigo con el segundo problema y no hay vuelta para encontrarle la solución.
Gracias nuevamente
Mai.

mmundo wrote:

El 10/11/05, maira<[EMAIL PROTECTED]> escribió:
Hola lista.

Hace unos dias que no puedo resolver esto y ya estoy empezando a enloquecer.
Abajo encontrarán el código.
Es una imagen con float: left y un texto y lista que quedan a la derecha
de la misma.
El primer problema es que el div contenedor queda mas chico que el alto
de la imagen, es decir, que su altura es la del texto.
En explorer anda bien, pero en firefox no, entonces intenté solucionarlo
con min-height y con overflow: hidden. Hay alguna solución un poco mas
linda?



Hola Maira,

Sobre el primer problema tienes un ejemplo casi idéntico en la propia
especificación CSS2.1
[http://www.w3.org/TR/CSS21/visuren.html#floats].

Si al párrafo le asignas la propiedad "clear: left" obligas a
"empujarlo" hacia la siguiente línea. Este comportamiento está
descrito en la propia especificación y es debido a que se "mezclan"
elementos que se posicionan según el flujo normal (los párrafos) y
elementos que se posicionan según el flujo "flotante" (la imágen).

Si no quieres poner un clear al párrafo, con el siguiente hack obligas
a Mozilla recalcular el tamaño del párrafo incluyendo la altura de la
imágen:

p:after {
           content: "."; display: block; height: 0; clear: both;
visibility: hidden;
            }


Un saludo,
Martí Mundó.
--
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo


_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo


_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo

Responder a