Multiple Browser Issue

Hi there,

I am working on a navigator for a site that's still in the beginning stage. When I preview the index page(http://temp2692.smartetailing.com/) in Firefox, the navigator looks the way I want it to. But, when I preview it in Safari, Explorer, and Chrome, the page displays some extra content around the navigator. I am sure this is a CSS issue, but I can't seem to find the piece of code that is causing this problem.

Any help offered would be terribly appreciated.
Paul

P.S. Please let me know if there is any additional information I could provide which would help in the problem solving process.

So I've just checked the page in Firefox, Chrome and Internet Explorer (7-9). Other than some slightly different positioning and widths (only a matter of a few pixels and occurs in general due to different rendering engines), everything seemed to the the same. IE7 and 8 had a few issues with sub-menus in your dropdown but other than that everything seemed just as functional as well.

Perhaps you could show a screenshot or two of what you are seeing in Firefox and other browsers.

Good Idea, here's the link for the image(http://temp2692.smartetailing.com/me...av_problem.png).

I actually looked into a little further, and the problem only appears when I view the page on my 13" MacBook Pro. When I preview it on my Desktop PC, it looks fine.
Any ideas on why it would be looking different on my mac? I know the pixel ratio is different, so I guess it may just be a resizing issue.
Let me know what you think.

All browsers (except compliant ones) like to place their own value for every element for padding, margin, border.

Using the following code as the FIRST line of your CSS resolves this issue:

* {border:0; padding:0; margin:0;} /* Set everything to "zero" */

At any rate, it strips the superfluous extra pixel or two that IE adds, making everything look the same in all browsers.