Skip Navigation

The ENGR Template
 

CSS Cross-Browser Compatibility

One trade-off to all the benefits of CSS 2 design in the ENGR Template is browser compatibility. Older Browsers do not understand CSS and will not display them. For the most part this converts documents made with the template to "plain HTML" pages. All of the content is retained, only the layout is lost. When adding content to the template try to keep older browsers in mind.

For example, if you apply a white color to text that is on a black background make sure that both colors or are applied with CSS. This ensures that if CSS is turned off or a browser doesn't understand it the content is still readable. If the white text color is applied with a font tag and the black background comes from a CSS rule, a browser that doesn't understand CSS will still apply the white text color because it knows what a font tag is supposed to do. If this results in white text on a white or light colored background the content is harder to access.

The styles applied by the template are balanced so that if they are absent the user's default preferences should be sufficient to make content readable. The layout elements of the template's style sheet are also designed so that the page linearizes in a logical order when the style sheet is not used. Content that is linearized will appear in the non-CSS browser in the order it appears in the HTML code. Linearizing of CSS is similar to linearizing an HTML table layout, but more straight forward. The content will not be as "pretty", but it remains readable. This strategy is important for support of plain text browsers, such as Lynx or many portable devices. It is also a necessity for accessible content. Support for older browsers is still a concern, but CSS makes it easier to address this as a special case of accessibility rather than an additional hurdle to tackle.

Browser Caveats

Even with strict adherence to CSS standards it is impossible to make every browser behave in the same way. CSS layout is no more or less complicated than table layouts in this manner. The two methods share the same learning curve but each has different lessons. One clear benefit of CSS is load and display time. Virtually all browsers have faster support for complex CSS layout and use less memory than displaying a similar layout with tables. CSS is also designed to be nested, so more intricate control can be exercised without bogging the browser down. CSS code is also usually smaller than table layouts trying to achieve the same effect. This version of the ENGR Template uses tables for one layout feature that was problematic in CSS.

Below is a list of browsers that the template's style sheet was tested against and how it performed.

Mozilla 5 / Foxfire 0.8 (Windows, Mac OS X, Unix)

The template is primarily written to CSS 2 specs with Mozilla being the first test browser. There are no errors in the way this browser displays the template. Placing large tables or images in columns with insufficient width will cause odd behavior, but this is minimal in Mozilla and more of a problem in other browsers. In very small windows columns may appear "stacked" making some content unreadable. This is not usually a problem at 640x480 or higher unless there is a large image or table involved.

Internet Explorer 6 for Windows

While both IE Browsers are problematic, IE for Window's use is so prolific that several key adjustments are made to fix the template when this browser loads it. These fixes are only applied for user agents claiming to be "MSIE" for "Windows" because the Mac version does not suffer from the same bugs. These fixes mostly have to do with rounding errors. In general, these fixes make the template appear just as it would in Mozilla, though sometimes navigation elements do not get enough horizontal space and break into two lines. IE does not tend to "stack" content the way Mozilla will in small browser windows.

Internet Explorer 5 for Mac OS X

IE for Mac does not suffer the same rounding errors as the Windows versions, does but there are some minor layout glitches that are not easily fixed. Considering with the limited usage of this browser and lack of support, these minor glitches are not patched by the style sheet. The template is usable in this browser since content is pseudo-linearized.

Opera 6.0 (Windows, Mac OS X)

In some ways Opera behaves the same or better than IE, but worse in others. Some minor tweaks were made to the style sheet to accommodate. This browser does not allocate as much space for navigation items as it could causing the same line breaks as in IE. There are no serious glitches displaying the template in this browser. Like with Mozilla, in very small windows columns may appear "stacked" making some content unreadable. This is not usually a problem at 640x480 or higher unless there is a large image or table involved.

Safari 1.2 for Mac

Overall this browser behaves the same as Mozilla. Some minor tweaks were made to the style sheet to accommodate. This browser will stack content in small windows like Mozilla.

Netscape 4

This browser does not support CSS, so text is linearized. The main caveat to look out for is using logo images in the Body Title area. These appear on a white background in non-CSS browsers. Some minor tweaks were made to the HTML template to give needed white space between linearized elements.

Lynx

This browser does not support CSS, so text is linearized. The content is highly accessible in this browser with the template.