...

View Full Version : Expanding div problem (IExplorer)



ipmark
02-21-2009, 06:41 AM
I am building a new website using Jquery to add some interactive effects and although things work perfectly in firefox and chrome, explorer is handling things incorrectly.

My problem, I have a menu that expands to show additional options when it is clicked. Explorer drops this menu down correctly but the content below it fails to move.

This results in the menu being hidden behind the content below.
Firefox and chrome work fine.

I am not using any absolutely positioned divs, all floats should have been cleared (Ive put more clears in than needed).

Anyone got any ideas?
http://www.innerspacethailand.com/pcntest/Templates/pcn-main.dwt.php

I remember having similar problems with IE before but cant remember if I ever found a solution or not.

Im using IE7.

(I know Im using Jquery and this isnt the javascript section, I can make a Jquery hack if needed but would prefer a proper fix. I believe this is a problem with the HTMl/CSS in IE.)

abduraooft
02-21-2009, 07:10 AM
I am building a new website using Jquery to add some interactive effects and although things work perfectly in firefox and chrome, explorer is handling things incorrectly.
I've attached a screen shot taken from my FF2.

Have a look at a good 2 column layout at http://bonrouge.com/2c-hf-fluid.php

ipmark
02-21-2009, 08:43 AM
Cheers for pointing that out, another fix to sort, hadn't got round to cross version testing yet. (using FF3)

Could you please let me know if the (misaligned) content is moving down with the expanding menu in FF2?

Edit: Yes it does, so this problem (seems) limited to IE.
But differences in margins rendering between FF2 and FF3....

ipmark
02-22-2009, 06:45 AM
Ok, so Im getting very strange behaviour here.

FF3 and chrome - as designed.

IE6 Displays the right column (main content) BELOW the bottom of the left sidebar. The expanding menu pushes the 2 columns down as expected.
Edit: Fixed, needed an extra float.

IE7 displays the content correctly but the expanding menu is hidden behind a STATIONARY sidebar and content.
Edit: Fixed, was using 'height' instead of 'min-height' for the header containing the menu.
I thought IE treated height as others treat min-height anyway?

FF2 works the menu as expected but the margins are different to FF3 and chrome. (Noticeable on the menu bar and the scrollbars placed on the sidebar)

FF2 & 3 rendering differently really surprises me.
And the fact my menu worked fine in IE6 but not IE7 seems odd too.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum