Reduce Browser Discrepancies With an Initial Template

Posted January 15, 2008 @ 9:39 AM, by Marc, in CSS, HTML, Quality Assurance — 0

One of the most challenging things that website designers and developers routinely encounter is inconsistency in the way web browsers render the markup they wrote. Often their design will look wonderful in a handful of browsers but terrible in another one, and when the project requires all of those browsers to render the design without any flaws, it can become a serious hurdle to overcome.

Because web browsers come from different companies—Firefox comes from the Mozilla team; Internet Explorer comes from Microsoft; Safari comes from Apple—you can bet that they’re created with different goals in mind, and as a result, your lovely code isn’t always rendered the same exact way by each of them.

Someone facing this challenge is often left searching for help or asking peers and, often, the most common example they come across involves Firefox versus Internet Explorer and why a given website looks different in one of them compared to the other. Most often a designer/developer will write their markup while testing how it renders in one of those two browsers only to find different results in the other browser. When looking 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.

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
/images/
/includes/
/scripts/
/styles/reset.css
/styles/screen-main.css
/styles/ie6.css
/styles/ie7.css
/styles/ie8.css
/Work Files/

The contents of index.php are:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="styles/screen-main.css" media="screen, print" />
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>
        <title>***Document title***</title>
        <meta name="description" content="***Document description***" />
        <!-- Enable this if the site uses a favicon
        <link rel="shortcut icon" href="favicon.ico" type="image/ico" />-->
        <!--[if IE 6]>
            <link rel="stylesheet" type="text/css" href="styles/ie6.css" media="screen, print" />
        <![endif]-->
        <!--[if IE 7]>
            <link rel="stylesheet" type="text/css" href="styles/ie7.css" media="screen, print" />
        <![endif]-->
        <!--[if IE 8]>
            <link rel="stylesheet" type="text/css" href="styles/ie8.css" media="screen, print" />
        <![endif]-->
    </head>
    <body>
        
    </body>
</html> 

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%/1.5 "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 document are meant for Internet Explorer version 6 *only* */
/* Updated 00/00/00 */ 

The contents of /styles/ie7.css are:

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

The contents of /styles/ie8.css are:

/* All styles in this document are meant for Internet Explorer version 8 *only* */
/* Updated 00/00/00 */ 

The four folders /images/, /includes/, /scripts, 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 the concept of the reset.css style sheet, and the first two lines within the one I use, goes to Mr. Eric Meyer.

What Did You Think?

Like Dislike Liking or disliking this entry is now disabled Score 1

Comments

Would you look at that; there aren’t any comments. If you’re not afraid of being first, breaking the ice, and “going where no (wo)man has gone before,” fill out the simple form below ↓

Blog entries about web design & development, our clients, our projects, our company, and more