1. Home
  2. Forums Index
  3. Browser Side / HTML 9:22 am May 2, 2026

Forum Moderators: open

Message Too Old, No Replies

Image Upsets Tables?

Only in IE for Windows

         

matthewwithanm

11:09 pm on Nov 17, 2004 (gmt 0)

10+ Year Member



The basic problem is that I need a table to take up 100% of the window's width. The 'title cell' and right column should stretch to take up the entire width of the window while the left column maintains a static width.

I wrote some quick code I thought would accomplish this. As I was on a Mac at the time, I checked it in all available browsers (Safari, IE, Firefox, Mozilla) and it looked fine on them all. Then I check on IE6 and it didn't. I've boiled the html down to nothing and isolated the problem. (I don't think it's related to the box model issue but I'm not sure.)

The problem is this: if the right side of the image passes the end of the text in the cell below, the table width will suddenly increase its width to greater than the window size. Here's the code.

<html>
<head>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<!--as soon as img width is great enough, page width increases!-->
<td width="100%" colspan="2" nowrap><img width="550" height="50"></td>
</tr>
<tr>
<td width="300" height="100%" nowrap rowspan="2"></td>
<td width="100%" height="24" valign="top" nowrap>The right side of the image must end by here --> ¦</td>
</tr>
</table>
</body>
</html>

Like I said, this is the barest bones of the page but I'm pretty sure I've isolated the problem here.

THANKS SO MUCH FOR THE HELP!

Saltminer

11:24 pm on Nov 17, 2004 (gmt 0)

10+ Year Member



It displays exactly the same in Firefox and IE 6 for me. IE has more margin at the top of the page, that's the only difference I see between the two browsers.

I'm using 1024x768, I didn't try it at 800x600.

matthewwithanm

12:14 am on Nov 18, 2004 (gmt 0)

10+ Year Member



To clarify, in its current state, the code looks identical in all browsers. This is how I want it to work. Expanding the width of the image, however, so that its right side passes the text in the cell below will cause the table width to be greater than the window width.

Please note the difference between the page in its current form and the page if the image width is changed to, for example, 650.

Thanks!

Saltminer

11:44 am on Nov 18, 2004 (gmt 0)

10+ Year Member



I tried 650, 750, then 850. I can flip back and forth between IE and FF and it still looks the same. Other than that top margin difference.

matthewwithanm

12:48 pm on Nov 18, 2004 (gmt 0)

10+ Year Member



Are you using SP2? Also, I tried FF on Mac, not PC. Maybe PC FF has the same bug as IE6. When you make the image large enough so that its right side passes the last character of the text in the cell below, is does the entire width of the table still fit in the window? It doesn't for me, and I've tried multiple computers all running IE6. Can I post an image?

Thanks for sticking with me. I need to figure this one out!

Saltminer

9:13 pm on Nov 18, 2004 (gmt 0)

10+ Year Member



No, I'm running Win2K.

Strangely enough when I got home this afternoon and tried it again it did expand too far!
IE can be really quirky when it's quirky...

But I think this will fix you right up.
You really don't need the 100% width for that cell, it was causing IE to do 100% of the table width. Try this without it in there. 


<html>
<head>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<!--as soon as img width is great enough, page width increases!-->
<td colspan="2"><img width="750" height="50"></td>
</tr>
<tr>
<td width="300" height="100%" nowrap rowspan="2"></td>
<td height="24" valign="top" nowrap>The right side of the image must end by here --> ¦</td>
</tr>
</table>
</body>
</html>

Added note:
You already have the table width set at 100%, and the left td has a width of 300, so the text block td will expand out to fill the 100% table width.

matthewwithanm

10:18 pm on Nov 18, 2004 (gmt 0)

10+ Year Member



Thanks again for sticking with me but we're still not there. I might as well just post the whole table.

<table border="0" cellpadding="0" cellspacing="3" width="100%" height="100%">
<tr>
<td width="100%" height="100" colspan="3" nowrap bgcolor="#CC0000" valign="middle" align="left"><img width="687" height="52" border="0"></td>
</tr>
<tr>
<td width="100%" height="24" colspan="3" nowrap bgcolor="#333333" class="heading"></td>
</tr>
<tr>
<td width="100%" colspan="3"></td>
</tr>
<tr>
<td width="400" height="24" colspan="2" nowrap bgcolor="#333333" class="heading"></td>
<td width="100%" height="24" nowrap bgcolor="#333333" class="heading"></td>
</tr>
<tr>
<td width="100" height="100" nowrap class="trackNum" valign="middle" align="center"></td>
<td width="300" height="100" nowrap bgcolor="#CCCCCC"></td>
<td width="100%" height="100%" rowspan="4" valign="top" align="left"></td>
</tr>
<tr>
<td width="100" height="100" nowrap class="trackNum" valign="middle" align="center"></td>
<td width="300" height="100" nowrap bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td width="100" height="100" nowrap class="trackNum" valign="middle" align="center"></td>
<td width="300" height="100" nowrap bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td width="400" height="100%" colspan="2" nowrap></td>
</tr>
</table>

Now, removing the 100% widths will make the table fit on the window BUT the width of the light gray cells will no longer be static! What the #$)#@*@?! The leftmost column should have a fixed width. The middle (light gray) column should have a fixed width. Only the right (white) column should stretch.

Gosh this is frustrating.

Thanks!

scottmack

1:23 am on Nov 19, 2004 (gmt 0)

10+ Year Member



The width numbers aren't adding up equally in the table rows. Also, mixing % and fixed doesn't make math sense. Browsers are guessing at what to do.

matthewwithanm

2:00 am on Nov 19, 2004 (gmt 0)

10+ Year Member



You can take out all of the "width=100%" (except in the table tag) and get the same error.

Saltminer

10:25 am on Nov 19, 2004 (gmt 0)

10+ Year Member



The problem seems to be with the first row, or the last two. Removing any one of those will "fix" it.
Putting the top row into another table, will work but I still don't see the actual problem. 


<table border="0" cellpadding="0" cellspacing="3" width="100%">
<tr>
<td width="100%" height="100" colspan="3" nowrap bgcolor="#CC0000" valign="middle" align="left"><img width="687" height="52" border="0"></td>
</tr>
<table border="0" cellpadding="0" cellspacing="3" width="100%" height="100%">
<tr>
<td width="100%" height="24" colspan="3" nowrap bgcolor="#333333" class="heading"></td>
</tr>
<tr>
<td width="100%" colspan="3"></td>
</tr>
<tr>
<td width="400" height="24" colspan="2" nowrap bgcolor="#333333" class="heading"></td>
<td width="100%" height="24" nowrap bgcolor="#333333" class="heading"></td>
</tr>
<tr>
<td width="100" height="100" nowrap class="trackNum" valign="middle" align="center"></td>
<td width="300" height="100" nowrap bgcolor="#CCCCCC"></td>
<td width="100%" height="100%" rowspan="4" valign="top" align="left"></td>
</tr>
<tr>
<td width="100" height="100" nowrap class="trackNum" valign="middle" align="center"></td>
<td width="300" height="100" nowrap bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td width="100" height="100" nowrap class="trackNum" valign="middle" align="center"></td>
<td width="300" height="100" nowrap bgcolor="#CCCCCC"></td>
</tr>
<tr>
<td width="400" height="100%" colspan="2" nowrap></td>
</tr>
</table>

That's a kludge, but the only way I've found so far to make it display correctly in IE.

SuzyUK

11:05 am on Nov 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



there is weird/quirky behaviour in Tables that use "colspan" and rely on one column trying to calculate width.. In Ie of course..

see this thread [webmasterworld.com] for more details..

So something else to try...remove all widths from the cells and add this:


<table border="0" cellpadding="0" cellspacing="3" width="100%" height="100%" style="table-layout: fixed;">
<colgroup>
<col width="100" />
<col width="300" />
<col width="*" />
</colgroup>
<tr>...etc

Suzy

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 9:22 am May 2, 2026