IE5 table bug?! workaround needed

[carpeliam]

I never thought I'd say this (in fact I didn't think I'd be posting in an HTML forum for this project either), but it seems as though there's an IE5 table bug. Yep, you thought those were for NS4, but apparently this is an honest to goodness bug, unless I'm overlooking some small little screw-up in either my CSS or HTML (which has happened, so I guess I can't rule it out just yet).

The two browsers of reference for this page are IE5 (the culprit) and NS6/Mozilla (which displays it "correctly", ie the way I want it to). The URL is

http://www.acm.wpi.edu/~gdc/temp/index_temp.html

. The tables have borders due to the fact that it's easier to see what's going on (they won't be in the final version).

It seems as though an inner table (the one containing the words "General Information Events Projects Resources&quot is changing the way that the outer table is displayed. Generally, that should NOT happen (to the best of my knowledge). The cells of the second row of the outer table (the one containing the bottom of the beveled edge border) all have widths specified in the CSS document which are being ignored by IE5. Specifying them in HTML instead of CSS had no effect.

One requirement (self-imposed) for this project is that the HTML & CSS are strictly standards-based, and that the design isn't too cumbersome (ie, no spacer gifs, etc).

To accurately display how the inner table is dictating the outer table cell's width properties, I've uploaded two additional HTML files where I've removed cells from the inner table. They can be found at

http://www.acm.wpi.edu/~gdc/temp/index_temp1.html

and

http://www.acm.wpi.edu/~gdc/temp/index_temp2.html

..

Thank you in advance for any workarounds, fixes, or general ideas that you can send my way. Again, it displays correctly in Netscape 6/Mozilla, but not in Internet Explorer 5. I do plan to demo this today (4/3/01) at around 9PM EST, but if you view this afterwards don't hesitate to contribute. Thanks again. Liam Morley
imotic@hotmail.com
"light the deep, and bring silence to the world.

light the world, and bring depth to the silence."

 

[aperfectcircle]

Mess with position:absolute on the tables. You should be able to get it to display correctly with a little bit of work... I added style="position:absolute" to the inner table and it looked like it corrected the width problem. But it also added a problem... Now the inner table is overlapping the lower section of the table (in IE), but you shouldn't have too much trouble fixing this.

Hope that helped.

 

[carpeliam]

thanks.. I was thinking about that. I'll go with that for now. Liam Morley
imotic@hotmail.com
"light the deep, and bring silence to the world.

light the world, and bring depth to the silence."

 

[carpeliam]

there's one problem with this solution- as different browsers have slightly different layout engines, it will show up in slightly different places depending on which browser it's shown in. If it looks right at "position: absolute; top: 120px;" in IE, it's going to look slightly off in Netscape. There are two solutions that I know of for this problem; either I fix it in JavaScript by asking the client which browser it uses (which I really don't want to do), or I make the ENTIRE page absolutely positioned (which I also really don't want to do).

Does anybody have any additional ideas on how to solve this problem?

Thanks again... Liam Morley
imotic@hotmail.com
"light the deep, and bring silence to the world.

light the world, and bring depth to the silence."