Starting line for browsers

Troubleshooting styling issues for the various browsers and their newer and older releases is one of the biggest challenges for a web developer.

The most common browsers used on the Internet are:

  • Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

The issues associated with cross-browser styling are that each browser has a set interpretation of HTML. The margins and padding and display of the various HTML elements can be slightly different. The display of fonts can vary as well as the available common fonts.

On top of the different interpretations with different HTML element, different browser versions have various levels of recognizing the newer CSS3 properties.

Using a reset.css or normalize.css style sheet

There are ways to level the playing field so that you minimize the differences between the browsers. This reduces the need for special styling for each browser.

The website HTML5 Boilerplate provides a free normalize.css style sheet that brings the HTML elements all to the same starting point.

Download the HTML5 Boilerplate normalize.css v1.1.3 here

In this style sheet, heading tags are all set to a fixed height and the margins are all set to the same value as well. Certain properties, like outline:, which one browser or two might apply, but not the others, will be set to 0. Other HTML tags like abbr, strong, dfn, mark are made to have the same appearance initially, no matter what the browser. Certain styling problems like that in older browsers for some elements are all set to one similar value.

This style sheet does not address all of the issues. It also does nothing for the browsers that do not recognize CSS3 properties, but it is a good starting point and will save you hours of coding for specific browsers.

How to use normalize.css

To use the normalize.css style sheet, you need to upload it to your site's directory structure at your hosting company. Place the file in the same folder as your other style sheet files. Add a link to the normalize.css BEFORE you link to any other style sheet.

Example:

<link href="/css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/css/customstyles.css" rel="stylesheet" type="text/css" />