MarcAmos.com

One of the biggest challenges that website designers and developers face is the nearly limitless amount of ways their design/layout can break in many of today’s web browsers. More often than not the design will look wonderful in a handful of browsers but terrible in another, and when the project requires all of those browsers to render the design without any flaws, it can become a real nightmare to figure out why one of them isn’t rendering the design in the same way as the others.

Because most web browsers come from different companies—Firefox comes from the Mozilla team; Internet Explorer comes from Microsoft; Safari comes from Apple—you can be sure that they’re created quite differently, and as a result, your lovely code isn’t rendered the same way from one browser to the next.

If you find yourself asking others for help, especially if you search Google or any popular web design and development forums, one of the most common questions you will come across involves Firefox versus Internet Explorer and the way in which a site looks different in one of these browsers compared to the other. Most often a designer/developer will write their markup while testing the results in one of those two browsers only to find different results when testing in the other browser. When searching for a solution the advice often given is either CSS hacks, conditional comments, a combination of the two, or something entirely different and potentially terrible.

If the markup is already written and I am asked how to fix the discrepancies, I often suggest that the designer/developer tweak the markup so it looks as it should in a browser such as Firefox and/or Safari first, then use conditional comments to adjust its appearance in the different versions of Internet Explorer. If I am able to give advice before the markup is written I always tell people about my initial site template and offer it to them for use in their project.

My initial site template is a small collection of files and folders that I use at the onset of every project that helps establish a very solid foundation upon which the rest of the markup can be written. The core of my initial site template is Mr. Eric Meyer’s reset.css. It serves as the starting point for a solid foundation that helps to reduce the discrepancies found amongst browsers. After using Mr. Meyer’s reset.css, I add CSS selectors, properties, and values that are needed to give common elements such as paragraphs, lists, and anchors the presentation they need to look natural in a web page.

I also use a well-known JavaScript file, written by Mr. Bob Osola, that enables PNG transparency support in older versions of Internet Explorer, two empty style sheets that serve particular versions of Internet Explorer (versions 6 and 7), and three empty folders for images, includes, and work files (files used for production which will not be uploaded—PSDs, Word documents, etc.). The index.php file contains a XHTML strict DOCTYPE, a bit of code that tells Internet Explorer not to resize images, and a few more small helpful pieces. The file extension doesn’t need to remain .php, simply change it to .html, .aspx, or anything else that your project needs and begin coding.

You can download the template in a zip file for immediate use or read on for previews of the files and folders contained within.

The structure and content of the template is:

• /index.php
• /styles/reset.css
• /styles/screen-main.css
• /styles/ie6.css
• /styles/ie7.css
• /scripts/pngfix.js
• /images/
• /includes/
• /Work Files/

The contents of index.php are:

The contents of /styles/reset.css are:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent;}

body {
	font: 62.5%/1em "Lucida Grande", Arial, Helvetica, sans-serif;
	color: #000; background-color: #fff;
}

/*====================
Link Styles
======================*/
a:link, a:visited {color:blue; text-decoration:underline;}
a:focus, a:hover, a:active {color:red;}

/*====================
Heading Styles
======================*/
h1 {font-size:1.8em; margin:1em 0;}
h2 {font-size:1.6em; margin:1em 0;}
h3 {font-size:1.4em; margin:1em 0;}
h4 {font-size:1.2em; margin:1em 0;}
h5 {font-size:1em; margin:1em 0;}

/*====================
List Styles
======================*/
dl, ol, ul {margin:1em 0;}
ol, ul {padding:0 0 0 2em;}
li, dd {margin:.25em 0;}
dt {font-weight:bold;}

/*====================
Table Styles
======================*/
table {border-collapse:collapse; border-spacing:0;}
th {font-weight:bold;}
td, th {padding:.3em .5em; text-align:left;}

/*====================
General Styles
======================*/
img {border:0;}
p {margin:1em 0;}
hr {display:none;}
legend {padding:0 .5em;}
blockquote {padding-left:2em;}
em, ins, del {font-style:italic;}
del {text-decoration: line-through;}
fieldset {padding:0 1em; border:1px solid #666;}
abbr, acronym, dfn {cursor:help; border-bottom:1px dotted #ddd;}
code, kbd, pre {font-family:Courier, "Courier New", Tahoma, sans-serif;}

The contents of /styles/screen-main.css are:

/* Import the style sheet that resets all browsers. */
@import url("reset.css");
/* Updated 00/00/00 */

The contents of /styles/ie6.css are:

/* All styles in this sheet are meant for Internet Explorer, all versions up to and including 6, *only* */
/* Updated 00/00/00 */

The contents of /styles/ie7.css are:

/* All styles in this sheet are meant for Internet Explorer version 7 *only* */
/* Updated 00/00/00 */

The contents of /scripts/pngfix.js are:

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

The three folders /images/, /includes/, and /Work Files/ are empty and await your project-specific files.

I’ve used this template on numerous websites and have found it to be the best combination of files, folders, and code that I can pre-package for use at the onset of every project. I don’t claim that this is the solution to end all of your browser discrepancy woes. Its purpose is to help you squash many of the bugs that commonly occur and I can promise you it does just that. For any browser discrepancies that still rear their ugly head after using the above initial site template, I can only refer you to a couple of my favorite web design and development forums, or our good friend Google, for further assistance.

Credit for most of the reset.css style sheet goes to Mr. Eric Meyer. Credit for the JavaScript file that enabled PNG transparency support in older versions of Internet Explorer goes to Mr. Bob Osola.