hello folks,

I have a problem with divs opened by show() jQuery function - in FF it works fine, but IE messes things up, the divs instead of opening to their size set up in css, they stretch beyond the screen,

basically the idea is that the whole page is not scrollable, menu links open divs of certain size (970x350px) for each section, the divs are nested in a table of that size, which has an image as background in the same size, once the div of a section is open, there is a submenu, which again opens other, smaller, divs (600x290px) with show() function, the smaller divs contain the content of specific subsections, in case of overflow the jPaneScroll is attached to them,

everything works fine in FF, but IE is just a mess,

my doctype is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

the js file contains the following code which

$(document).ready(function() {

    for (var i = 0; i < 7; i++) {

        var secClose = "#sec_" + i + "_Info";
        $(secClose).hide();
    }

$('a.open').click(function(event) {
    event.preventDefault();

    for (var i = 0; i < 7; i++) {

        var secClose = "#sec_" + i + "_Info";
        $(secClose).hide('normal');
    }

    var id = this.id.replace('sec_', "");
        var secOpen = "#sec_" + id + "_Info";
        $(secOpen).show('normal');
        return false;
});

    $('a.openPos').click(function(event) {
    event.preventDefault();

    var posData = this.id.split("_");
    var sec = posData[1];
    var pos = posData[2];
    var numpos = posData[3];

    for (var i = 0; i < numpos; i++) {
        var posClose = "#pos_" + sec + "_" + i + "_Info";
    $(posClose).jScrollPaneRemove();
        $(posClose).hide('normal');
    }

        var posOpen = "#pos_" + sec + "_" + pos + "_Info";
    $(posOpen).jScrollPane();
        $(posOpen).show('normal');
    $(".openPos").addClass("menulink");
    $(this).addClass("menulinkactive");
        return false;
});
    $('a#closeBut').click(function() {
    $(this).parents("div:eq(2)").hide('normal');
    return false;
    });
});

and the css section responsible for divs:

#mainBox {
    width:  970px;
    height: 350px;

}

div.secInfo {
    background-color: #444444;
    position:relative;
    top:20px;
    left:20px;
    width:930px;
    height:310px;
    padding: 0px;
    border: 1px solid #000000;
    /* for IE */
    /*filter: alpha(opacity=95);*/
    /* CSS3 standard */
    opacity:0.95;
    display: none;
}

div.secHead {
    background-color: #000000;
    position:relative;
    top:1px;
    left:1px;
    width:928px;
    height:25px;
    padding: 0px;

}

div.secName {
    position: relative;
    width: 176px;
    height: 30px;
    left: 0px;
    top: 0px;
}

div.closeInfo {
    position: relative;
    left: -10px;
    top: -28px;
    text-align: right;
}
div.secMenu {
    position: relative;
    width: 160px;
    height: 265px;
    left: 0px;
    top: 0px;
    padding: 10px 0px;
}

div.posMenu {
    position: relative;
    width: 160px;
    height: 20px;
    left: 0px;
    top: 0px;
    padding: 2px 15px;
}

div.secData {
    position: relative;
    width: 700px;
    height: 265px;
    top: -270px;
    left: 190px;
    overflow: hidden;
}

div.posData {
    width: 650px;
    height: 260px;
    padding: 0px 30px 0px 15px;
    text-align: justify;
    overflow: auto;
}

where mainBox is the div nested in the table with the background - within this div everything happens, secInfo is a class for the divs of sections, secData is where the subsections open - and the subsections open as divs with posData class nested within the secData div,

I cannot figure out where might be the problem,

Id appreciate your help,

1 answer

Mottie 1134
0
points
This was chosen as the best answer

Well I opened up your site with firebug enabled and only received one error stating fancybox is not a function. So I saved a copy locally and found that fixing the errors also fixed the problem with IE not positioning the popup window correctly.

I found broken links to both the fancy box css & script; both urls sent me to the missing.html page. I removed these links and I also commented out the reference to fancybox found at the bottom of the "ideaPix,js" file. And the page in IE appeared to be working properly. I don't know if the problem will also correct on the live site.

Answered over 6 years ago by Mottie
  • Thank you Fudgey! Haven't been around so I couldnt answer earlier. Your answer helped me solve the problem. Tomek over 6 years ago