Positioning not correct in FF and Chrome

Someone else designed the following site and I am trying to figure out why the positioning of certain items doesn’t look correct in major browsers other than IE.

If you look at the home page, you can see that the footer and right side of the page are incorrectly positioned: http://www.urlgone.com/a6e9eb/

Then, on all of the landing pages, the contact form on the left sidebar is messed up, there’s a large gap in the header and the footer is not correctly contained. Look at: http://www.urlgone.com/b657b4/

I realize this probably requires a number of changes, so I’d appreciate if someone could just point me in the right general direction as to what this person did wrong with positioning the items I listed above.

Thanks in advance.

I think the reason that no one has commented on this post is because of the amount of work that will go into fixing this website and bringing it up to web standards.

First, the main content of the website has been laid out using tables. This is no longer kosher, and all layouts should be designed using floating divs. Save the tables for data.

Second, all of the styling of the website has been done inline, meaning that every element on the page has been styled individually, instead of styling like elements in a style sheet, which makes it easier to change many like items at once.

I think if you try to get someone to fix this website, you might hit some road blocks. No one wants to root through that code. My suggestion would be to find the original Photoshop templates and find a coder who is willing to start this puppy from scratch with updated, valid code. Make sure you find someone who:

  1. Knows web standards and how to design/develop using those standards
  2. Knows how to work with e-commerce websites
  3. Knows the ins and outs of Search Optimization so you can get some results on Google

This will serve you much better in the long run.

Thanks for the input. I did check into it more. It seems that the incompatibility has to do with the fact that no doctype is specified and the code is not up to any current or past standard.

As of right now, completely redoing the site isn’t really an option so for the time being, I’ll continue working on fixing the tables so that they are at least compliant to some standard.

Word of advice, Dreamweaver shouldn’t be used for building websites – TEMPLATES from a decade old copy of dreamweaver from before Adobe bought out Macromedia REALLY shouldn’t be used for building websites.

It pretty much screams ancient WYSIWYG, and as such needs to be thrown out completely and started over from scratch. If that was written within the past … eight years or so, I’d suggest the site owner sue the original developer for damages.

MikesBarto is entirely correct in his assessment – salvaging that is near impossible and it needs to be pitched out completely and rewritten from scratch – there is NOTHING worth saving there.

To make a laundry list of issues:

No doctype, browsers are in quirks mode.

HTML 3.2 style coding (hence the all-caps)

Adobe/Macromedia several k of javascript doing CSS’ job.

Tables for NOTHING

spacer.gif’s doing padding’s job.

Non-semantic markup and near total lack of content thanks to the use of images INSTEAD of text…

You mix in the annoying flashtard animation, crappy little stripe fixed width layout, text color contrasts below accessibility norms, scripting for nothing menu that’s a total accessibility disaster…

Literally, it’s a perfect example of what I mean when talking about “only thing you can learn from it is how NOT to build a website!”.

To be brutally frank, throwing it away and redoing the whole thing from scratch would be FASTER than trying to save it!

Which IMHO is contradictory and impossible – since starting from a PSD is putting the cart before the horse on design and the very beginning of that wonderful road to failure… Especially with all the “but I can do it in photoshop” IDIOCY that’s out there these days. Any decent coder should be ignoring the PSD until after the HTML and layout is completed.