Internet explorer 7 and 8 truncating website content

Question

Hello All,

I've spent a few days with this problem and I can't seem to find a solution anywhere and it's driving me nuts.

I created a web page that loads all of it's content dynamically and for some reason the content gets truncated in IE 7 and 8. It works fine in firefox and opera though.

The content is larger than the size of the window and IE truncates the content so the vertical scrollbar is not enabled. I tried minimizing the window to a smaller size and it seems like IE only renders the content that fits inside the window and all the other content is not created at all since I maximized the window after refreshing and it only shows the portion of the page that fit the smaller window.

If you want to take a look at my problem you can go here, then log in as admin/alalcoalalco and after you are logged in click in the "Administración" link at the menu and reduce the height of your IE browser until half of the table fits the window. Then refresh the page and after maximizing the window you will see that the browser only renders what fits inside the window when it's smaller. If you do the same in opera and firefox it will work perfectly.

Any idea? Anything will be really appreciated.

Thanks!

Answer 1

I used the validator tool and the document seems to be valid for HTML and CSS. I found an easy way to take a look at the error in the site since I found out that it happens with all the pages, not just the one I told you. Even with pages with static content.

Go to http://www.almaxsoft.com/importec/index.php (this page has static content only) and after you have loaded the page, reduce the height of your IE 7 or 8 browser and then refresh the page. You will see that the explorer window never enables the vertical scrollbar as it only renders the content that fits the window, like in the image bellow:

error1.JPG

After I maximize the window I can see that the content has been truncated and that's the reason the scrollbar is not being enabled, like in the following image:

error2.JPG

As I am a new user I can't post images or more than one link in a single message so I will post the image repository in a new reply for you to check them.

Any ideas? I could really use some help.

Thanks!

Answer 2

I think the problem is in your CenterWindow and CloseWindow functions within common.js:

function CenterWindow(controlMain, controlWindow)
{
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = controlWindow.height();
    var popupWidth = controlWindow.width();

    controlWindow.css(
        {
            "position": "absolute",
            "top": windowHeight / 2-popupHeight / 2,
            "left": windowWidth / 2-popupWidth / 2
        });

    controlMain.css(
        {
            "height": windowHeight
        });
} 

function CloseWindow(controlMain, controlWindow)
{   
    controlMain.css(
        {
            "opacity": "1"
        });

    controlWindow.fadeOut('fast');
    controlMain.fadeIn('fast');    
}

When the page loads, CenterWindow (via OpenWindow) is called to show the div containing the 'Loading' message. Later on, CloseWindow is called to remove this 'Loading' div. At the end of CenterWindow, you set the height of controlMain (which happens to be the div with id divMain) to the browser window height. However, CloseWindow doesn't restore the height of the divMain div to what it was before the 'Loading' div was opened.

The fix is to add the lines

    controlMain.css(
        {
            "height": ""
        });

to the end of CloseWindow. This removes the temporary height set on divMain.

I can't explain why only IE7/IE8 exhibits this behaviour. However, I was able to reproduce your problem and verify that my suggestion fixes the problem.