Relative Positioning Problems

To make a page look relatively the same at all screen resolutions, we need to use relative positioning. This poses several problems as IE and Netscape use different points of reference when calculating relative values.Look at this page in both IE and Netscape. You'll notice a big difference between the right margins. In this sample, the content is placed in its own <div> called "box3". I did this to eliminate the whitespace above the text seen in our previous example. It pulls the text to the top of the screen in both browsers, but causes left/right margin problems of its own.

This is due to how Netscape and IE calculate "relative" values when positioning <div>s. IE calculates relative positioning from the edge of the screen. Netscape calculates the positioning relative to the floated <div> to the right. There aren't any easy answers to this problem.

Using different points to calculate relative positioning makes it difficult to code one style that will render the same in both browsers. Below are some of the workarounds available.

Some Quickies

Here are some of the quick workarounds that can make pages look good in all browsers. First off remember that there are two ways to make whitespace besides using CSS-P: margins and padding. Both are supported by IE and Netscape.

In our early examples, we used margins to space our content away from our <div> boxes. Padding works similiarly inside <div>s as well as margins. Don't forget that margins and padding work vertically ("margin-top:") as well as horizontally.

Using Absolute Positioning

Another solution to the positioning problem is to put everything in a <div> boxes and position them absolutely on the screen. Just give up on trying to make the page look perfect at all resolutions. High-res monitors will have some blank space and lo-res monitors will require some side-scrolling.

This isn't really a solution, but it's one of the better ideas out there. Absolutely sized pages solve a world of cross-browser and multiple resolution issues that we'll be coming across more and more as we progress in CSS-P.

In pure CSS-P absolute positioning means that the "top:", "left:", and "width:" properties are always coded with absolute pixel values as opposed to percentages.

Using A Layout Table

You can get the best of both worlds in both browsers by making an overall layout table, that both browsers will render appropriately. Then, put your <div>s in the appropriate table cells. You might choose to use tabular formatting altogether.

The biggest advantage of <div> boxes over <table>s is that <div> boxes can be easily accessed with JavaScript to make all sorts of dynamic effects. Tables are far more limited here.

So, why not consider getting the best of both worlds by letting a table define the relative layout and <div>s inside the table's cells will hold the content. That way the content can be made dynamic with JavaScript. As you learn JavaScript, you'll see why you don't want to give up on its neat effects.

Separate Stylesheets

An increasingly popular method of dealing with CSS/cross-browser problems is to code a separate stylesheet for each browser. This usually means one for IE and one for everyone else.

As you'll learn in studying JavaScript, you can detect which browser the viewer is using and direct it to the appropriate .css file. This solution has the advantage of being lean (only one extra sylesheet in most cases) and effective. It also makes it easier to update your style as new support and browsers come along.

Nested <div>s

Nesting <div> boxes inside one another can also save the day with cross-browser CSS-P. A parent <div> box can be used to position any number of child boxes. We'll be studying this in the next series of lessons.

Summary & Exercises

There is a world of cross-browser compatibility issues and most of them center around CSS support. Currently IE holds the lead, but Netscape 6+ is catching up. Not only are there issues of basic support, but more frequent issues of the way the support is rendered.

These differences between browsers has held back CSS-P, but the sleeker, simpler, more precise CSS-P will eventually prevail. It's important to understand and practice CSS-P even if your pages use tabular formatting. It's the future of page layout.

There are countless workarounds for cross-browser problems. Most of these problems relate to positioning <div>s. The three most popular workarounds involve absolutely sizing and positioning your boxes, putting your boxes in a good ol' reliable layout table, and coding separate stylesheets for IE and Netscape and using JavaScript to point the viewer to the appropriate stylesheet.

Oh, and don't forget that most page layouts rarely use more than a couple of columns in addition to the main content. Both IE and Netscape do a good job of rendering this simple scheme as we've already seen.

For practice, use different methods to make our current practice page look the same in both browsers. Try using various margins and padding for the <div>s and content. Try tables and you'll see why putting <div>s in table cells is so popular. Make separate stylesheets for Netscape and IE. Don't worry about JavaScript browser detection yet. Just make the different stylings paying attention to the differences and problems points.

To Next Advanced CSS Lesson

Back To Advanced CSS Index