Taking Your Talent to the Web |
271 |
value=”Previous Reports” onClick=”window.location=’com0400d.html’;” onMouseOver=”window.status=’More of same.’; return true;” onMouseOut=”window.status=’’;return true;”>
</form>
</div>
TROUBLE IN PARADISE: CSS COMPATIBILITY
ISSUES
The first web browser to attempt to support CSS was Microsoft Internet Explorer 3.0 (1997). It supported about 30% of the standard. A year later, Netscape 4 came out with support that was marginally better than that of IE3. During three years of hell, while Netscape sought to rebuild its browser from the ground up, Navigator 4 sat rotting on the market—its once-proud CSS support looking more and more shoddy. IE4 got more of it right and was soon replaced by IE5, which got still more of it right. No browser got it absolutely right, and baffled web users were often reluctant to upgrade to incremental (4.52 anybody?) versions of these browsers.
Thus support for CSS lagged, and problems abounded. In 1998, The Web Standards Project (www.webstandards.org) was formed to advocate and shore up support for CSS and other web standards, and A List Apart
(www.alistapart.com) began running the “Fear of Style Sheets” series.
Fear of Style Sheets: CSS and Layout
One of the great strengths of CSS is its ability to position elements on a web page. Elements may be positioned by exact pixel coordinates (400 pixels from the top, 32 pixels from the left, for example). They may be positioned relative to each other. They may be positioned via percentages, permitting web designers to easily set up liquid layouts, as previously discussed.
Unfortunately, CSS positioning is not supported in IE3 and is poorly supported in Netscape Navigator 4. In fact, it can cause the browser to crash, as detailed in A List Apart’s article, “The Day The Browser Died” (www.alistapart.com/stories/died/).
272 HOW: Style Sheets for Designers: Trouble in Paradise
Figure 10.4
Web Trumps, a card game featuring well-known web personalities, uses CSS to control the positioning and layering of every image on the page and JavaScript to reveal new layers during game play. Web Trumps is a minimasterpiece of graphic design and web program- ming—but one requiring the use of a modern browser. Experiments like this help hasten the day web designers can apply the same level of sophistication to commercial designs without worrying about browser incompatibilities (http:// pixelflo.com/008/).
So until IE3 and Netscape 4 leave the market, many of us will probably keep using HTML tables to create our web layouts. Web pages laid out with HTML tables will work in Netscape 1, 2, 3, 4, and 6; in IE 2, 3, 4, 5 and beyond; and in all other graphical browsers, including Opera and iCab.
If you’ve been following along, you’ll realize this means that web designers still cannot safely separate style from content on commercial projects and will continue to face difficulties in creating sites that work well outside the traditional desktop computer-based browser. But in the trenches, where work gets done, it also means that we can create sites that work for our clients and our clients’ audiences.
By late 2001 or soon after, we should be free to truly harness the power of CSS. Meanwhile, on personal, noncommercial projects, we can explore the full potential of CSS and other web standards without fear of hurting our clients’ customers (see Figure 10.4). It is hoped that these noncommercial usages of CSS and other web standards help widen interest in emerging technologies and encourage quicker adoption of newer, more standardscompliant browsers.
Taking Your Talent to the Web |
273 |
Fear of Style Sheets: Leading and Image
Overlap
As mentioned earlier in this chapter, CSS leading provides a standard means of improving the legibility and aesthetics of textual presentations on the Web—something every site designer should care about. And it does this while avoiding all the problems associated with transparent GIF hacks and other nonstandard visual workarounds.
The CSS line-height property solves all the old problems, but it can lead to new ones, particularly in older browsers whose support for CSS is largely theoretical. For instance, in the following example, if CSS line-height is specified for the <p> tag, the image will float on top of the text in both IE3 and early versions of Navigator 4:
<p><img src=”dog.gif” width=”100” height=”100” alt=”My dog, Pookie.” title=”Pookie is a friendly mutt.” align=”left”>My dog Pookie liked this text so much, he decided to sit on it in IE3 and Navigator 4.</p>
This problem is more prevalent in Mac OS than in Windows, largely because big browser companies spend more time and resources developing browsers for Windows than for other operating systems. (All the more miraculous then, that in the year 2000 the best browser on the market was IE5/Mac. Arguably it is still the best.) The solution to image overlap is to keep images outside of paragraphs and <div> tags. Unfortunately, doing so brings up yet another problem in Netscape Navigator 4:
<img src=”dog.gif” width=”100” height=”100” alt=”My dog, Pookie.” Title=”Pookie is a friendly mutt.” align=”left”>
<p>My dog Pookie liked this text so much, he decided to shove it to the right in its own little column in Navigator 4.</p>
With a left-aligned image placed outside the <p></p>, some versions of Netscape Navigator 4 will stick all the paragraph text in an imaginary column to the right of the image, as if the web designer had desired to create such a column. New paragraphs, in turn, will appear also in that unwanted column. Many a simple layout has been ruined in this way.
There is no solution to this problem. No matter which approach is used, some Netscape 4 users are going to get an ugly layout. Because an unwanted and mindlessly stupid column is preferable to text that is hid-