IE 6 Layout problem

[Gr8Writer]

I have a page that displays ideally in Firefox: http://www.e-tungsten.com/mim_and_pim.html

However, the same page in IE 6 has the table with the pictures stretched out past the right edge of the screen without any scroll bar. If I adjust the table width to accomodate IE 6, this messes with the width of the table columns in Firefox.

Is there any way to adjust this page so that it will look good in both browsers? I've just about come to the end of my rope with this problem and really need some help with it, so *any* help would be appreciated.

Thanks.

[Gr8Writer]

My bad. I accidentally left this page overnight in its width-adjusted state. If you could please take a look now and see what's wrong with the page, I would greatly appreciate it.

You can see the page with the 80% width here: http://www.e-tungsten.com/mim_and_pim-test.html

Also, I validated the page with two validators and both times the page passed validation.

Thanks in advance.

[Taltos]

I took a few minutes to take a look and my first thought is that you may not have your <tr> and <td> tags balanced. It was taking too long to find the problem but that is the first thing I would look at. I usually keep my tags seperate from the content and on a different line so I can match them up easier.

Other than that, it looks like IE is pushing the second column in your innermost table over to the right of

<H2 style="color: #00FFFF">Metal Injection Molding (MIM) &amp;<BR>Powder Injection Molding (PIM)</H2>
<DIV style="padding-right: 0px"><!-- start no right padding for table -->
<H3>Place your <A HREF="https://www.e-tungsten.com/query.html">MIM and/or PIM enquiry </A> here.</H3>

I'm not sure why yet unless tags don't balance. The other thing that makes this difficult is the percentages on the widths. I know you had a previous thread on this topic and decided to go the way you have. With % you have to make sure that ALL containing elements have a % width also or the inner ones don't know what width to start from to figure the %.

Hope this makes some sense.

[Gr8Writer]

Originally Posted by Taltos

Other than that, it looks like IE is pushing the second column in your innermost table over to the right of

<H2 style="color: #00FFFF">Metal Injection Molding (MIM) &amp;<BR>Powder Injection Molding (PIM)</H2>
<DIV style="padding-right: 0px"><!-- start no right padding for table -->
<H3>Place your <A HREF="https://www.e-tungsten.com/query.html">MIM and/or PIM enquiry </A> here.</H3>

Thanks, that did seem to be the problem, but I've worked around it now by putting each caption in its own table cell.

With % you have to make sure that ALL containing elements have a % width also or the inner ones don't know what width to start from to figure the %.

What's ironic is that this is exactly what was causing the problem. I took out the width attribute of the innermost table and my problems disappeared.

Thanks for your help, though.

[Taltos]

No problem.

FYI...The % issue was probably that you had 100% width in the innermost table but its containing tag didn't have a % width. That made it use 100% of the browser window (sort of) as the width for the innermost table.

[Gr8Writer]

Originally Posted by Taltos

No problem.

FYI...The % issue was probably that you had 100% width in the innermost table but its containing tag didn't have a % width. That made it use 100% of the browser window (sort of) as the width for the innermost table.

Actually the containing tag did have a percentage -- 82%. The whole screen is split into two columns: 18% from the left margin is the navbar and 82% (the right column) is the content area. The content area is also enclosed by a green border created with a DIV tag that utilizes a CSS class.

I want to use 100% of the 82% content area, while keeping the innermost table within the green border. Thus, for the innermost table, I used

<table border="1" width="100%" cellpadding="0" cellspacing="0">

However, I found that when I did not specify a width for the innermost table, the browser calculated the table width itself and displayed it perfectly in both IE 6 and Firefox 2. Go figure...

Thanks for the reply.