Cross Browser Design

Hi Experts,
I have a site that i designed in Dreamweaver 8. when i test the site in IE6 the site looks fine and all the links are working fine, but when i test the site in mozilla firefox the images and text have all moved in screen and the site looks really messed up.

Some of the pages look fine while there are others that are really messed up.

It seems that it could be something simple but i am really stuck has to how to fix it as my sites look really bad.

Thanks for all your help
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hi admoortown,

Yes, it's something simples... And the problem is, the browsers act differently from one to the others... That's why every web site needs different configurations for different browsers. Something like "If IE Then..... ElseIf Netscape Then.... etc."
You shoule be able to do it with Dreamweaver, i.e., select the browser and it tells how each page works for it.


DO NOT have different configurations for different browsers.  That is the wrong way to solve this problem.

Instead you need to design your pages according to web standards with valid code.  Then it should display cross browser.

So the first step is ensure your page validates.  You can do that using a free validator like:


Once it validates we can address the next issues.
Dreamweaver 8 has a "check browser error" feature that does a fine job of locating browser-specific code errors.  It includes version-specific Firefox, IE for MS, IE for Mac, Netscape, Mozilla, Opera and Safari.  

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

I should also ask are you seperating all the presentation code from your web page using CSS?

You should definitely always be creating pages with standards compliant code but it won't guarantee that it will look the same in different browsers. The problem is that some browsers don't fully follow all the W3C web standards. IE6 is one of them but the new version (IE7) that will be released soon is supposed to be alot more standards compliant.

In any case, you will just need to just need test on each of the main browsers. If you are doing all your presentation with CSS it will make it alot easier to manage & change your layout when testing in all the browsers. You will also need to sometimes use CSS hacks to deal with the quirks found in IE6.

admoortownAuthor Commented:
im not using CSS i'm doing my layouts with tables.

there isn't a problem with my coding its just a problem with the layout of the page. e.g i have 4 pictures in a row which looks ok in IE6 but when i look at it in firefox the pictures are not beside each other in a row they are on top of each other down the page.
As some of the folks pointed out, the trick is to write HTML that would work on all browsers. It is true that different browsers interpret the layout slightly differently. For example, this code would let you have 4 pictures in a row on all major browsers:

<table border="0" cellspacing="0" cellpadding="0">
      <td><img src="image1.jpg"></td>
      <td><img src="image2.jpg"></td>
      <td><img src="image3.jpg"></td>
      <td><img src="image4.jpg"></td>
last but note least: make sure you have a DOCTYPE declaration in your html -- each browser, when confronted with the situation that there is no DOCTYPE declaration, will default it to something else: IE6 to HTML 3.2 while I think Firefox will default it to HTML 4.1 Transitional, which could lead to different layouts in the 2 browsers.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
admoortownAuthor Commented:
how and where to i put this DOCTYPE declaration??
right at the beginning of your HTML file: this will provide further reference:
admoortownAuthor Commented:
thanks all

i think that i will have to try css thats why i split the points
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.