IE curious problem - nested divs cured by hitting refresh

Hi All,

Looking for help with my css in IE the url:

http://www.scottishfurnituremakers.org.uk/wep/pages/list_wepmakers.php

if the page looks ok then click the link in the menu top of page left hand side.

"> Which Makers are taking part?"

When you click this link the results go all screwy, but hitting browser refresh snaps them into line, but hot the link again and they go bad!

I'm new to css, here i have some results from a database to be displayed in two collumns, I've floated the results left. in a container div and called 'result-tile' this div contains two other divs 'details' and 'thumb'. All of this is contained in another div 'content'.

My css file is a mess as it;s a work in progress I've attached below the the css in question (i think). Naturally it works in firefox ok. Does anyone know if there is a solution to this. You'll notice as well that when it doesn;t work in IE the scoll bars don;t work and you can pass the mouse over the missing results and they materialise kindof!

Anyway I;ve been at this for days and am getting itls putting me off what i was beginning to really like about css.

Thanks in advance.

Ig

some of the css

.result-tile {
width : 326px !important; /* for firefox */
width : 367px; /* 368 */
height : 134px !important; /* for firefox */
height : 158px;

padding-top : 12px;
padding-right : 15px;
padding-bottom : 12px;
padding-left : 15px;

background-color : #5c2b20;

border-top-width : 12px;
border-top-color : #000000;
border-top-style : solid;

border-left-width : 12px;
border-left-color : #000000;
border-left-style : solid;

border-right-width : 12px;
border-right-color : #000000;
border-right-style : solid;

border-bottom-width : 1px;
border-bottom-color : #000000;
border-bottom-style : solid;
float : left;
}

.details{
color : #ffffff;
line-height : 18px;
text-align : justify;
white-space : normal;
width : 195px;
height : auto; /* 100 seems to make it madder on rollover phantoms appear 134 */
background-color : #5c2b20;
float : left;
}

.thumb {
width : 130px;
height : 130px;
/*background-color : #5c2b20;
border-left-width 4px;
border-left-color : #222222;
border-left-style : solid; */
float : left;
}
.content {
/*height : 410px; */
height : 100%;
/*height : auto;*/
width : 763px;
color : #ffffff;
padding-bottom : 12px;

background : #222222; /* #3B150C #300000 #222222 5c2b20 3B150C */

border-right-color : #993300;
border-left-color : #993300;
border-right-style : solid;
border-left-style : solid;
border-left-width : 1px;
border-right-width : 1px;

border-bottom-color : #993300;
border-bottom-width : 1px;
border-bottom-style : solid;
/*float: left;*/
}