Question

I have a legacy code bug in a jsp that I’m trying to duplicate and fix. They are using frames with divs, java 1.6. JBoss 4.3, jQuery 1.6.2., and scriptlets (no JSTL). It’s a mix of old with some new.

The main frame with two columns using CSS for the layout is the problem. The left column is a tree created with 3 gifs and a span for each row. Kind of like a windows explorer type tree, but on load it’s only one level.

The layout is like this:

main frame

div both columns

div left column
form 1
form 2 that has 14 hidden form inputs and an explorer type tree

div right column

href links

CSS (I changed some names and left out the right column items).

body, html {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
#outer {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 100%;
    margin: 0;
    width: 100%;
}
#leftTree {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px none;
    cursor: pointer;
    float: left;
    margin-left: 20px;
    margin-top: 10px;
    width: 45%;
}
#rightColumnDiv {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    margin: 0;
    width: 50%;
}
.treeMenuSelected {
    background-color: #0033CC;
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    margin: 0;
}
.treeMenuNormal {
    background-color: #FFFFFF;
    color: #0033CC;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin: 0;
}
.treeMenuDisabled {
    background-color: #FFFFFF;
    color: #0033CC;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin: 0;
}

.header {
    color: #000000;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
}
h1 {
    color: #000000;
    display: inline;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 130%;
}
h2 {
    color: #000000;
    display: inline;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
}
h3 {
    color: #000000;
    display: inline;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 13px;
    font-weight: normal;
}
a:link {
    color: #3C5E9E;
    text-decoration: none;
}
a:visited {
    color: #3C5E9E;
    text-decoration: none;
}
a:hover {
    color: #3C5E9E;
    text-decoration: underline;
}

A scriptlet is used to get the tree from the bean for display to the page:

<%=page.getTree().toString()%>

Stepping line by line through the jsp I get all the data from the bean, then it displays the tree only first. Then a javascript function is called to populate the right column information.

The issue:

On older machines (not sure of the hardware), at random times the left column displays the tree diagonally, cascading across the screen, instead of vertically; however, the other column displays normally. I’ve spent two days on this and can’t duplicate it. I also don’t have a screenshot to go by. It only happens on the pages that use this tree though.

I’m using IE tools and also firebug with FF (even though it’s an IE issue) to try and pinpoint where the problem is and duplicate it.

• Removing some of the data in the hidden fields causes the tree not to display at all.
• Making the inputs text will move the first tree horizontally, but the rest display fine.
• I’ve reviewed the CSS itself and don’t see anything that could cause this.
• I thought it could be a timing issue with the page load, but all the data is returned from the backend to a bean and then passed to the page after it’s complete.

The main problem is to identify where the problem is occurring and I haven’t been able to do that. I don’t know if it’s related to an IE bug, the CSS, or what? Any ideas as to how to troubleshoot this issue?

Update:

I did find out that when the problem occurs, the page loads fine, then the tree reloads and that is when the problem shows up. Seems like the timing of the CSS rendering could be the cause, since the columns are built using CSS.

Answer 1

This was a strange one. I never could duplicate the error, but since it appeared to be a CSS rendering issue, I put in a fix by controlling the css using code.

Use a link to point to the blank.css file and then use jQuery with:

$('html').hide();

When the page is fully loaded, point to the regular css. Added a check for IE to use their proprietary method.

$(document).ready(function() {
    if (document.createStyleSheet) {
        document.createStyleSheet("/... <path>/blank.css");
    }else{
        $("head").append($("<link type='text/css' href='/... <path> /blank.css' rel='stylesheet' /> "));
    }
    
    $('html').show();
});

Then use document ready to display the correct page after everything is ready to display.

Aftermath:
Due to network issues on the test server, I was able to actually view the error, which occurred for about 1/2 seconds, and then my fix, which did work!

However, due to another issue between jQuery and IE8, document.ready() didn’t fire when it was supposed to, which required another fix for that issue. Here is a link about the document.ready() issue.

I was able to get past that with feature detection code and using load() which waits until all images, frames, etc… are completely loaded versus the interactive state of document.ready:

$(window.load(function(){
...
});

This worked for IE and Safari, but for FF and Chrome I had to use:

$(document).ready()...

I also had conditional comments in for IE8, which I removed as they were no longer needed and I changed the hide/show to use HTML instead of body, which I changed also in the code above, and that fixed the rest of the issues I was having. I’m putting this out in the hopes it will help someone else as I spent a lot of time on this. Since it was legacy code I had to work with what I had instead of the better solution of putting in a jquery tree.

Final:

The actual error was only in IE 8.0.6. There was a CSS error and rather than ignoring it, IE would stop rendering the CSS, which created the bug.