superposición de elementos utilizando clear:left; en explorer

[capagris]

muy buenas.

dentro del conjunto de una página que estoy diseñando tengo tres elementos (un texto, una imagen y una linea vertical).

Yo quiero que se muestren de la siguiente manera:

"texto

imagen (debajo de texto), linea vertical (acontinuación de imagen)"

El tema es, para que no se ponga la imagen acontinuación del texto y se muestre debajo, en la capa de la imagen he puesto clear: left;


pues bien el problema surge, que en firefox se ve de perlas, pero en explorer 6 y 7 se superpone la linea vertical a la imagen y se pega al texto....

Adjunto código:

CSS

Código:

#txt_cat{
    position: relative;
    float: left;    
    background-color: #f2f2f2;
    color: #666666;
    font-size: 12px;
    padding: 0 10px 0 4px;
    margin: 10px 0 0 0px;    
    
}

#img_cab{
    position: relative;
    float: left;
    margin: 10px 0 0 10px;
    clear: left;
}

#lin_vert{
    position: relative;
    float: left;
    background-color: #f2f2f2;
    height: 250px;
    width: 3px;
    overflow: hidden;
    margin: 0px 0 0px 0px;
    
}

HTML

Código:

<div id="txt_cat">Composición modular</div>                
                <div id="img_cab"> <img src="image/img.jpg" /></div>
                <div id="lin_vert"></div>

gracias