Listas flotantes no flotan como deberia

Pollito_69 · #1 (**permalink**) 15/04/2009, 08:26

Estoy intentando hacer una galería de imágenes según el código sacado de http://www.webtaller.com/construccio....php?bol0307-2 y estoy intentando que al poner el ratón encima de la imagen, esta se vea un poquito más grande, sin embargo, al hacer el zoom, los elementos de la siguiente linea flotan a partir de este, por lo que salen descuadrados, ¿como puedo arreglar eso?

Código PHP:

  <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin t&iacute;tulo</title>

</head>

<style type="text/css">

#principal li {

   display: inline;

   float: left;

   width: 220px;

   background-color: #f5f7f9;

   padding: 5px;

   margin: 20px;

   text-align: center;

   border-right: #a5a7aa solid 1px;

   border-bottom: #a5a7aa solid 1px;

}

#principal li img {

    width: 220px;

}

#principal li:hover,

#principal li:hover img{

    width: 300px;

}

#principal li a {

    display: block;

}

</style>

<body>

<div id="principal">

    <h3>GALERÍA CSS - Listas</h3>

    <ul>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen más larga de lo habitual</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

        <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br /><span>Descripción de la imagen</span></a></li>

    </ul>

</div>

<br style="clear: both;" />

</body> 

</html>

Pollito_69 · #2 (**permalink**) 15/04/2009, 12:26

He conseguido que funcione bien en Firefox utilizando los selectores avanzados, sin embargo Internet Explorer no lo usa bien, y no se como arreglarlo.
He introducido el siguiente estilo:

Código PHP:

  #principal li:hover + li {

    clear: both;

}

¿a alguien se le ocurre algo?