| Troubleshooting Style Sheets... |
|
|
Troubleshooting Style Sheets
Cascading style sheets are an excellent tool for controlling the design of your web site, but they are not without their problems. Browser CompatabilityThe standards for CSS (so far) have been set up in two stages, referred to as CSS 1.0 (which dealt mostly with formatting) and the later CSS 2.0 (which dealt mostly with positioning). Internet Explorer 3 supported CSS 1.0 but Netscape Navigator 3 did not. However, both Internet Explorer and Netscape Navigator supported CSS 1.0 and CSS 2.0 from version 4 onwards. Anything older than version 3 of either browser hasn't heard of CSS and will completely ignore them. A year ago I would have said that all web designers who used CSS should take great care to ensure that their pages looked at least half-reasonable in the older browsers. But today so few surfers are still using the older versions that I don't really think it is necessary. That's my personal opinion for my site - you may decide differently. A recent survey of over 700 million hits on web sites indicated that 87% were from Internet Explorer 4 or 5, 10% from Netscape 4 or 6 (there was no version 5!), and just 3% from other browsers (July 2001 - www.thecounter.com/stats/). If yours is an e-commerce site you would want to think twice about alienating 3% of potential customers. Make a judgement based on your knowledge of your target audience. Browser DifferencesTake a look at your web page in Internet Explorer, then view the same page in Netscape. Do they look identical? Probably not! The latest versions of these browsers offer full support for CSS (allegedly!) but unfortunately they tend to "interpret" style sheets in different ways. The text you are reading now (70% Verdana) looks entirely different in Netscape and Internet Explorer, Netscape displaying the text larger with different letter-spacing and line height. The tables that organise my pages just the way I want them in Internet Explorer often don't work properly in Netscape, which also exhibits a certain eccentricity when it comes to positioning images and text. Devising a style sheet that will display your pages correctly in both major browsers is a difficult task but there is a better solution. Create one style sheet for each browser. Then, instead of linking your page to a style sheet at the time of editing, you include some JavaScript in the document that is read by the browser. The JavaScript instructs the browser to apply the appropriate style sheet. This code is called a browser detection script. Using a Browser Detection ScriptPlaced in the HTML of your page between the <head> and </head> tags, the following code will determine whether the browser is Internet Explorer or Netscape. It then writes the line of code that links to the correct style sheet: <script>
<!--
var n=navigator.appName
var ns=(n=="Netscape")
var ie=(n=="Microsoft Internet Explorer")
if (ie){
document.write('<link rel="stylesheet" type="text/css" href="explorer.css">')
}
if (ns){
document.write('<link rel="stylesheet" type="text/css" href="netscape.css">')
}
//-->
</script>
In practice, this solution works reasonably well. I used it on my own site for a long time. It is less convenient than using a single stylesheet. You have to include the code on every page and the relative locations of the style sheets (explorer.css and netscape.css - substitute the names of your own style sheets) need to be correct for each page - alternatively use the full address e.g. "www.mysite.com/myfolder/explorer.css"). Another inconvenience, from the designer's point of view, is the loss of WYSIWYG editing in FrontPage. If you link a page to a style sheet in FrontPage, you see the result immediately. As you type you see the correct fonts, orientation and size of text, and all the other changes that the style sheet applies. But the browser detection script does not apply the style sheet until the page is displayed in the browser. To see how your page will look you have to switch to Preview. Not a great inconvenience I admit, but enough to make me seriously rethink my strategy. You can read my article What... No Netscape? to find out how I resolved the matter (although the title might give you a hint). NOTE: I have used browser detection to determine which "family" the browser belongs to, but JavaScript lets you detect the browser right down to version number. You can even detect the screen resolution and colour depth of the user's computer. If you want to see some examples, go to the JavaScript Source at http://javascript.internet.com and look in the User Details section. This site is an excellent source of code samples, all available for you to copy or download free of charge.
Getting the Syntax RightComputers generally do what you tell them. If your style sheet controlled page does not look the way you expected it to, then you shouldn't immediately assume that the browser has got it wrong. The browser has probably done exactly what you told it to. Most problems arise from the way that styles interact with one another. It just needs a little trial-and-error to get it right. Here's an example of a problem I encountered when I first started using style sheets. It concerns tables and how text appears in them. It involves the way that the <body> tag, the <p> paragraph tag and the <td> table cell tag relate to each other. I wanted my paragraph text to be of a specific font and size so I applied a style to the <p> tag to make the font Verdana and the size of the text 70%: p { font-family: Verdana; font-size: 70% }
Then I decided to use a table to help me arrange my text on the page... and this is where strange things started to happen. See how it took me three attempts to find a solution. Start by clicking the link below: Here's the First Attempt Don't be discouraged by problems like this. They can usually sort them out with a little experimentation. Remember that you can be inspired by the work of others. If you like the way someone has done something, take a look at their page's source code (in Internet Explorer go to View > Source to open the page in Notepad).
Check the page's code and see if they have used a style sheet. You can type its URL directly into the address bar (Internet Explorer will either display the style sheet code, or cause the style sheet to open in FrontPage or Notepad depending on your settings. Alternatively you can search the browser's cache and pick out the file from there. Look for the folder called "Temporary Internet Files". A quick way to get there from Internet Explorer is to go to Tools > Internet Options > General > Settings > View Files. Click the column heading Type to bring the CSS files together and make them easier to find...
You can open a CSS file directly from the Temporary Internet Files folder by double-clicking it. Because this is a system folder you will automatically get a warning message about opening files from here but for CCascading Style Sheets, HTML Documents, Images and Cookies it's fine. Don't try opening Script files from here though - it won't work. Check Your PagesTake a look at your web site on someone else's computer whenever you get the opportunity. Different browsers have their own way of interpreting style sheets, and there are several different versions of those browsers in common use. Pages can look different on PCs and Macs. Monitors vary a great deal in the way they display colours. If you are building an intranet, you may be able to determine exactly what your visitors are using - and if you are really lucky they'll all be the same. When you are designing for the web, you have to try and satisfy everyone! Inevitably it means some sort of compromise. With time, the web standards will be adopted more fully and uniformly and (please, oh please!) these problems will go away. If your service provider compiles visitor statistics you should be able to get a very clear idea of you typical visitor's profile. My service provider's report indicates that almost all my visitors are using Internet Explorer 4 or 5 - which isn't surprising as my site is targeted at Microsoft Office users. I build my site with that in mind.
|
| ^ top | |
|
|
FrontPage
users can even open a web page for editing in FrontPage. Look for
the edit button on the toolbar (or go to File > Edit with
Microsoft FrontPage). If the command is enabled you can open the
page in editing view (although you won't be able to save the changes
back to the web - unless you know the site's access code and
password!).
