Dreamweaver CS3: Why does my page show up distorted in firefox?

Question

After saving my page in Dreamweaver, when i preview it in Firefox, it comes out looking distorted as if all the slices were all out of place in the Dreamweaver table. But on IE it shows up fine (it also shows up fine in Dreamweaver). Someone please advise.

Answer 1

Browser compatibility has been a problem for designers since the original Netscape Communicator browser first came out in the early 90's. While today they tend to be more standards compliant (except for Microsoft, who continues to do their own thing), and while we used to code for different browsers in the earlier days of the 'net, with the variety of browsers in use by millions it's impossible to design for everyone.



Dreamweaver has always had a Browser Compatibility checker as one of its main features to deal with this problem. Essentially, you need to have the different brands and versions of browsers you wish to target installed on your system, then run the Browser Preview for each. When you see problems, run the Compatibility Checker, and it'll tell you what code you're using that is incompatible with certain browser versions.



There are several DW features that help you deal with this problem, and you need to learn to use them to get the best code output, particularly if you're modifying code generated from Word or another program:



1. Browser Preview - Set browsers/versions in the Preferences>Preview in Browser tab (Edit>Preferences)

2. Browser Compatibility Checker - Selected below the Preview in Browser function on you File menu, it can also be docked with another tool palette.

3. Clean up HTML & Clean up Word HTML - both these features are accessed from the Commands menu, and they'll get rid of any code that doesn't meet meet current standards, or in the case of Clean up Word HTML, will get rid of unnecessary Microsoft code.



Always get in the habit of doing a Browser Preview in multiple standard browsers before you deploy to your site any live file. In the past when not everyone used the 'net, it was a real pain to try and design for multiple browsers. Today, since everyone is on the 'net (or most are), the ball is in the user's court to have the updated browser program to view your site. However, since people tend to blame problems on the site and not on their browser, they'll just move on.



The best and easiest way to deal with the problem is to design for the most popular browsers in use, since most retain backward compatiblity for some time (except MS of course). By using the Browser Preview function you can see problems with code that need fixing before you deploy the file to your site then use the Compatibility feature to find and fix them.

Answer 2

Oaky, this sounds like you’re running into your first cross browser compatibility issue. Every browser will display your site differently, either very slightly or drastically extreme depending on your code and design. It sounds like you may have used Photoshop? Either way “slices” can be a problem especially with different browsers, try out safari if you can and you’ll see what I mean.



The only way I can really help you out without seeing the actual code is saying to code your site better, in a more standards compliant way, visit http://w3schools.com for help with this and consider using HTML tables or Div’s along with CSS to display your site instead.; w3schools will help with all of those.



Now another alternative is giving the person the ability to make the site look better by using external style sheets (CSS) to display the page normally and then pick a special Firefox display. This is a work around and will rely on the user to pick this new display. Check out this exact link to see and get the script and DEMO.



http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm



This is just a work around however and will require you to make one or more style sheets that proper display your site in a particular browser.

Answer 3

Just use code view and change the 1 to a 2 then save the page. View, Design & Code if you want to see it in action.