O'Reilly logo

Adding Ajax by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Dealing with Browser-Specific Quirks

It may seem like every HTML element has predefined style settings. Headers are block-level elements, larger than paragraph text, increasing in size from h6 to h1. Each HTML list item has a default padding value. Paragraphs are block elements with specific margins and padding, fonts, and line spacing.

At first glance, these defaults appear to be relatively the same across browsers, but even minor variations can have significant impact on page design and Ajax effects. Browsers provide their own internal stylesheets that define these values, and though there are some constraints on the styling (such as paragraphs being block-level elements), other settings are based on the browser developers' interpretation of W3C-specified guidelines.

Due to these variations, the amount of spacing between letters, sizes, and so on can differ. Link colors, list icons, and relative header sizes can also differ—significantly at times. This can cause a lot of problems in the page design and can produce unexpected side effects when adding Ajax.

Controlling the Page and Adding Ajax

Many effects in Ajax, such as just-in-time (JIT) help (in-page messages that are hidden until needed), placement, color fades, collapsible elements, and so on can only work effectively across browsers when the browsers' various quirks are eliminated.

For example, Safari supports a different line height than Firefox—a quirk that doesn't impact pages containing a great deal of text, but one that can create major problems for an Ajax application that positions text in a small box for a help system. If the text ends up being too large for some browsers and too small for others, the overall system is going to look amateurish or may be hard to read.

One of the worst offenders for invalid CSS has been IE, and some of the workaround hacks have actually been given names, such as Peekaboo Bug, Border Chaos, and the Guillotine Bug; entertaining names, but they're a pain to work with.

Tip

Microsoft has made an effort in IE 7 to fix most of the browser's CSS problems; for more information see http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx. Unfortunately, the browser isn't perfect and still has quirks.

IE isn't the only browser that has quirks, though—there is no gold standard. Each browser has its own personality. Unfortunately, personality isn't necessarily a positive attribute in the browser marketplace. Perhaps if it were easy, it wouldn't be as much fun.

If the font sizes, margins, and padding differ between browsers, even by minor amounts, elements serving as containers for dynamic text, such as list items or box elements, may be too small for the text, and the result will be wrapping or truncation. You'll have far fewer of these problems if you use XHTML and comprehensive CSS stylesheets.

Taking Control

One approach to resolving cross-browser stylesheet differences is to create a custom stylesheet that optimizes each of the elements for a single browser, then add the necessary tweaks to make it look the same for the second browser (trying not to break the first), and then move on to the third, and so on. This can be a major job, especially for a site that's using sophisticated styling and relatively complex Ajax.

Another approach is to remove all style settings from the stylesheet and add in only the ones that are needed. This can be a drastic change, but it will provide you with absolute control over the page layout, thereby ensuring that Ajax effects work as expected.

If you want to change style settings for all of your web elements, you can apply global settings—it's as simple as typing the asterisk (*) character. The following code sets the margin and padding to 0, and sets the font (font-family) to Arial for all elements:

* { padding: 0; margin: 0; font-family: Arial }

It's a simple style setting, but when applied to a page, the effects are dramatic.

Of course, removing or adjusting the settings for all elements means that you have to go through and define a style setting for every element, which can get tedious. A better approach might be to adjust the settings for just those elements that tend to give you the most problems across browsers, and leave the others at the default values. You can then package these defaults into a stylesheet that will be included in all pages just before a second stylesheet that contains each page's unique settings.

One such global change you might consider is removing the underline from all hypertext links. The underline can mess up the page's look and prove distracting, especially when you have a group of items that are all underlined. Underlines can also cut off the lower part of the letters with some fonts, making the words hard to read. The following setting will remove the underline from all links:

a { text-decoration: none}

The underline can then be added back in (again using CSS) for links within specified elements, such as an element containing a great deal of text and few links. Of course, one of the problems with using this approach is that the hypertext links aren't as apparent on the page. What I do with my sites is use a font that's compatible with link underlines and keep the underlines in my main content text. In sidebars and menus, the context should be enough to highlight that the text is wrapped in a link. Since the font can be smaller, or many linked items listed one after another, I remove the underline for a cleaner, easier-to-read page.

Another major cleanup task is setting headers to use the same size, padding, and margin using syntax similar to the following:

h1, h2, h3, h4, h5, h6{ font-size:  1em; padding: 0; margin: 0 }

These are really semantic elements, providing information for search engine bots and screen readers about the outline in the page:

h1 header one
   h2 header two
      h3 header three
      h3 header three
   h2 header two

We've gotten into the habit of using these header elements for boldness and size, which is completely contrary to their purpose. By removing these elements, we're forced to use headers appropriately and use font styling where appropriate to create a visual effect. If you provide a graphical header, provide an h1 header for the content. If you don't want it showing, turn off its visibility, but don't remove it; it's necessary for search engine optimization. A good compromise is wrapping the image in an h1 element, with the exact text in the alt attribute.

Once you've removed the most obvious errors, continue creating your own default stylesheet, removing or normalizing any element that proves itself problematic across browsers.

Tip

Threr is an interesting article by Tantek Çelik about creating a default scaffolding stylesheet at http://tantek.com/log/2004/09.html#d06t2354. A follow-up by Eric Meyer is located at http://meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss.

After validating and cleaning up existing sites and applications, the next step in the process of adding Ajax is defining a plan for the type of changes you want to make to your site, including which frameworks to use and which target browsers and other user agents you need to support. To do all of this, you need to have a good understanding of your client base: your web page readers and your web application users.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required