Wierd issue with vertical JS menu and adjacent table cell

HTML & CSS
1

Hello,

I am testing a collapsible vertical JavaScript menu on a client’s site. It will replace a flash version.
The site is table-based with 3 columns. The menu was placed in the left column.

The strange thing is when the menu is clicked and the options expand, it changes the height of the top middle table cell, which shouldn’t be affected at all.

You can see it here:

http://www.deadsea-cosmetics.com/index-new-menu.htm

Click on the blue links to the left and as the menu expands the middle top cell does as well. Any thoughts on why this happens would be appreciated!

Thanks!

2

I think I narrowed down the problem to the “Intensive Spa” image below the menu.
If I remove that div, the problem disappears…but I don’t’ know why.

3

I don’t see that in Chrome. What browser are you seeing this in?

4

I’m seeing it in Firefox - the height of the orange area across the top increases. I’m not sure I’d have noticed it if I hadn’t been looking for it, though. :slight_smile: I’d say your bigger problem with that menu is that it’s inaccessible for folk who don’t have JavaScript enabled.

5

Hm, yes, I see it in Firefox. I’m assuming it’s the mixture of rows and columns that’s causing things to adjust as the left column expands, but it’s hard to see how it’s all fitting together. (It would be much easier to do a layout like this without tables. I’m not sure why they were ever considered easier or more reliable! But they are long out of date now.)