[TwoD]

I'm helping a site clean up/structure their source code a bit.
Most of the site has been designed using table layouts since many visitors were using WebTV/MSNTV, which has severe limitations in just about any area...

However, I decided that I'd try to go as far as I can with CSS and switch to another stylesheet if a WebTV client visits the page, as a worst case scenario. (Now I do it with a simple browser detect, just for testing.)

Since IE's got all these weird things going on when floating elements are involved, and WebTV isn't very happy about them either, I decided to use a simple table as a base for the columns.

I wanted the middle column to have an undefined width to allow it to grow/shrink depending on resolution. This is very important for the WebTV visitors, or they will have to scroll a looooong way to reach the right column.
The left and right columns are set to 195px each.
They are placed from left to right in source order.

However, that triggered an annoying bug in IE. FF, of course, correctly recalculates the width of the middle column when it parses the right column, but IE doesn't. That makes the middle column overlap the right column.

If I use the IE dev toolbar's View DOM window and select the right column with the "click-to-select"-tool, its width sometimes increases (but is still set to 195px). The same thing happens to the middle column if I click it after clicking the right column, thus distorting the layout more.
That's what lead me to believe that IE ignores the width of the right column when calculating the middle one.


Here's a link to the page: Test Page
It's on my local server and will be taken down when the problem is solved.
The relevant stylesheets are located in the same folder, which has no index page for easier access.
The HTML and CSS pages have been validated without significant errors (I don't care about warnings at this stage).

Does anyone know the trick to make IE calculate the widths correctly, while keeping the center column variable?
I know there is one since I've read about it somewhere, but I forgot where.

----

Any info on known CSS bugs in WebTV/MSNTV and perhaps workarounds would also be appreciated. The development documentation on that platform leaves much to be desired...

I've previously asked the company which makes a webtv-like browser to release info about why it doesn't actually support the standards it claims to do (or atleast complete info on what's not supported).

I could have obtained that info if I was willing to sign a Non-Disclosure-Agreement, which I of course refused since that kind of info should be official.

[jfulton]

...the link to your test page has been down every time I check it...

don't know how helpful I'd be with WebTV compatability anyways though...

[TwoD]

Yes, the server crashed for some unknown reason and I didn't notice, but now it's back up.

WebTV's not my highest priority hehe, if I can't get the layout to work I'll simply revert back to a simpler design that I know does work in that thing...

[jfulton]

So, first thing you might want to do if you don't have it, is to get the IE Developer Toolbar. I just found out about it a few days ago, and it's great. Wish I had found it earlier!

The one thing I notice is that the center column has padding and it looks like that is causing the center column to 'expand' and push the right column over a little bit? It's been a while since I've actually used tables for layout so I'm not 100% sure about how they should look. All I can remember is that tables can do some funky things to your css. But since you are using a strict doctype...I'm not really sure...but I'd play around with the styles on the tables and see what happens.

Unfortunately, I'm at work and can't look too much at it... I'll try again a little later tonight.

[TwoD]

I've been using the Dev Toolbar for months, even mentioned using it in my first post

You're right! It was the padding which messed up the layout in IE!
I can't use margin on tables so I used padding to achieve the effect of a margin between the columns.

I used relative units to make the spacing effect change with the font size, and that's where the problem was...
FF can handle relative units for table padding, but IE can't!

I still had a problem with the right border of the right column being clipped. But a 2px padding fixed that... I can live with the small width difference in other browsers...

Hmm, that means I could have finished this thing in August if I only had tested with absolute units...


Thanks for your help!