Hi
I give up, I can't find the problem nor any solution.
In a div tag I have some images, which are themselves inside div tags for positioning. I'm using a set width of the surronding div tag and the image elements are placed using float:left; and also a set width, so that there are room for 5 images per row. So if there are more than 5 images the next one hops down underneath the first one and so on.
The surounding div has a border, which for some reason IE doesn't display... sometimes. When the page is loaded you can't see it, as if the images are on top of it and thereby hiding it. When you do some things (scroll, highlight or click things for example) the border somtimes get visible. If there are more than 5 images, and thereby 2 rows of images, the upper border only covers the lower row, as if the surounding div doesn't stretch to cover them all.
There must be something wrong with the way I use float, clear or something.. I just dont know! Please help. From the links below you can find the page and css code. The classes you wanna look at is probably
.kittens .images { ... } //the surounding div element
.kittens .images .image { ... } //div elements which holds the actual image tag
And also there is a class 'break', which is placed after the floating divs to make the surounding div stretch downwards. It looks like this
/* A simple, empty div tag to place after div tags with float */
.break {
width:100%;
clear:both;
margin:0;
padding:0;
line-height:0;
font-size:0;
}
http://www.kattakombens.com/index.php?page=kittens
http://www.kattakombens.com/css/kittens.css
You should probably look at the page in FF first for the correct view. Then when seeing it in IE you'll spot the problem.
Thanks
lizciz |
