HTML Nesting Table -- How?

[sher07]

Dear friends:

Please see my site at:

http://www.immortalgems.com/

Please compare the right margins (at 1024 X 768 resolution) with the original version at:

http://www.immortalgems.com/original/index.html

I opened the original template PSD image for the home page in Photoshop 7, removed all the layers and slices that filled up the main panel, leaving everything else just as it is. I then switched to ImageReady, saved the HTML index.html file and images Optimized As and then created a site in GoLive 6 and uploaded it as is.

For purposes of comparison, I also created a site in Dreamweaver and checked it in its Preview in Browser and saw the exact same problem: if you switch your resolution to 800 X 600, everything looks perfect. However, at 1024 X 768, the right margin is white instead of being an extension of the page background and the bottom panel does not extend all the way to the right screen margin.

I've been told that I need a containing table with WIDTH=100% to contain the fixed size pixel table in order to resolve this issue.

I did a search for a tutorial on containing tables in Google. I found one at:

http://www.designplace.org/tutorials.php?page=1&c_id=5

I tried to apply it to my site. But I've obviously failed as you can see it at:

http://www.immortalgems.com/index-m.html

Please scroll down till you see the image.

I'd appreciate help on resolving this issue.

Is there a way to edit the image size in Photoshop/ImageReady to automatically generate the correct HTML page?

All my thanks.

Benjamin

[Buzz]

Hi Benjamin,

If you look at your beginnign code for the page:

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
  <tr> 
   <td><div align="left"><b>The containing table</b></div>


<TABLE WIDTH=770 BORDER=0 CELLPADDING=0 CELLSPACING=0>

You'll see you do have a nested table. Your first table is set to 100% the screen availability. You're nested table is set to a max width of 770 pixels however. Therefore your nested table will remain the same size (770 px) at all times. If you wish to make the table fit the page you need to change the width of the nested table to 100% similar to the containigng table. Based upon your layout, however, it may cause serious issues with elements and images lining up.

[sher07]

Dear Scott and friends:

Thanks so much for your kind help. I've changed the width=770 to width=100% in the fixed table, but, as you anticipated, this wreaks havoc with the original design. Could you please provide specific suggestions on how I might correct this?

All my thanks.

Benjamin

[Buzz]

The only real fix would be to redesign. If you know you want your page to expand based upon the viewers monitor resolution, you must design the page with that in mind.

Other than that, you can center your nested table and add a background image to the page or an appropriate color to the background.

[sher07]

Dear Buzz and friends:

Thanks so much for the good advice. I'll think about it and see what can be done.

Thanks again.

Benjamin