CSS window height problem with dynamic loaded css

Question

Hi all:

Please go here and use username "admin" and password "endlesscomic" (without wrapper quotes) to see the web app demo.

Basically what I am trying to do is to incrementally integrate my work to this web app, say, every nightly, for the client to check the progress. Also, he would like to see, at the very beginning, a mockup about the page layout.

I am trying to use the 960 grid system to achieve this. So far, so good.

Except one issue that when the "mockup.css" is loaded dynamically by jQuery, it "extends" the window to the bottom, something I do not wanna have...

As an inexperienced web developer, I don't know which part is wrong. Below is my js:

/* master.js */
$(document).ready(function()
{
    $('#addDebugCss').click(function()
    {
    alertMessage('adding debug css...');
    addCssToHead('./css/debug.css');
    $('.grid-insider').css('opacity','0.5');//reset mockup background transparcy
    });

    $('#addMockupCss').click(function()
    {
    alertMessage('adding mockup css...');
    addCssToHead('./css/mockup.css');
    $('.grid-insider').css('opacity','1');//set semi-background transparcy for mockup
    });

    $('#resetCss').click(function()
    {
    alertMessage('rolling back to normal');
    rollbackCss(new Array("./css/mockup.css", "./css/debug.css"));
    });
});

function alertMessage(msg)  //TODO find a better modal prompt
{
    alert(msg);
}

    function addCssToHead(path_to_css)
{
    $('<link rel="stylesheet" type="text/css" href="' + path_to_css + '" />').appendTo("head");
}

    function rollbackCss(set)
{
    for(var i in set)
    {
    $('link[href="'+ set[i]+ '"]').remove();
    }
}

Something should be added to the exteral mockup.css? Or something to change in my master.js?

Thanks for any hints/suggestions in advance.

Answer 1

It's the #page-container div. It's got all the content of the page so it's 600px tall. It's placed below the books, so that pushes the page height to 1000px total. The position relative and -350px top moves it visually, but it's still taking its position in the flow.

The simplest solution would be to take the books out of the flow, so that you don't have to try to adjust for them with your page content. Simple position them absolute or fixed on the page.

Hope this helps.