Solve : Table stretching in different browsers?

1.	Solve : Table stretching in different browsers?
Answer» Don't believe this is overly complicated but I'm having a lot of trouble fixing it. Problem: Putting together a site with some layering, mostly sliced up from Photoshop in HTML. I intend to learn CSS but for now I have to get the site up as is and just working. The site is here: kabledesigns.com/pam/test/ In SAFARI the site displays FINE but in Firefox the right side is screwed up. As you can see (with firefox and in picture included) on the right the TD's stretch and in turn show the white background. I have tried to fix the width of each TD along with a valign 'top' but have had no luck. Not sure if this is a colspan/rowspan issue but Dreamweaver isn't being very helpful in the manner either. Any idea WHAT is causing this problem? If it helps at all, here is a link to the site with a 3 pixel border added around the whole table: kabledesigns.com/pam/test/index2.html Help is greatly greatly appreciated Quote As you can see (with firefox and in picture included) on the right the TD's stretch I presume TD means the HTML tag for a table cell, or , right? Actually, the table cells on the right side of the page do not "stretch". What's causing the white space to the right is simply the fact that you have a fixed width page. So, when viewed in a browser window that's wider than your fixed-width page, you're going to see white space to right. Apparently, you've designed the page so that it covers the whole screen width on your computer when viewing it with Safari. But, you have FAILED to recognize that visitors to your site will have a wide RANGE of screen resolutions and different monitor sizes. Here's what I see on a 19 inch monitor set at 1680 x 1050 resolution, using Internet Explorer 8: And, of course, the same amount of white space appears on the right if I view it in Firefox, on the same monitor. The white background in the space to the right is simply due to the fact that you have set white as page background. Until you learn CSS and more advanced techniqes for controlling page layout, I sugggest you center the page and, if you do not want that empty space to the right, and to the left if the page is centered, then choose a color other than white or an image as page background. To center a page which uses tables for layout, such as yours, you can put the entire page inside another table and then center that table. An example of a fixed width page where one background color appears across the entire span of the page: http://www.pigeonroostfarm.com/. An example where the overall page background and the background in the centered page body are different: http://hosanna-lutheran.org/.

Answer»

Don't believe this is overly complicated but I'm having a lot of trouble fixing it.

Problem: Putting together a site with some layering, mostly sliced up from Photoshop in HTML. I intend to learn CSS but for now I have to get the site up as is and just working.

The site is here: kabledesigns.com/pam/test/

In SAFARI the site displays FINE but in Firefox the right side is screwed up. As you can see (with firefox and in picture included) on the right the TD's stretch and in turn show the white background. I have tried to fix the width of each TD along with a valign 'top' but have had no luck.

Not sure if this is a colspan/rowspan issue but Dreamweaver isn't being very helpful in the manner either. Any idea WHAT is causing this problem?

If it helps at all, here is a link to the site with a 3 pixel border added around the whole table: kabledesigns.com/pam/test/index2.html

Help is greatly greatly appreciated

Quote

As you can see (with firefox and in picture included) on the right the TD's stretch

I presume TD means the HTML tag for a table cell, or , right? Actually, the table cells on the right side of the page do not "stretch". What's causing the white space to the right is simply the fact that you have a fixed width page. So, when viewed in a browser window that's wider than your fixed-width page, you're going to see white space to right.

Apparently, you've designed the page so that it covers the whole screen width on your computer when viewing it with Safari. But, you have FAILED to recognize that visitors to your site will have a wide RANGE of screen resolutions and different monitor sizes. Here's what I see on a 19 inch monitor set at 1680 x 1050 resolution, using Internet Explorer 8:

And, of course, the same amount of white space appears on the right if I view it in Firefox, on the same monitor.

The white background in the space to the right is simply due to the fact that you have set white as page background.

Until you learn CSS and more advanced techniqes for controlling page layout, I sugggest you center the page and, if you do not want that empty space to the right, and to the left if the page is centered, then choose a color other than white or an image as page background.

To center a page which uses tables for layout, such as yours, you can put the entire page inside another table and then center that table. An example of a fixed width page where one background color appears across the entire span of the page: http://www.pigeonroostfarm.com/. An example where the overall page background and the background in the centered page body are different: http://hosanna-lutheran.org/.

Solve : Table stretching in different browsers?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment