Browser Support of CSS

Most designers would say that the most frustrating part of CSS is browser support. While modern browsers have excellent support for the CSS properties you've learned in this class, if you decide to use more cutting edge styles, you are going to encounter problems.

So, the first thing you should always do when working with CSS, especially CSS you might learn after this class, is to do a lot of checking in as many browsers as possible.


I like to have copies of the most recent versions of Chrome, Firefox, Safari, and Internet Explorer available to test my pages in, as well as mobile browsers like iOS and Android. I also have Opera and a few older browsers for testing as well.

If you don't have access to both a Macintosh and a Windows computer (or virtualization of one or both), then you should use a tool like BrowserCam to test your pages. The article How to Use BrowserCam to Review Your Web Site is a good start for learning how to use BrowserCam.

Solving Spacing Problems

Another problem that designers start to notice as soon as they start checking their designs in multiple browsers is that not all browsers display CSS in the same way. As older browsers like IE 8 (and older) get less and less popular, this problem is becoming less common. (And you can join us in the rejoicing!)

In order to ensure that your web page is starting from a clean slate, regardless of what browser is viewing the page, you should zero out the spacing on all elements.

Place these styles first in your style sheet.

html, body, p, div, blockquote, span, ul, ol, dl, dt, dd, li, h1, h2, h3, h4, a, img {
  margin: 0px;
  padding: 0px;
  border: none;
}

If you use other elements on your web pages, add them to the list on the first line, separated by commas.

Once you've zeroed out the styles, you can set the exact margins, padding, and borders you want for the elements. And that ensures that all browsers start with the same spacing.

Drop Caps

Drop caps are a nice way to dress up styles

The most logical way to do a drop-cap would be to use the :first-letter pseudo-element. To set a drop-cap using this, write the following CSS:

p.introduction:first-letter {
  font-size : 300%;
  font-weight : bold;
  float : left;
  width : 1em;
}

And then add the HTML:

<p class="introduction">
This paragraph has the class “introduction.” In most modern browsers, the first letter of the paragraph should be a drop cap.
</p>

Don't be Afraid to Expermiment

Style sheets give you a lot of power and flexibility in your web page designs. Experiment with the various properties and how they work in the browsers, and you'll find that your only true limit is your imagination.

Next Page: Dynamic HTML > 1, 2, 3