width 100% forces page width to be greater than screen in IE

[stilllwaiting]

Here's my situation.

I have a table with 3 cells.

Top left contains my logo. Top right contains navigation.
Bottom has a colspan of 2 and contains the site content.

The logo has a specific width. I specify in the cell that I'd like the cell to be the exact same size as the image.

I want the table to fill the page entirely, and the cell on the right to take up the slack.

This is the basic template that fits around the rest of my website. The top 2 cells stay the same, while the bottom area changes from page to page.

Here is my code.

<table id="u_table" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td width="290" height="100" background="images/logo1-bg.jpg"><a href="index.cfm" title="blah blah blah"><img src="images/logo.gif" width="290" height="99" border="0"></a></td>  
  <td style="width:100%;">
     <!-- problem happens in line above-->
  </td>
</tr>
<tr>
  <td colspan="2">

  </td>
</tr>
</table>

This works 95% of the time.
Here's my problem:

On some pages, (usually when the page has a lot of content in nested tables), IE will force the page to be about 110% the size of my screen...even if there's more than enough room for all the content to fit on the screen.

This problem goes away when I remove the style="width:100%;" However, then the cell that holds the logo extends too far to the right and my navigation (not shown) does not display correctly.

Does anyone know a way to force that top right cell to fill the width of the page without forcing the page to be larger than my screen?

Any input would be greatly appriciated.

 

[BillyRayPreachersSon]

Instead of this:

<td style="width:100%;">

try this:

<td width="100%">

While I've not tried it myself, it might just do the job. Incidentally, the height of your first row is bigger than the height of your image.

Hope this helps,
Dan

 

[stilllwaiting]

Thanks for your quick reply!

I tried the new tag (which I think I'd tried somewhere in my many hours of trying to fix what should be a relatively simple problem) with the same results.

I honestly don't get it. I've used this technique hundreds of times before with no problem.

If anyone has an idea for a workaround, please let me know.

 

[BillyRayPreachersSon]

Hmm.. try this, then:

<td style="width:100%; overflow:hidden">

Although I suspect that it might not work as wished... because it looks as if the 100% will always be 100%, just not the 100% that you want it to be... But worth a crack anyhow!

Hope this helps,
Dan

 

[stilllwaiting]

Hmm...you were right, that doesn't quite do the trick either.

If I remove the width tag the page displays fine, except the top left cell becomes too wide, which I don't understand, since I've speicified the width.

It's very frustrating.

 

[BillyRayPreachersSon]

Can you post code (or a link to a page) that forces the width to be too wide?

Dan

 

[tviman]

In my experience, the width of the content will not exceed the width of the screen unless:

1 - the content exceeds the width
2 - there's an error in your code
3 - you've inadvertantly placed two or more elements side-by-side in which case see #1.

There's always a better way. The fun is trying to find it!

 

[HelloMike]

Try this:

    <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td width="290px">hello</td>
        <td style="width: 100%-290px;">hi</td>
      </tr>
    </table>

I haven't tried putting huge amounts of stuff in the 2nd td, but what's there works ok.

Mike

 

[stilllwaiting]

tviman: odds are it's #2 on your list...problem is there's a LOT of code to find one little html error in.

HelloMike: Thanks for the idea...tried it...didn't seem to fix the problem. Odds are the problem is elsewhere in my code.

Decided to go witha temporary workaround of just making the top two cells into one with a nested table.

Seems to have fixed the problem for now, but I'd still like to find a way to do it with just one table for the future.

Thanks everyone for all the great ideas.

 

[SparhawkRandy]

I had the same problem and was about to find two causes:

1) IE does not seem to like tables with 3 cells on a row where one is right aligned and one of the others has a width of 100%. Creating a subtable to contain two of the three cells fixed that problem. I believe this is a bug in IE becuase Netscape has no problems.

2) IE appears to use the width of invisible popup tables when it calculates the width required to render the page. The problem went away when I remove one of my popup menus.

I would appreciate any suggests on how to stop IE from using the hidden tables when calculating width.

 

[ChrisHunt]

You can probably get the same effect more efficiently using <div>s, but how about this?:

<table id="u_table" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
    <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td width="290" height="100" background="images/logo1-bg.jpg"><a href="index.cfm" title="blah blah blah"><img src="images/logo.gif" width="290" height="99" border="0"></a></td>  
        <td style="width:100%;">
          <!-- problem happens in line above-->
        </td>
      </tr>
    </table>
  </td>
</tr>
<tr>
  <td>

  </td>
</tr>
</table>

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[Ghodmode]

It's the body of the document that's overflowing, not the table.

The table itself is 100% wide, as you specified, but the padding and borders of the table are outside of that, so they make it a little bit wider.

The [tt]width[/tt] attribute of the [tt]table[/tt] element is deprecated: W3C Specification

Leave your table like this:

<td style="width: 100%;">

Then put this into your [tt]head[/tt] section:

<style type="text/css">
    html {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>

The width and height are not actually necessary in this case, but they will make it work properly if you ever decide to use the strict DTD.

Regards,
GM

--
-- GhodMode