Lately on many of the groups I belong to for both Dreamweaver & Expression Web I’ve been seeing a lot of posts by people who don’t seem to understand the very basics of HTML. Web pages use HTML- HyperText Mark-up Language to structure their web pages. The most basic of HTML elements are headings, paragraphs, lists, tables images & forms. Other html elements that are, or should be in fairly common use include address and code.
Every browser has a default presentation for each of these (and other elements not in the above list) so that if you are the web page creator has not provided any presentation there will still be an obvious structure.
To demonstrate this I’ve put together a couple of pages (I recommend right clicking on the following links to open them in a new window for viewing).
If you open the page with borders in multiple browsers you will be able to see some of the differences between browser defaults pretty clearly. For example if you view the borders page in IE 8 you will see:
Notice that the background color on the html element was set to a spring green which you see because the body element (pale yellow) uses margin to add space between it and the sides of the browser. This is the most common way of adding space but the amount of margin and padding can vary from one browser to another which may not be noticeable when viewed even side by side.
For example using SuperPreview I overlay IE 8 on Win 7 and Safari on the Mac
Next in SuperPreview I overlay IE 8 on Win 7 and Safari on the Mac you can see differences when you look at the browser side by side with borders.
On a page as simple as the ones used in this article the variations between browsers is not likely to be significant but when you start really designing a site with many graphical elements unless you understand the browser defaults and how to change them so that the display is consistent across all the major browsers your page could break quite badly. Image what a page with dropdown and a more complex layout design would look like if the elements were not in the same relative positions between one browser and another. In the following SuperPreview capture you will see a page that uses CSS to give a consistent cross browser display that is as close to pixel perfect between IE 8 & Safari 4 on the Mac as you are likely to see without any of the display differences shown in the overlay above that uses browser defaults.
You can test out the above page yourself at http://wise-clips.com/camping/index.html which will eventually be available in a more advanced tutorial on this site.
Testing Tools
While I used SuperPreview for Expression Web 4 in creating this blog post there are other alternatives available for you to test cross browser. To compare IE 6 with later versions of IE you can use the free SuperPreview for Internet Explorer but that will not get you the capability of comparing with any non-IE browser. If you have Dreamweaver CS 5 you can launch BrowserLab directly in your program as I did using Expression Web 4’s SuperPreview. If you are using an older version of Dreamweaver or some other editor you can sign up for the online version of BrowserLab
4f6832b8-80c1-4172-bec6-eeb11427a50b|0|.0