• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

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
0
admoortown
Asked:
admoortown
2 Solutions
 
diasfCommented:
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.

diasf
0
 
mrichmonCommented:
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:

http://validator.w3.org/

or

http://www.htmlhelp.com/tools/validator/

Once it validates we can address the next issues.
0
 
esw074Commented:
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.  

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
EduDeveloperCommented:
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.

0
 
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.
0
 
enwhyseeCommented:
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">
   <tr>
      <td><img src="image1.jpg"></td>
      <td><img src="image2.jpg"></td>
      <td><img src="image3.jpg"></td>
      <td><img src="image4.jpg"></td>
   </tr>
</table>
0
 
liviutudorCommented:
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.
0
 
admoortownAuthor Commented:
how and where to i put this DOCTYPE declaration??
0
 
liviutudorCommented:
right at the beginning of your HTML file: this will provide further reference:
http://www.htmlhelp.com/tools/validator/doctype.html
0
 
admoortownAuthor Commented:
thanks all

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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now