Ok, I am working on a new layout for my company located at http://dev.bkriegtech.net/web/07
Displays fine on my 1680x1050 display, but on my 1280x800 laptop display, it is all messed up. Only on the initial page though, after that, everything is fine, aside from the "links" table on the bottom left.
What am I doing wrong?
(all pages are included with php include)

Hi!

Glad to hear you were testing with different resolution settings! I also noticed a difference between the website using Internet Explorer and Firefox browsers. It appears to be in even worse shape with IE. You might want to test that too.

Possibly the tables in the center of the page for "Professional Web Development" and "Reliable Web Hosting" etc. are too wide and are pushing off to the right side of the screen. That could be why the other pages are not messed up since they do not have the same tables.

You may also want to set your main table width to 850 pixels since that is the width of the widest your table should be to fit the m1.jpg image.

<div id="main">
<table align=center width="850">
<tr align=center>
<td>
<font size=4><b>Bringing You the Quality Hosting You Deserve.

Maybe try to set the table width to 100% for that center section with "Professional Web Development" and "Reliable Web Hosting" etc. Try to make the image widths smaller for wdtable.jpg and whtable.jpg and the others. Probably can't go more than 200px. Or you could put the four images in a single column with four rows, instead of two across and two down.

Our current product portfolio is comprised of: Linux Shared and Reseller Hosting Plans, SSL Certificates and Design Services. If you would like to contact one of our representatives directly, please click <a href="?page=contact">here</a> to go to our contact page.<br><br><br>
</td>
</tr>
</tbody></table>
<table align="center" width="100%">
<tbody><tr>
<td><a href="index.php?page=design">
<img src="http://www.webmaster-talk.com/images/wdtable.jpg" alt="Web Design" border="0" width="200"></a>
</td>
<td width="20">
</td>
<td><a href="index.php?page=hosting">
<img src="http://www.webmaster-talk.com/images/whtable.jpg" alt="Web Hosting" border="0" width="200"></a>
</td>
</tr>
<tr>
<td height="75">
</td>
</tr>
<tr>
<td><a href="index.php?page=reseller">
<img src="http://www.webmaster-talk.com/images/rshostingtable.jpg" alt="Reseller Hosting" border="0" width="200"></a>
</td>
<td width="20">
</td>
<td><a href="index.php?page=redesign">
<img src="http://www.webmaster-talk.com/images/rdtable.jpg" alt="Website Redesign" border="0" width="200"></a>
</td>

</tr></tbody></table>

I was viewing with 1024x768 resolution, which is what at least 50% of visitors are using. I also tried 1280x1024 and those tables were still poking out on the right side. Seems like it may be a table width problem and not a screen resolution issue.

Hope this helps!

Also, tables really should be reserved for table-like content like calendars, spreadsheets, etc -- as that is a type of content. Layout should be strictly built with DIV and CSS. This will help avoid these types of situations because you will have a deeper understanding of how widths function and nest.

This is in reply to hw15...

I tried that but it's still all out of whack. I'm seeing some code that isn't in what I already have, i.e. the tbody tag. Did you add that in there?

Well since nobody has replied I'm going to bump it. I've gotten it close but 800x600 it seems to wrap the page, and if you view it on like 1280x1024 or higher, the nav bar is really far away from the content. Can somebody please help me out? I'm stumped.

I actually figured it out, so no worries.

What?