IE7 display oddity (example attached)

Question

I'm working on a Javascript-based replacement for a Flash applet. The site is having rendering problems only in IE, where it exhibits a behavior that has me at wit's end.

http://janetalasher.com/new/content/portfolio/artcloth/ (This is the page)

What does IE do that's so strange (in this case only)? If you look in Firefox, you'll see a table of images on the right which has the thumbnails. IE6 and IE7 don't show this... unless you are in print preview. It's not a CSS glitch - I've disabled all stylesheets and the error still occurs. I'd provide more relevant source code, but I don't even know where the problem is. The .js files that I suspect (if it's any help) are:

/common/gallery/display.js
/common/gallery/loader.js

Okay - update: It is definitely rendering properly in print preview mode only. Can someone please explain to me in what world this happens? The div is present in the normal mode, but the table won't render. Using the IE developer toolbar confirms it and all the cells are present.

Answer 1

Try adding semi-colons here:

function loadGallery(xml)
{
 thumbpath = $(xml).find("thumbpath").attr('dir') // add here
 imagepath = $(xml).find("imagepath").attr('dir') // here
 detailpath = $(xml).find("detailpath").attr('dir') // and here
 cSheet = contactSheet(xml);
 $('.contactSheet')[0].appendChild(cSheet);    
            display($(cSheet).find('img')[0]);
}

Also, on this line:

jQuery.get('/new/content/portfolio/artcloth/gallery.xml' , 'xml' , function(data) { loadGallery(data); } ) // missing one here too

Actually, your Javascript files are missing semi-colons on the end too. Make sure you go through each file and add one to the end of each line.

Javascript does not actually require them, but for the sake of sanity and knowing exactly what your code is going it is a good idea to put them in. For example:

return
1

Can become:

return;
1;

Which returns nothing at all, not exactly the desired effect.

Answer 2

It would seem that IE is not picking up the styles. If I open the page in chrome, the "float:left" style appears on the description div. however, in IE this is not the case.

You currently have your includes in a div in the body of the document. If it is possible try moving these into the head. I'm talking about the link and script tags directly descendant of div id="pageHead".

(I am using IE6 and the developer toolbar to get this information)

Answer 3

In /common/css/generic.css

div#information
{
margin-left:188px;
m\argin-left:94px; <------ not sure if that would cause this, but thought i would point it out
}

Answer 4

According to Microsoft Script Editor, there's an error inside jQuery caused by this line:

$('#lower').css('padding-left' , paddingLeft - (lowerRightProtrusion < 0 ? 0 : lowerRightProtrusion) + "px");

Since lowerRightProtrusion is NaN, and NaN < 0 calculates to false, you're actually setting padding-left to "NaNpx". Does not compute ;)

See my previous answer for info about MS Script Editor: http://stackoverflow.com/questions/780059/using-the-ie8-developer-tools-to-debug-earlier-ie-versions/801547#801547