Ok part of the problem is that you have set your layout using IE, however your DOCTYPE,
[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">[/html]
is wrong it should be
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">[/html]
Because you have the doctype wrong IE runs in quirks mode and uses the broken box model of IE 5. You have adjusted your layout to work in IE using this broken box model so when you display it in a browser that uses the correct box model it looks wrong.
W3C infomation on DOCTYPEs here
http://www.w3.org/QA/2002/04/valid-dtd-list.html
However that is not the only problem, if you want you code to work in standards complient browsers then you need to write standards complient HTML, use the W3Cs validator to check this here
http://validator.w3.org/
You have over 100 errors in your page.
The mix you have of tables and CSS for layout is very very confusing I would use 1 or the other (personally I would use CSS for main layout and only use tables for what they where intended, small items of related data as in a data table).
And finally you are experiencing a "float" problem which can be eased by using the css property "clear" (see help here
http://www.w3schools.com/css/pr_class_clear.asp ) this property lets you specify that the element with it does not have any floating elements to it's left or right.
I would take these steps
- Correct your DOCTYPE
- Validate your HTML and fix all errors
- Redesign your layout making it simpler
I might do 2 and 3 the other way round.
2
