6 Steps to Create a Cross-Browser Friendly Web Page
UPDATE: the CSS menu example has been tweaked for better performance in IE 7...
Building a cross-browser friendly web page is still as challenging as it was right after the millennium release of IE6 in 2001 and while Microsoft FrontPage was still in its heyday creating web pages without Document Type Definitions (DTD).
So here is a quick tutorial and checklist on how to create a web page that will be standards compliant for at least the next few years:
(1) Use a strict DocType and compliant HTML and CSS. O.K.-- our work here is done, adios! Well, maybe not. Here is the DocType we use and the basic <head> setup we use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross-Browser Web Page</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta content="all" name="robots" />
<meta name="description" content="164 characters of keyword loaded descriptive text goes here" />
<meta name="keywords" content="keywords go here -- but they are not used by most search engines" />
<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="screen" />
</head>
(2) Create a CSS reset for your external styles sheets--you should have two stylesheets--one for screen and one for print. The one for print might use fixed fonts in pixels and restrict the width of the printed area to around 620 pixels so it will print correctly on the widest range of printers. The use of "page breaks" will allow control of where one page ends and another begins when printing and "no print" will allow you to hide images or buttons or specific blocks of text when printing.
.pagebreak {page-break-before: always;}
.noprint {display: none;}
The CSS reset comes in many flavors but we use this in the separate stylesheet:
@charset "utf-8";
/* CSS Document */
/* Begin RESETS css */
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
textarea {
margin: 0; padding: 0;
}
/* End RESETS css */
The CSS reset simply creates a Tabula Rasa - a blank page or canvas - ready for your CSS to be applied. The reset is placed at the start of your stylesheet.
(3) Use common fonts. Until other font-rendering techniques like CUFON become more mainstream stick to the basic font families:
font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times New Roman, Times, serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
Don't use light text on a dark background...it isn't cool...it's just hard to read. Don't use Lucida Sans at all because it renders very poorly. And be aware of usability issues. Setting font sizes in pixels will not allow fonts to resize for your sight-impaired users. The best solution is to specify font size as 100% in the body element and then use em's for the rest of the fonts and line heights in the stylesheet. Default font size is 16px but 12px is the size that is most comfortable for users. Here is a nice trick (with caveat) to equate font size in pixels with font size in em's:
<style type="text/css">
<!--
body {
font-size: 62.5%;
line-height: 1.5em;
}
h1 {
font-size: 1.8em; /* same as 18px */
font-weight:800;
}
p {
font-size: 1.2em; /* same as 12px */
}
-->
</style>
The only issue with this technique is if IE users select text size "smallest" from their tool bar. This will cause the text to render to an unreadable tiny size. But most folks want bigger fonts -- not smaller.
(4) Don't use CSS3 selectors. Not yet. There are even some CSS2 child and sibling selectors that won't work in older browsers.
(5) Create your images the correct size for your page. Re-sizing images using CSS or by changing the width/height in the html will make the images look ragged and blocky at the edges. Use one of the many free photo editing programs like GIMP or PIXIA or even Adobe Photoshop Express, a free on-line editing and storage (2GB Free) tool. IE6 does not support PNG alpha transparency. No matter how much you try you cannot create a repeating transparent background image. To support IE6 you can use the AlphaImageLoader method in your IE6-specific stylesheet and apply the class="transparent" style to any PNG that has transparency. You will have to create a 1x1 transparent PNG and link it in the "scr" of the Alpha ImageLoader attribute of the transparent style like this:
.transparent {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/transparent.png', sizingMethod='image/scale/crop');
}
(6) Use CSS for your layout. Tables are for tabular data, not layout. Any example that I can take apart and put back together works best for me. So I have posted a fully coded page (link below) for you to use as your sandbox. Some optional recommendations not used in the example are display:inline and overflow:hidden when you have two <divs> that are both floated left and share a margin. This should prevent a long text string from breaking the layout but I hate to offer this as a blanket fix since in complicated layouts the text won't wrap but will simply be hidden.
Finally, we have provided an example with a sample form and a CSS fly-out menu that uses a tiny javascript but still degrades gracefully in users with javascript turned off. It is a best practice to move the CSS code into a separate stylesheet and the javascript into a separate .js file if you want to use the example code as your own. You can view the code here.
Happy Coding!
Comments
1. This CSS is stuff is interesting..I hope to be able to grasp it sometime. Thanks for your help with my question!by Anonymous
by samJ
The CSS validates CSS Level 2 for IE8 ( http://tinyurl.com/qaasc2 ) with the exception of a warning on the redifinition of width for the nav menu style on line 339: ".wrapper #sidebar1 #nav li a".
This is due to a CSS hack for Mac's that can be taken out.
by TexasWebDevelopers
by samJ
by TexasWebDevelopers