Member Avatar for DaForce2000

Hey lads/ladies,

Just working on a site at the moment, and have hit abit of a hurdle.

The site was made in PS, then sliced up and exported out as html and then worked on in Dreamweaver, all good so far.
Now I have put in an expanding/contracting menu/list thingy from dynamicdrive.

The problem im having is that when you expand the menu/list the tables around it which contain all the other buttons/tabs..etc.. expand as well, so the main menu buttons move apart. However this only happens in IE and FF, and works how I want it to in Opera 10.

See screenshots for whats happening. (mind the crazy colors)

Opera 10
You will notice that nothing changes other than the PINK table cells with the X's expand down to allow for the larger table with the expanding menu. Thats just how I want it to work. Those pink cells wont have any images in them so they can change size... suits me.

Internet Explorer 8 (and similar result in FF 3.5,)
When you open the expand the menu all cells expand evenly to incorporate the now larger middle cell with the menu/text in it.
Not what I want. as the colored cells have images/buttons in them and when they all resize nothing lines up anymore.

You can view the test page
And download the necessary files

Is there anyway I can replicate the behaviour in Opera10 in both IE and FF? have I fudged something up somewhere? (most likely)

The colors are just to make the cells stand out more, and they are filled with spacer.gif set to be the same size as the original content which I have removed just for testing.

What I have tried:
Locking in the px dimensions of each cell that I don't want to change heights.. no difference.
Tried a few CSS bits and bobs to make the cells stay put.. also.. no dice.
I even tried using Dreamweavers built in table -> div converter which converted everything fine, but then the content just spilled out over the divs with the menu was open.

Many thanks for any and all help :cool:

  • 1 Contributor
  • 1 Reply
  • 104 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by DaForce2000

Dani AI

Generated

As later posted, isolating the expanding widget fixed the immediate problem. Nesting the menu into its own table (or wrapper) effectively keeps that expansion inside a separate layout context so sibling cells are less likely to be pushed around. That is a pragmatic fix, but there are a few alternative patterns that are usually more robust and easier to maintain.

Keep the expanding content from changing the parent row by containing it and using overflow:

td.menu { vertical-align: top; }

td.menu .menuInner {
  max-height: 200px;      /* limit how tall it can grow */
  overflow-y: auto;       /* scrolls instead of enlarging the row */
}

Or remove the element from table flow with absolute positioning so it does not affect row height (needs a positioned ancestor and z-index):

td.menu { position: relative; }

td.menu .panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
}

If the layout permits, replace tables with CSS layout (flexbox or grid) so controls and panels can be sized and positioned independently; modern CSS makes it much easier to isolate an expanding panel without hacks. For predictable table column/row behavior you can also set explicit heights on non-changing cells and hide overflow.

References for the key CSS behaviors: CSS overflow and table-layout. Nested tables work as a quick cross-browser workaround, but for long-term maintainability prefer a contained inner wrapper plus overflow or a CSS-based layout.

Member Avatar for DaForce2000

Ahh, never mind, nested a table with all the menu items within one of the existing tables cells, so the cell can expand but the menu buttons don't expand (cause they are in their own table) which was causing the gaps.
Solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.