eastwop
Posts: 8
Joined: Fri Aug 31, 2007 4:01 am

Use of captions messing up layout in IE6

I just want to share this problem / solution
Summary: ONLY in IE6 I was getting a layout mess-up when I used captions - if I removed the whole <div class='highslide-caption' id='captionX' > then the problem went away.

I have a page layout with a column of images in the center of the page.
In this column, I have rows of DIVs which contain a LEFT FLOAT image and a text block to the right.

What was happening was that in IE6, the inclusion of the highslide-caption DIV was causing the column of images to break - big gaps, text floating all over the place in a few rows. When I removed the highslide caption DIV, the problem went away.

After many hours, I added <div style="clear:both"></div> after each row (before the caption DIV) and this solved the problem.

It seems that in IE6, the highslide-caption DIV is being considered by the browser as it renders, even though the div has "display:none"! :shock:

Anyway - I just wanted to share this as IE 6 is still being used a lot and this caught me out!

Return to “Highslide JS Usage”