Site not displaying properly in netscape or firefox

[shelley_w]

My site is not live yet. I designed it using IE 7.0 and the site looks like I want it to. I decided to look at it today in Netscape 8.1 and Firefox 2 and the site is really whacked out.

In Netscape, the top header file is located to the left of the rest of the page and in Firefox, the header is also to the left and the footer is to the right of the rest of the page. The other pages are even worse looking.

I've attached screen shots of the homepage in all 3 browsers. Please help.

[kobra]

I designed it using IE 7.0

My suggestion is to NEVER design with/to a non-compliant browser.
Better to use Fire Fox to design with and fix any of the "quirks" mode issues versus the other way around.

Screen shots do not help much here - post a link to it

[rainthebat]

How does it look in IE 6? If you don't have IE 6 installed on your system, you can download a standalone version from here.

I agree on trying not to design using a non-compliant browser such as IE 6 or 7, but they are the most popular browsers still, and if you find it too hard to switch to designing with Firefox at least you know that your page will display right to the larger portion of your browsers.

If you decide to start designing using Firefox (highly recommended) get the firebug and developer plugins which will allow you to examine your page in a developers "dreamworld".

The thing is, when you design using Firefox, you may notice some breaks in IE 7 at first, but continue to work through them and you'll get the page to display correctly in both browsers eventually.

OOOp, looks good in firefox, ie6, ie7 - just looked at you site: sensiblysweetnj.com/

[shelley_w]

Here's a link to the site.

http://sensiblysweetnj.com/index.php

You need to type in the index.php since I've got an index.html page as the default while I work on the site so the customer has a presence on the internet.

Thanks for your help.

[kuroi]

Hmm. Curious. The code looks like it's come from Template Monster, but this isn't a template that i recognise.

As is normal when a site appears to work OK in IE but not in FF et al, the site has structural errors and running it through a validator highlights where they are. Often just bringing the site back to being able to validate solves all the problems.

[shelley_w]

it is a tempalte monster template # 15285. I looked at the validator code and I see that a lot of BR are not opened or closed correctly. I know I did not mess with the code, I replaced CAPS text only. How should I go about correcting what the validator found wrong?

[kuroi]

It's really very worrying that even when the visual appearance is completely different, we can still recognize a Template Monster template simply from the awful code that they write.

TM's original template has a quite a few problems structural and in terms of accessiblity (unless they meant to put a black search link against a dark grey background!). I'm afraid the structural issues are normal for their Zen Cart products. The ones to concentrate on are the DIVs inside LI tags as they could cause big problems now or in the future.

However a comparison of the original template with your current situation is helpful and points to the cause of the problem. You are missing two </div> tags to close the div with classes dt and 11 and the div with class dr nested inside that. As a result everything that follows gets erroneously swept up into this latter div pushing everything out of alignment.

With these div closures back where they should be, everything jumps magically back into place. But to do that on your site, you need to know where they have been lost from, and that's something we can't answer from this end, as we don't have access to the PHP that generates your site.

Either you have accidentally removed them when you suppressed the language and currency boxes, or Template Monster when implementing this template, put them in the wrong places so that you are forced to keep those boxes on preserve the header's structural integrity (which would be extremely daft, but sadly, entirely possible).

[shelley_w]

Thanks very much Kuroi, that was the solution. I edited the header.php file and added the missing </div> and it now displays correctly in all of the browsers, IE, Netscape & Firefox.

I really appreciate everyone who helped, you are all a great resource and a very giving group of people.