Hi,

I’m hoping that somebody here can help me out.

I’m working on a new Drupal website and having an IE specific problem (both IE6 and IE7). Works perfect in FF and Safari

If you look at the site at http://www.freshdigital.com.au/our-fresh-team
when you click on one of the tabs at the top (in the Flash header), it triggers a jQuery slide to open up the header area for more Flash content
The problem in IE is that the main menu (an unordered list) stays in its place instead of shifting down along with everything else
If you hover over one of the menu items (before the additional Flash content drops) it triggers the menu to pop down to the place it should be.
Then when you close the expanded Flash content, the menu stays put again until you hover over an item and it pops up to it’s original spot.

My css file is http://www.freshdigital.com.au/sites/all/themes/fresh08/style.css
I have managed to narrow it down the position property of the main menu’s li elements, which I have set to ‘relative’ (see line #494 in the css file)
If I remove the position property the menu actually slides down and up with the other elements, however then the sub menus aren’t positioned correctly anymore.

I’m not that great at css and have been tearing my hair out to try and fix this.
Here’s hoping someone has a solution.

Thanks in advance

- Ben

Okay, wow I hate IE!
Took me a long while but I’ve worked out a fix.
I noticed that changing the margin-top of the active menu item caused it to be re-rendered and therefore fixed the problem.
So I’ve kept the li styles as is and I’ve added to my javascript slide function, to now check if it’s ie and if so it changes margin-top to 1px then back to 0px.
The other thing I did (only if IE) was to hide the menu when it’s in transition so you can’t see the error.