Browser conflicts and frustrations

HyperText Markup Language (HTML) is notorious for being different in different browsers. Style sheets separate content from style, and were supposed to bring some standardization to the graphic design of the World Wide Web. Cascading Style Sheets (CSS) are headed into their third version, and no standard style exists. There are browser compatibility issues with many elements of CSS. One implication is simple: to assure that content viewed on screen matches printed output, the Portable Document Format (PDF) is still the best way to go. However, CSS quite nicely does include many desirable elements with a lot less overhead than PDF files.

In creating this project, I often encountered browser bugs. For example, the postage stamp effect was easy to do in one browser, but cannot be done in both through CSS because they use the same border rule.

IE6 Postage stamp border code

background-color: #990000;
border: 1px dashed #990000;

The border matches the element

Firefox postage stamp border code

background-color: #990000;
border: 1px dashed #000000;

The border matches the page background

I tried several times to get IE6 to handle the bottom margin of the page. I finally added an extra <div> as a spacer. Firefox was OK with just setting a margin. IE6 would not allow page margins to be set, the bottom divs were always flush with the browser edge. Adding an additional empty <div> of the background color allowed an apparent margin.

For some reason, sizing the columns to be equal is a common issue. I find my workaround to be not too hard, I just set the "top" value and "height" as identical, and set the overflow to "auto". This can lead to a lot of unused white space, or overflow; stylistically it seems just fine on these pages. I think other web developers were looking for making the length of the actual content always equal.

For the Venn diagram, I took advantage of rolling the text 90 degress to make the text landscape in the print preview. This "trick" only works in IE6, it is Microsoft's way of handling Far Eastern text. The printed Venn diagram in FireFox has not been fixed, though I researched several methods, including a page rule ("@page; size: landscape") but nothing seemed to work in Firefox. The screen layout in both browsers seems fine, but only the IE6 will print properly.

I was able to do a trick on the Venn diagram which made life easier. By specifying an alternative stylesheet for printing, I could then hide or display either image of the Venn Diagram, which were simply the same image offset by 90 degrees. There is no actual way to rotate an image in CSS.