Forums

I am still having an issue with my layout. I have posted this a couple of times and no one can seem to help me out, surely I can't be the first one to have this issue. I am using the CSS grids from YUI at http://yuilibrary.com/yui/docs/cssgrids/. I am testing with jQuery Datatable. I am testing to see what the issue is, I also used the YUI datatable with the same issue.

Here is my code:

http://live.datatables.net/efosuj/3/edit#javascript,html (it is a skimmed down version of what I have)

At work I am running IE8 on Windows 7, I have to cater for this browser. The main content overlaps the footer. I have to highlight some text and then the footer displays at the bottom of the page where it needs to display. When I get people to test this outside of my work with the same specs then it works perfectly, why would this be the case? Currently it's just plain CSS and JavaScript.

Also what I noticed is that when I place the jQuery Datatable in a YUI grid then the overlapping occurs. When I take away the YUI grid then it works fine.

I do not know how to fix this, I have looked high and low for a solution and cannot fix it. I can't just simply install a newer version of IE as there is about 32 000 people at my work with the same browser. They will upgrade to IE when it goes through the QA process, when this will happen I don't know.

I haven't had a chance to isolate this issue, but it seems to be triggered by a combination of dynamic content and display: inline-block.

Unfortunately Kris's suggestion to use zoom to trigger layout won't fix.

A quick workaround would be to use an alternative layout technique for the columns.

I updated your example to deliver display:table-cell to IE8 for #nav and #main, which seems to resolve the issue:
http://live.datatables.net/agowod/2/edi ... cript,html