Cross Browser Design

Posted on 2006-03-22
Last Modified: 2013-11-19
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
Question by:admoortown
    LVL 4

    Expert Comment

    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.

    LVL 35

    Expert Comment

    NO NO NO.

    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.
    LVL 8

    Expert Comment

    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.  

    LVL 5

    Assisted Solution

    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.


    Author Comment

    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.
    LVL 6

    Expert Comment

    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>
    LVL 6

    Accepted Solution

    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.

    Author Comment

    how and where to i put this DOCTYPE declaration??
    LVL 6

    Expert Comment

    right at the beginning of your HTML file: this will provide further reference:

    Author Comment

    thanks all

    i think that i will have to try css thats why i split the points

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Suggested Solutions

    When pages do not download correctly, and you don't know why, the first thing you do is to look at the HTML source code of that page, but not all the downloaded files appear always clearly. If your source includes a javascript that computes the name…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
    This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now