Search code examples
csshtmlinternet-explorer-9overlapping

Overlapping divs on IE < 9 - working fine on IE9 and other browsers

I've developed an website (by the way, for a young and very creative artist :) but I'm having a problem with overlapping divs.

It can be seen at http://www.anaaragao.com/galeria/

If you press "portfolio", the categories listing will appear misaligned. Also, if one selects one of those categories, the post images will appear on a single column instead on a grid.

It doesn't happen in IE9, Firefox, Chrome or Safari. If someone could point me in the right direction it would be much appreciated. Meanwhile I'm keeping searching.

Thanks in advance.

Solution

  • I didn't look at your js code, but it seems that you created a wrong style when it's loaded in IE 8. Here is the first ul column in your source code.

    <ul class="mcol2 li_cont1" style="width: 293px; cssfloat: left;">

    Change style value from "width: 293px; cssfloat: left;" to "width: 293px; float: left;", then it will fix the layout issue.