What you see is NOT what you get.

[philipjterry]

Any ideas why what I design and tweak in dreamweaver looks completely different when previewing it in google chrome? More specifically the table widths look completely different, the table position is buffered from the top of the page. Not what I am seeing in Dreamweaver...

Out of curiosity why is there a lack of consistancy in design layout for different browsers...? I see some CMS system have things called fixes for each browser, why is that so if a page has basic html should it not be recognized consistantly across all browsers?

Thanks very much.

[rocknbil]

IMO the #1 and #2 defenses against cross browser incompatibility:

Use a valid doctype [webmasterworld.com]. This avoids Quirks mode (which is most often the direct answer to your question.)

Validate your pages [validator.w3.org]. Get a green light here (or, reduce the warnings and errors to items that do not affect layout, like "target") and most of your problems will go away.

Not all, but most, and the remaining issues will likely be minor. Those little "fixes" you see in code for this browser or that browser? (OK. let's not dice it here, they are almost ALWAYS fixes for IE.) Those are, basically, duct tape fixes because the developers don't want to take the time to understand the previous two concepts, or discount them as unnecessary. What I found out is by sticking to those two things, it actually makes the entire process easier and more reliable.

A small bit of advice that will make life easier, don't use an XHTML doctype unless you **really** need XHTML features. It doesn't make better pages, it's not superior, if you're outputting HTML, use an HTML doctype.

[g1smd]

Yes. 100% agree.

What surprises me, in 2011, is that there are still some people who would argue to not bother with at least one of those recommendations.

[philipjterry]

Thanks a lot - this guide is worded as though I already know what "doctype" is - as a simpleton my understanding of doctype is .htm or .html or .xls...?

Are there many different types of .html ?

[rocknbil]

my understanding of doctype is .htm or .html or .xls...?

You're confusing doctype, which is the document type declaration for browsing devices, with file type/extension. Files have little or nothing to do with doctype. For example, a PHP script (.php) will output a document dynamically. Even though it's file type is .php, the output it sends to the browser can be an XHTML, HTML, or XML doctype (and others too . . . )

The doctype "tells" the browser what mode to render the code in. With a "half doctype" or no doctype (as described by the previous links,) browsers will render in Quirks Mode as opposed to Standards Compliance Mode.

What this means to you as a developer is that some of your CSS rules will fail, or will act differently, the end result being browser differentiation. The first that comes to mind is color assignments; in Quirks Mode f5f5f5 will render as a gray, but it will fail in Standards Compliance Mode because it must be declared with the pound: #f5f5f5. Multiply this by 1000 for all the little quirks (pun intended) with floated objects and box model differences. Standards Compliance mode says "here is how the browser should render, following these rules."

Standards Compliance Mode makes a lot of this stuff go away. It may mean a little learning and figuring out why this or that won't validate, but once you get past it it becomes easier, and wind up saving so much time dealing with silly browser fixes. The one that still stands as odd man out is IE5, and thankfully that nightmare is fading.

You can see the rendering mode of any site, any time; in FireFox, locate some background area, right-click and select Page Info from the context menu.

Most of us output pages that are HTML. Standard, straightforward, HTML - XHTML was really intended to be a cross between XML and HTML, and has a whole different application, the foremost of which is the ability to extend the base HTML element set; create your own document definition to apply tags that give the content context. ( see post #3658661 here [webmasterworld.com].) When it was first drafted it was thought it would be "the next big thing" but largely it failed . . . and with HTML 5 emerging, it's a sure thing that HTML doctypes are here to stay.

Why not use XHTML? There are many reasons, but many of the things you would normally do are not supported in XHTML - for example, the target attribute for new windows. "bare" elements are not supported, even hidden fields in forms must have a container of some sort. My personal reasoning is that if my document is HTML, I want to TELL the browser it's HTML.

[g1smd]

The DOCTYPE is the first line of the document.

It specifies whether what follows is HTML 3.2, 4.01 or 5 or is XHTML 1.0 or 1.1.

You'll likely want HTML 4.01 or 5.

[jalarie]

rocknbil gave lots of very good information but did not specifically tell you what to do. Try putting the following line at the beginning of your page, BEFORE the html tag, and see what it does:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

The above may not be the best choice for you, but it's a place to start.

[Demaestro]

Even with valid doc types and valid html structure Dreamweaver's preview window fails at rendering HTML and CSS well.

Use F12 to preview in a browser. You can use the settings to add browsers to preview in, like Chrome.

With IE9, FF4 and Chrome all moving to an HTML5, CSS3 and dreamweaver not catching up this will get worse before it gets better. Use preview as a loose guide to what the pages will look like. Do not use it as a guide to how pages will render in real browsers.

[rocknbil]

did not specifically tell you what to do.

Because the link I provided [webmasterworld.com] tells it far better.

Understanding the problem is a far greater lesson than just nicking code that one may or may not understand and dropping it into a web site. IMO that's what's wrong with the development of the Internet, too many people doing things they don't understand until it's too late. :-P

Formally your doctype should go all on one line, some internal validators will kick an error if you don't.

[jalarie]

Sorry, rcknbil, I didn't mean to offend. Your answer was much more informative.

I agree with your opinion of what's wrong with the development of the Internet, too. People need to understand why things work the way they do.

What internal validators give an error for a doctype on two lines?

[rocknbil]

Nah not offended, just clarifying . . . I use Homesite (which was killed when Adobe bought Macromedia) and it has internal (X)HTML validators that will sometimes pick up stuff W3C doesn't (and vice versa.) It's particularly choosy about breaking quoted text (as in attributes, not literal text) on multiple lines as well as the doctype.

I think I'm going to hire out someone from Elance to build an HTML5 validation library for it, that's about all it really needs.

[philipjterry]

I think I need to start expanding my vocabulary so I can understand words like "standards compliance mode"

The trouble I have is running a company time is scarce so I have to strike a balance on how deep I go and what short cuts I should take....

Thanks a lot - I am sitting at the dinner table digesting this information aswell as my food

[tedster]

so I can understand words like "standards compliance mode"

Here's a good start:
Quirks Mode vs. Standards Mode - overview [webmasterworld.com]

[rahulparekh]

Using Dreamweaver's WYSIWYG editor is not recommended at all. Write the code yourself for cross-browser consistency. A well written clean code will be consistent across all browser (maybe, except IEs which are messed up).

[peten]

Write the code yourself for cross-browser consistency

Can't argue with that one at all