View Full Version : Issues with tables in absolute divs in IE / Firefox

02-04-2005, 05:34 PM
The objective:
Produce page content which behaves as if it were 'tabbed' as seen on many websites and programmes.
I have done this many times before, but only with absolute positioning from the document base level. This time, the div containing the information to be tabbed has to appear relative (for re-sizability) and contain the tab divs within it.
I am using a short javascript to change the z-index of the divs in order to produce the tab effect.

The problem:
The whole thing works fine, except for:
- If I leave the css height off the divs, IE chops the bottom off, and does not allow a scroll.
- If I put a height and auto (or scroll) overflow on the divs they display correctly in IE, but disappear in firefox
- Until a table contained within one of the divs becomes larger than the stated height. At which point that div (not any of the others) disappears from IE as well. (hit the 'dates and prices' tab)
- If I use 'display' or 'visibility' CSS properties, IE incorrectly identifies the 'width:100%' declaration as 100% of the browser window (after the javascript runs through), and makes a massive, incorrectly positioned div.

The question:
Is this a known bug? If so, what is the work-around?
Have I done something dumb? If so, what?

The source:
source files are available for download (they are quite large, and I don't want to trim them in case something in the trim is the problem. Plus they need to be large to demonstrate the length issue correctly). Text within these examples is copyrighted by various people and is used without permission, for illustrative purposes only.

the xhtml page (http://pdt.iomartinternet.com/holidaysbycoach/tour_details/1/1234U) - click through the tabs to see the effect. Add extra rows to the table in the 'dates & prices' tab to see the disappearing problem.
the javascript file (http://pdt.iomartinternet.com/holidaysbycoach/resources/javascript.js) - the function is at the bottom, 'layer_z_lift'.
the css stylesheet (http://pdt.iomartinternet.com/holidaysbycoach/resources/style.css) - the styles for the tabs are in the middle, commented as tour details tabs.

a reduced file (http://pdt.iomartinternet.com/holidaysbycoach/1234U.html) (containing the pertinent components) - but there are several page components missing, which are the parts which necessitate a layout-independent solution to this problem.

Interestingly, the display as seen in this xhtml page (http://pdt/holidaysbycoach/tour_details/1/4463L) works as intended, but adding one more row to the table blows it up.

Any questions, ask and I shall answer