jQuery and XHTML layout problems in ie7

Question

Hi there,

I am back again with more layout problems on my up and coming website. I am able to achieve the proper animation, positioning and results with my layout / splash on every modern browser (excluding ie7 or older).

I have an image in the center of the page, that is text-align: center'd, and pushed to a vertical center by having a div (#SPLASH_HEAD) set to 50% on the top half of the page. The loading animation changes the height of #SPLASH_HEAD to 0px, to drag the image to the top (and then do other things).

In ie7 (or compatability mode), it appears that there is an error in jquery-1.4.2.min.js, line 116 char 165 (which I dont think has anything to do with the actual jQuery file itself). The splash is not centered either vertically (#SPLASH_HEAD does not register at 50% of window height) and is not centered properly with margin-left. Also, none of the other elements are hidden properly (with .hide()) as ie7 does not appear to be loading all of my jQuery / javascript.

heres a link: www.voidsync.com/test (it would be easier to view the source on there)

thanks!

Answer 1

On line 66 of your jquery.js you're passing the value "inherit." IE sometimes has a fit with this value.

$("#CONTAINER").css("height","inherit");

Try commenting out that line. Then, refresh your page in IE7. If the problem persists, change the value to either "auto" or "".

If that doesn't solve the problem, try moving your design back to jquery 1.3.2. I found a bug in jquery just yesterday, and it's possible you have too. GOOD LUCK!