CSS Positioning


Anybody who has worked with Cascading Style Sheets (CSS) quickly learns that they are a very powerful tool for adding presentation to web pages. Cascading Style Sheets change the fonts and colors in HTML documents easily, a feature that any good webmaster will now employ. The specification for CSS also allows for elements to be positioned on the page so that CSS can do layout with the same advantages as font and color.

Sadly, not all browsers support CSS positioning yet. Luckily, browsers that don’t know about CSS positioning should render the pages such that they look like they were written with older versions of HTML (say HTML 2.0). However, some browsers are broken. They try to support CSS positioning but they mis-render it or crash. Modern browsers such as Internet Explorer 5.x, Internet Explorer 6.x, Netscape 6.x, Mozilla, and Konquerer, all do a passable job with CSS positioning. Browsers older than Netscape 4 and Internet Explorer 4 do not know about CSS positioning and will render such pages legibly. Netscape 4 and Internet Explorer 4 are broken browsers. Broken browsers are much worse than browsers that don’t support CSS. Broken browsers may display elements on top of each other, making them unreadable. Broken browsers may render elements out of order. Broken browsers may crash and take down the operating system with them. Sadly, many surfers still use Netscape 4.x browsers. In many of these instances they may not have the computer power required for newer browsers or they may not know how to update. It is one thing if a surfer using an older browser doesn’t see your page with all the bells and whistles. It is entirely another thing if your web page is not usable.

This essay will not tell you how to use CSS positioning. There are many very good CSS tutorials available if you are looking for them. This essay will explore a technique for hiding style sheets from browser which would break or crash if they were to try to display the CSS.

A style sheet is usually linked from an HTML document with a tag. The trick that can be employed is to hide this tag from certain browsers. The first step will be to determine which problem browsers people who look at your web site actually use. The second step will be to determine which of those browsers have problems. The third step will be to to hide the style sheet from these browsers.

To find out what browsers people who visit your site are using you will need to look at your web logs. Every time a page is fetched, the browser sends a browser identification string. This is usually recorded in the server logs. Most statistic packages pull this information out of the logs and total it up for you.

Once you know what people are using, its best to try each of the browsers to see which ones have problems. Versions 3 and 4 of Internet Explorer and Netscape are very likely to choke on CSS positioning. Download these browsers and try them out on your pages.

It is easy to figure out which browser is viewing your site using JavaScript. Old versions of Netscape Navigator (version 4 and earlier) have problems on my site, so I disable style sheet for them.

<script language="JavaScript" type="text/javascript">
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_nav  = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('msie')==-1) &&
  (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && 
  (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1) && 
  (agt.indexOf('hotjava')==-1));
var styleok=(!(is_nav && (is_major <= 4)));
</script>

When the browsers that can render the CSS on your site properly are known and the ones that do not render the CSS on your site properly is known, it is a simple matter of preventing the CSS from being used by the broken browsers. A little bit of JavaScript that comments out the style sheet link to the page will do the trick for browsers that don’t support the style sheets.

<script language="JavaScript" type="text/javascript">
if (!styleok){
  document.write("<" + "!" + "-" + "-");
}
</script>
<link rel="stylesheet" media="screen" title="Web View" href="style.css" type="text/css">
<script language="JavaScript" type="text/javascript">
if (!styleok){
  document.write("-" + "-" + ">");
}
</script>

This technique could fail for browsers that do not have JavaScript enabled but will not render the page properly with style sheets. It will also fail for browsers that are faking their user agent string. Because some sites totally block access all but “approved” browsers, other browsers may pretend to be the most popular or most widely accepted browser. To combat this, some browsers pretend to be one of the accepted browsers. In any case, new browsers will likely support your style sheets. Old browsers which don’t are not likely to have such advanced features.

There are other techniques that will use browser bugs in Netscape to just prevent that browser from using the style sheets. This technique is more flexible, allowing the webmaster to prevent a variety of browsers from using the style sheets.

Leave a comment

Your email address will not be published. Required fields are marked *