Welcome to the new How To Gurus Blog

Where you can always find my latest Demos and YouTube Videos. You will find samples taken from my Training DVDs and also exclusive videos created specifically for my online audience.

Friday, April 7, 2006

I just finished a page and in Internet Explorer...looks great...then I check Firefox and Netscape...and everything is all over the place..

You hit on the biggest problem on the internet, different browsers see things differently. But here are a few hints to keep things consistent.

Only use simple fonts (Ariel, times new roman, etc.) Dreamweaver comes with only 6 fonts as standard, stick with those.

Don't us layers. Netscape has a real problem with layers (specifically the div tag).

Keep styling of fonts to a minimum and use CSS. If you need a fancy headline or other font use, better to do it as a graphic.

Make sure that your graphics are created at the correct size for where they are placed. Don't resize graphics in Dreamweaver, do your resizing in Photoshop then put them on your web page. Some browsers will not see the Dreamweaver resize and will show the graphic at its original size. So make the original size correct. You should be doing this anyway.

The reference files in Dreamweaver have good information on which browsers support what. If you are using Dreawmweaver 8 look in the Window menu and click on Reference. Dreamweaver MX and MX 2004 have reference in the panels on the left.

Basically Netscape and Firefox use a different interpretation of HTML than IE uses. So you will see problems, especially with Layers and JavaScript. Netscape and Firefox also interpret CSS differently, especially with font styling.

So, bottom line, keep it simple. Use only simple fonts. Don't use layers for anything important, or for layout (I always use tables). Do all your fancy stuff with images. Or if you want a perfectly controlled web site that views identically in all browsers build the whole thing in Flash (but you will lose your search engine compatibility)

And don't forget that all of the browsers let the user customize how they work, including how they handle fonts. So even with your best efforts there will be people who will see your page layout differently than you designed it.

It is possible to use a JavaScript to see what type of browser is being used to view the page and then have the viewer forwarded to a page built for that browser. But in my opinion that is really doing things the hard way.