Categories
Web

LoudCloud

Recovered from the Wayback Machine.

When I first moved to California this year, someone who used to work at Netscape — and who I admire and respect — talked with me about working at Loudcloud, Marc Andressen’s newest venture. Two things stopped me from pursuing the job. First, the personnel person was a jerk. Second, after rolling off the failed Skyfish.com collapse, I didn’t have the energy to get into another startup.

Loudcloud went IPO this year — the results of which are detailed in this ABC News online year in review. Check out the IPO section.

Categories
Web

Bay area layoffs

Recovered from the Wayback Machine.

SF Gate, one of my favorite daily reads (must add them to my list) had a week long series of articles on the past year from a San Francisco business perspective, including layoffs, dot-com failures, real estate hitting the skids in San Francisco and so on. It’s an excellent review — read the first entry “Bay Area Layoffs”.

As bad as it seems at times, only about 10% of existing dot coms have failed. I read that statistic somewhere this week and now can’t find the reference.

Doc Searls pointed out this Fortune list of dot coms that died this year. Look under S and you’ll see my old company — Skyfish.com.

Categories
Web

Seven wonders of the web world

Recovered from the Wayback Machine.

Hey, Blogger was listed as one of the seven wonders of the Web world, along with Amazon, Google, eBay, Yahoo, Project Gutenberg, and Multimap. I’m not into online auctions, and I’ve never heard of Multimap, but I’m a big user of Google, I use Blogger for this weblog (at this time), and I subscribe to several Yahoo groups. And I buy at Amazon (though I’ve been going to B & N lately).

Congrats Blogger!

Categories
Web Writing

Dynamic Web Publishing Unleashed: Chapter 37 – the Future of Web Publishing

Recovered from the Wayback Machine.

IN THIS CHAPTER

  • The Chaos of Change
  • The Current Technology Platform
  • A Summary Review of the Technologies Covered in the Book–Where Will They Be in a Year?
  • Client Scripting and CSS1 Positioning

With an industry that seems to go through a new revolutionary change at least four times a year, it’s hard to predict where Web publishing will be in four months, much less the next couple of years. However, taking a look at existing technologies and their state and at some new technologies can give us a peek through the door to the future, even though the crack we are peeking through might be pretty small.

First, many of the technologies covered in this book existed two years ago and will continue to be around two years from now. That means Java, which was introduced in 1995, HTML, the scripting techniques, and the basic Web page, which will continue to consist mainly of text and an occasional image. It’s hard to say if some new and incredibly different Web page development technique or tool will appear in the next two years, but regardless, people will also continue to use what is available now. In fact, the technologies introduced this year, such as Dynamic HTML and CSS1, will begin to become more familiar in 1998, and only begin to become mainstream technology in mid- to late 1998.

Web servers don’t seem to increase in technical capability exponentially the way Web page technology does. The real key to server technology is fast, reliable, and secure Web content access. The servers will become faster, hopefully more reliable, and the security should grow to meet the increasing demands placed on these servers to support commercial transactions. Additionally, there are new methods–particularly in the realm of commerce–that will work with existing server technology. Those are discussed in this chapter.

There are new technologies that have barely begun being explored this year. Channels and push technology started out with a bang and nearly ended with a whimper. Web consumers just didn’t buy into the new technology. However, with the built-in channel capability Netscape Navigator and Microsoft’s Internet Explorer have now, and with simpler channel development processes, channels can be considered down, but not out.

The real key to the future rests with standards as much as with implementation. The Document Object Model (DOM) working group of the W3C should present a first working draft of DOM by the end of 1997. DOM covers which HTML elements are exposed, and to an extent, in what way these same elements are exposed, what standard properties and events are, and how these elements relate to each other. If HTML doesn’t meet your needs, just wait–XML describes how to extend any markup language, to create an element such as <BUTCHER> or <BAKER> or, yes, even <CANDLESTICK_MAKER>. This chapter closes with a review of the new technologies currently under review and design.

The Chaos of Change

Sometimes you might feel you have to spend 24 hours a day just to keep up with the technology being released. Needless to say, this is both frustrating and discouraging, all at the same time.

Web development does seem, most of the time, as if it undergoes a revolution in technology every three months; many times one specific aspect of the technology undergoes a change only about once per year. However, preceding the release of the changed technology is a period when the technology is being reviewed, or the product is being beta-tested, or some form of pre-release activity is occurring. Then, the release of the standard or technology or product occurs, and there is a period of comparing it with its older version, or with other products. Then, you have to spend some time learning how the new technology works, how to migrate older pages or applications, or checking to see if existing pages or applications break with the new release. Finally, just when you think you are starting to become comfortable with the new or modified technology, the company or organization announces the new release of whatever the product or standard is.

Consider also that Web development is made up of several different technologies, including browsers, standards, embedded object technology, and server technology. Putting all of these aspects in one category–“Web Development”–and considering the multiple-phase delivery of most Web technology, provides what seems to be continuous change.

As an example, in 1997 it probably seemed as if a new browser were being released every quarter. Well, what actually happened is that there were minor bug fix releases of Netscape Navigator 3.x and Internet Explorer 3.x in the year’s beginning, and Netscape also released several different beta versions of Navigator 4.0 before it actually released Navigator 4.0. After the release, there have been several enhancement and bug fix releases of Navigator 4.0.

Microsoft also released two major beta releases of Internet Explorer and released the final version about the time this book went to editing. There will likely be enhancement and bug fix releases for IE 4.0 before the year is out.

Add the international releases with these other releases, and you have a browser release on the average of about every three weeks, not months.

Also consider that browser manufacturers themselves are at the mercy of the release of new standards or new versions of existing standards. The year 1997 saw the beginning of the DOM effort, a new version of the HTML specification, HTML 4.0, the rise in interest in XML, the passage of the ECMA standard for scripting, ECMAScript, and the recommendation of CSS1 for Web page presentation. And these are only some of the standards that impact browsers.

So, how do the browser manufacturers cope with the changing standards? The same way you can cope with all of the other changing technology: First, you define your Web development and Web client platforms. You determine what technologies make up each, including versions, and concentrate on these technologies, complete the effort you determine to complete with the defined platform, and then, and only then, begin to plan your next Web platforms.

The Current Technology Platform

For many companies and individual users, the current technology platform consists of Netscape Navigator 3.x or Internet Explorer 3.x for the browser, Apache 1.2, Netscape Enterprise Server 2.0 or 3.0, O’Reilly’s WebSite Pro, or Microsoft’s Internet Information Server 2.0 or 3.0.

Most Web pages contain a combination of text and images, and most of the images are static. Many sites use some form of scripting for page interaction, most likely a form of JavaScript. HTML tables are used to handle the layout of HTML elements, as shown in Figure 37.1.

As you can see from the figure, you can actually create a fairly organized page using HTML tables. The page also uses the font element to color the sidebar text white; the color attributes of the table header and contents are used to set the header to red and the contents to yellow.

Animation in a page occurs through the use of Java applets, animated GIFs, Netscape style plug-ins, or ActiveX controls.

The version of Java used with most applets is based on the first release of the JDK–JDK 1.0.

Server-side applications are used to create dynamic Web pages, to present database information, or to process information returned from the Web page reader.

A Summary Review of the Technologies Covered in the Book–Where Will They Be in a Year?

A good rule of thumb when working with content for multiple versions of a tool is to support the currently released product in addition to one previous release. Based on this, you can count on supporting pages that work with Netscape Navigator 3.x and 4.x, and Internet Explorer 3.x and 4.x. As both browser companies begin the rounds of creating version 5.0 of their respective products, the business world will be cautiously upgrading pages to work with the new 4.0 technologies, particularly CSS1, HTML 4.0, and Dynamic HTML. By the time they have made the move to 4.0 technology, the 5.0 release of the browsers should be close to hitting the street.

The browser companies themselves probably follow a similar reasoning in that they support a specific number of versions of a standard, such as HTML, before they begin to drop deprecated content from earlier releases of HTML.

Standards organizations rarely release more than one recommended version of a standard each year. Sometimes they might go longer than a year before a new release, rarely less than a year.

Based on this, the technology you read about in this book should be viable for two years after publication of the book, which takes the Web into the year 2000.

The following sections look at each of the discussed technologies, with an eye on where each is likely to be on the eve of 2000.

HTML 4.0, CSS1

To start with the basics, the foundation of Web publishing is HTML, and this technology was explored in the first part of the book. Additionally, the first part of the book also looked at Cascading Style Sheets (CSS1) and Dynamic HTML. Dynamic HTML’s future is covered in the next section.

As this book goes to press, HTML 4.0 is the version of HTML currently under draft review. This version provides for increased form and table support, deprecates several existing elements, and adds a few new element types and several new attributes, such as intrinsic events.

HTML 4.0 should become a recommended specification at the end of 1997. Currently, Microsoft has incorporated the HTML 4.0 draft specifications into the first release of IE 4.0, and Netscape has promised to adhere to the standard after it becomes a recommendation. Based on this, any changes to the HTML 4.0 draft will probably result in a minor revision release for IE 4.0. However, the HTML 4.0 changes for Netscape Navigator will probably be extensive enough for the company to incorporate these changes in the next release of Navigator, version 5.0. Following the Navigator 4.0 release schedule, you should begin to see the early beta releases of Navigator 5.0 in the spring of 1998.

No new activity is occurring with the CSS1 standard at this time, at least not in its impact on Web page presentation. Additional style sheet specifications are underway for speech synthesizers (ACSS, which is Aural Cascading Style Sheets), and a printing extension is underway for CSS, allowing for accurate page printing. This is in addition to the CSS-P, or Cascading Style Sheet Positioning.

At this time, tools that process, generate, or incorporate CSS1 in some form include HoTMetaL Pro 4.0 from SoftQuad (http://www.softquad.com), Microsoft’s FrontPage 98, Xanthus Internet Writer (http://www.xanthus.se/), Symposia Doc+ 3.0 from GRIF (http://www.grif.fr/prod/symposia/docplus.html), PageSpinner for the Mac (http://www.algonet.se/~optima/pagespinner.html), and others.

In the next year or two, Web pages will begin to incorporate CSS1 and HTML 4.0, though Netscape Navigator 3.x has a base of users wide enough to prevent most companies from using only CSS1 and HTML 4.0 to create Web pages. However, both of the major browser vendors have promised support of these standards, and many of the Web generation’s tools will integrate them into the new versions of their tools. As these new tools are appearing as beta releases now, they should all be released as products in 1998. By the year 1999, most companies that want to control the presentation of their Web pages should be using at least some form of CSS1, and begin the process of removing deprecated HTML elements from their pages.

You can keep up with the standards for HTML at http://www.w3.org/TR/WD-html40/. The standard for CSS1 can be found at http://www.w3.org/Style/.

Dynamic HTML and DOM

In 1997, with the release of version 4 of their browsers, both Netscape and Microsoft provided support for the first time for Dynamic HTML. Dynamic HTML is the dynamic modification and positioning of HTML elements after a Web page loads.

Dynamic HTML is a great concept and badly needed for Web development. With this new technology you can layer HTML elements, hide them, change their colors, their sizes, even change the elements’ contents. That’s the good news. The bad news is that Netscape and Microsoft have implemented different versions of Dynamic HTML–differences that are a little awkward to work with at best, and conflicting at worst.

Neither Netscape nor Microsoft has implemented broken versions of Dynamic HTML. When Netscape published Navigator 3.0 and exposed HTML images to scripting access, there was a great deal of discussion about Microsoft’s “broken” implementation of JavaScript 1.1, the version of JavaScript also published with Navigator 3.0. However, Internet Explorer 3.x was not broken, but the browser did not implement the same scripting object model as Navigator 3.x. Now, with IE 4.0 and Navigator 4.x, the scripting object models are even more disparate, making it difficult to create Dynamic HTML effects that work equally well with both browsers.

The solution to this problem could be found with the Document Object Model standardization effort currently underway with the W3C.

According to the W3C, the DOM defines an interface that exposes content, structure, and document style to processing, regardless of either the language used or the platform on which the DOM application resides. The functionality of Internet Explorer 3.0 and Netscape Navigator 3.0 is defined by the W3C to be level “zero” of the standard. You might assume it is that functionality that both of these browsers support, which means they would not include images.

At this time, the DOM working group has produced a requirements document, which includes items such as those in the following list:

  • All document content, elements, and element attributes are programmatically accessible and can be manipulated. This means that you can use script to alter the color of header text, or dynamically alter the margins of the document.
  • All document content can be queried, with built-in functions such as get first or get next.
  • Elements can be removed or added dynamically.
  • All elements can generate events, and user interactions can be trapped and handled within the event model.
  • Style sheets can be dynamically added or removed from a page, and style sheet rules can be added, deleted, or modified.

This list is just a sampling of the requirements for the DOM specification, but it is enough to see that when the DOM specification becomes a recommendation, the days of the static and unchanging Web page will soon be over.

To see more about DOM, check out the DOM working page at http://www.w3.org/ MarkUp/DOM/.

Client Scripting and CSS1 Positioning

Excluding the objects exposed to scripting access as members of each browser’s scripting object model, there aren’t that many differences between Netscape’s implementation of JavaScript and Microsoft’s implementation of JavaScript.

Scripting will continue to be used in the years to come, and, hopefully, the language will not get too complicated, or the ease of use of scripting languages will begin to diminish.

Again, the major impact on scripting occurs with the elements that become exposed by the DOM effort. However, this is not a guarantee that the same script block written for Netscape’s Navigator will work with Microsoft’s Internet Explorer.

Consider each browser’s implementation of dynamic CSS1 positioning. First, both companies support CSS1 positioning, a draft recommendation actually created by both companies. This standard provides style sheet attributes that control an element’s width, height, z-order (the element’s position in the stack if elements are layered), the location of the left side and top side of the element. The standard also provides an attribute to control the visibility of the object and the clipping area.

Figure 37.2 shows how well CSS1 positioning works by showing a Web page using this technology, opened in both IE 4.0 and Navigator 4.0. Note how the text aligns directly on top of the image (yes, the text and images are separate elements), and that the images are aligned in a vertical line along the left side of the page, without using an HTML table for layout control.

The example in Figure 37.2 is discussed in Chapter 8, “Advanced Layout and Positioning with Style Sheets,” and is located in the file images3.htm at this book’s Companion Web Site.

Using CSS1 positioning to control the layout of text and images.

If statically positioning elements using CSS1 positioning works equally well with both browsers, dynamic positioning does not. Both browsers create the same effects but use different techniques. Considering that standards usually define an effect or behavior but don’t necessarily define a specific technique, you probably won’t be seeing consistent scripting of HTML elements in the next couple of years.

Java

As this is being written, Sun is on the verge of releasing JDK 1.2, Netscape just created a minor release to cover most of the classes released with the JDK 1.1, and Microsoft also supports JDK 1.1 in its release of IE 4.0.

The use of JavaBeans–Java components that can be packaged, distributed, and used and reused in applications–is among the technologies supported with JDK 1.1. It’s a very good idea and one that has already achieved popularity among Java developers.

However, not all is positive in Java’s future, particularly when used with browsers. The browser companies are usually one version release behind the current Java class releases. That is not a problem. What is a problem is a situation that may make creating cross-browser applets virtually impossible.

The difficulties with the original release of Java had to do with the Advanced Windowing Toolkit or AWT classes. For the most part, interface development in Java was difficult and lacked sophistication. To resolve this, both Microsoft and Netscape began work with interface classes, called Application Framework Classes (AFC) by Microsoft and Interface Framework Classes (IFC) by Netscape.

Netscape joined Sun and combined Sun’s current efforts with its own IFC library to create the basis for the Java Framework Classes (JFC), due to be released with JDK 1.2. However, Microsoft had also spent considerable time with its own framework classes. At this time, the end result is Netscape and Sun supporting one set of classes and Microsoft supporting another.

To add to the problem, Sun also submitted Java to ISO (the International Standards Organization), to become a standardized language. They also asked to be designated a Publicly Available Submitter (PAS), or the group responsible for developing and maintaining the specification. At this time, the ISO working group, JTC 1, has voted against the Sun recommendation, with comments. Sun’s response, in effect, is that they will pull the language from ISO and treat it as a de jure standard, meaning that the company will retain control.

This is not a situation that is guaranteed to increase business confidence in the language. Add this to the difficulty of creating applets using any kind of framework, having the applet work with both IE and Navigator, and the increased sophistication of Dynamic HTML, and you may be in for a future decline of Java use for applets.

ActiveX

The new and exciting technology addition to ActiveX is DirectAnimation, DirectX technology extended for use with Java applets, controls, or scripting.

Being able to create ActiveX controls fairly easily using a variety of tools should lead to an increased popularity of these controls with companies whose intranets use Internet Explorer. The downside with the technology is that it is proprietary.

However, Microsoft also released several new filters that were originally ActiveX controls, but then were built in as style attributes. These controls can change the transparency of a Web page element, have a line of text become wavy, or add pinlights to a page. This technology is so fun and simple to use that the demand may likely be to add these to the DOM once it is released.

With this technology you can create rollover effects for menu images without the extra download of the rollover effect image.

CGI and Server-Side Applications

Server-side applicability is already at a point where most companies’ programming needs are met. CGI is still an effective server application technique and still works with most Web servers. If your company uses Internet Information Server, Active Server Pages is still a viable application option, just as LiveWire is for Netscape’s Enterprise Server.

One change you may see more of is the use of CORBA/COM technology and distributed processing, with Web servers acting as one hub within a distributed network. Browsers might become “interface containers” rather than Web page processing tools. With the increased sophistication of Dynamic HTML, it won’t be long before you might be creating a Web page as the front end for a company application, in addition to using tools such as Visual Basic or PowerBuilder.

VRML

VRML is a wonderful idea that’s still looking for that killer application to take it out of the artist’s realm and plunk it directly into business.

Consider VRML’s concept, which is that you send a simple text file to a VRML-capable reader, which then renders the text contents into incredible, interactive 3D “worlds.” This is Internet technology at its best, as you have seen already with HTML, and will probably see with XML.

With VRML 2.0, the living world specification and the capability to integrate Web page scripting and VRML worlds, you are going to see more of this technology in use, for store catalogs, Web site maps, educational tools, and yes, even to play games and have a little fun.

XML and Channels

Neither XML nor channel technology, which are related, has found a niche yet, but with the release of CDF technology from Microsoft and Netcaster from Netscape, this should change.

The concept of push technology started with a bang at PointCast’s release, and almost disappeared without even a whimper–a case of too much hype and not enough efficient technology. In addition, the channel content just wasn’t there.

The entry of Netscape and Microsoft into the channel technology can only boost the use of this technology. Already, there is an increased number of companies providing channels. Add in those companies that are using the Marimba Castanet technology, and you should see an increased number of channels from diverse Web sites in the next year.

XML is the Extended Markup Language standard that basically adds the concept of extending Web page HTML to include new objects–objects related to the company’s business, based on some topic, or even packaged for reuse.

Microsoft and Marimba have proposed the use of CDF (Channel Definition Format) with the use of XML for use with channel technology. Apple has used a precursor of XML to create 3D Web site maps that are generated automatically; your reader can traverse to determine which page to access.

You can read more about XML at the W3C site at http://www.w3.org/XML/You can read more about Microsoft and Netscape’s implementation at their respective sites or in Chapter 34, “XML.”

Summary

Where will you be in the future of Web development? Not all that far from where you are now. New technologies seem as if they are popping up all the time–but they need time to get absorbed into the mainstream of Web sites.

One technique to begin incorporating the new technologies is to create a special set of pages for your Web site–not your main pages, but those that can demonstrate a product or idea and use the new technologies. A set of pages for the Web site shown in Figures 37.3, Figure 37.4, and Figure 37.5 are viewable only by Netscape Navigator 4.0 and Internet Explorer 4.0; these are additional pages to a Web site, but the sites themselves use mostly mainstream technology, meaning some use of CSS1, scripting, some CSS1 positioning, HTML tables, and just plain text.

The Web pages use Dynamic HTML to hide and display content, as well as hide and display the menu. The page also uses CSS1 positioning to lay out the HTML elements.

The technologies discussed in this book are effective today, and will be effective into the year 2000. Best of all, they won’t break on New Year’s Day, 2000.

Categories
Web

YASD Code Byte presents: Relative and Absolute Positioning – Part II Tables

Note: Navigator 4.x and up and IE 4.x and up

Prior to Navigator 4.x and Internet Explorer 4.x, one of the most commonly used HTML elements was the HTML table. With tables, you could position content in the middle of a page, create columns of data, position images.

With the introduction of CSS-P tables are not the only method used to position content, but they are still being used. Why is this? One main reason is that tables are still the best technique to use for positioning content for older browsers, and they are still one of the better techniques to use when it comes to “flowing” content into a specific section of a page, not just a single section of the page.

The best of all worlds might be the ability to use CSS-P with tables, but this is easier said then done. This second part to relative and absolute positioning demonstrates the ins and the outs of using CSS-P with tables.

First up, one thing a person might think of doing is using a table to position all content, and then use CSS-P to position content within the table. So, I created two tables, each with a text block enclosed within DIV blocks. Both DIV blocks are positioned relative to the enclosing table cell, with one set to a relative position of (0,0), and the second set to a relative position of (50,50). The code for the page is:

<table width=90% border=3>
<tr><td>
<DIV style="position:relative; color: blue">
Relative, 0, 0, Parent is table
</DIV>
</td></tr>
</table>	
<p>
<table width=90% border=3>
<tr><td>
<DIV style="position:relative; left: 50; top: 50; color: red">
Relative, 50, 50, Parent is table
</DIV>
</td></tr>
</table>

You can see the surprising results of using relative positioning within a table by checking out the page. Notice that both text blocks are positioned relative to the tables they are enclosed within, but also notice that the relative positioning of the second DIV block actually moved it “outsite” the table parameters.

I decided to try something else. This time, I positioned the table within a DIV block that has been absolutely positioned, set the width and height of the table’s cell using CSS1, and then used relative positioning with a DIV block contained IN the table. The code for this is:

<DIV style="position:absolute; left: 50; top: 150">
<table width=90% border=3>
<tr><td style="width:90%; height:100">
<DIV style="position:relative; left: 50; top: 50; color: lime">
Relative, 50, 50, Parent is table
</DIV>
</td></tr></table>
</DIV>

Well, interesting results here, as you can see by looking at the page and results that differ between Navigator and IE. For IE, the contents are positioned relative to the table, and the table height is set to 100 pixels in height a width of 90% page size. However, the height style attribute is not used within Navigator, and additionally, the font style applied to all DIV blocks is not applied to the inner DIV block. The latter happens because the DIV block style is applied to all DIV blocks at the document level, and the inner DIV block is now contained within a table which is contained within another DIV block. The only style that is applied to the inner block is the one applied as an inline style.

What other damage can I do? Well I created an absolutely positioned DIV block containing a table containing another absolutely positioned DIV block, and the results are even more interesting as you can see from the new page. What happened with this example, for both IE and Navigator, is that absolute positioning of an element removes the element’s height and width considerations when other content is placed on the page. Since the table is picking up its height from its contents, and the contents themselves are not participating in normal page layout, you get a squished table row. The table is wide enough only because its width has been set using the old style “width” attribute:

<DIV style="position:absolute; left: 50; top: 50">
<table width=90% border=3>
<tr><td >
<DIV style="position:absolute; left: 50; top: 50; color: magenta">
absolute, 50, 50, Parent is table
</DIV>
</td></tr></table>
</DIV>

Wait, wait! I’m not done twisting this one around. What happens if I remove the width attribute of the table. Take a look at the results with this page. Now, this is really interesing. First, for Navigator the contents do show, with a little bitty table above and to the left. However, try the page with IE 4.x. The contents don’t show either, but they do if you click the bottom scroll bar to move the page to the left a wee bit. The results are really strange, and note that I am using IE 4.01 on Windows 95 when I get them.

I have a little trick for handling sizing of tables when the contents are absolutely positioned, and I wrote about an article about this trick for Netscape Enterprise Developer’s February issue. What I do is use a transparent 1-pixel GIF placed into the table, and set to the size I want the table cell to occupy. If I want the cell to be 200 x 200, I set the image’s width and height to 200 each, as can be seen from the next example. The code to create this is:

<table border=3>
<tr><td >
<img src="blank.gif" height=200 width=200>
<DIV style="position:absolute; left: 50; top: 50; color: firebrick">
absolute, 50, 50, Parent is table
</DIV>
</td></tr></table>

Note also that IE wraps the contents to fit the table cell, but Navigator doesn’t. To get both to wrap, the DIV block should be set to the same width as the cell, adding for positioning to the left. In this case the width is set to 150, 50 for the left positioning and 150 to make a cell width of 200.

Want to see some other techniques? Well, try the page from the following code, which sets up the table separate from the table contents and uses the transparent GIF to size the table:

<table border=3 cols=4 width=400>
<tr>
<td >
<img src="blank.gif" height=100 width=100>
</td>
<td >
<img src="blank.gif" height=100 width=100>
</td>
<td >
<img src="blank.gif" height=100 width=100>
</td>
<td >
<img src="blank.gif" height=100 width=100>
</td>
</tr>
</table>

<DIV class=fonts style="position:absolute; left: 20; top: 20; width: 100; color: firebrick">
absolute, 20, 20, Parent is table
</DIV>
<DIV class=fonts style="position:absolute; left: 130; top: 20; width: 100; color: gray">
absolute, 20, 20, Parent is table
</DIV>
<DIV class=fonts style="position:absolute; left: 235; top: 20; width: 100; color: navy">
absolute, 20, 20, Parent is table
</DIV>
<DIV class=fonts style="position:absolute; left: 340; top: 20; width: 100; color: goldenrod">
absolute, 20, 20, Parent is table
</DIV>

Another page shows the results of a table with individually positioned DIV blocks, and using the transparent GIF to size and space the table cells. The results are actually pretty good, and the code for this effect is:

<table  cols=4 >
<tr>
<td height=100 width=100>
<DIV style="position: absolute; left: 0; top: 0; width: 100">
<img src="blank.gif" height=100 width=100 align=top>
</DIV>
<DIV class=fonts style="position:absolute; left: 20; top: 20; width: 100; color: firebrick">
Cell One
</DIV>
</td>
<td height=100 width=100>
<DIV style="position: absolute; left: 110; top: 0; width: 100">
<img src="blank.gif" height=100 width=100 align=top>
</DIV>
<DIV class=fonts style="position:absolute; left: 130; top: 20; width: 100; color: gray">
Cell Two
</DIV>
</td>
<td height=100 width=100>
<DIV style="position: absolute; left: 215; top: 0; width: 100">
<img src="blank.gif" height=100 width=100>
</DIV>
<DIV class=fonts style="position:absolute; left: 235; top: 20; width: 100; color: navy">
Cell Three
</DIV>
</td>
<td height=100 width=100>
<DIV style="position: absolute; left: 320; top: 0; width: 100">
<img src="blank.gif" height=100 width=100>
</DIV>
<DIV class=fonts style="position:absolute; left: 340; top: 20; width: 100; color: goldenrod">
Cell Four
</DIV>
</td>
</tr>
</table>

Best of all with this effect, is that the table itself can be included within an absolutely positioned DIV block, positioning the entire contents, as shown in the next example page. However, view this page with Navigator and the table is not positioned. Big Heavy Sigh.

One thing I was able to get working, with both browser, and in a way I actually planned (gasp), was the example shown in this Page. In this, I created a table with two images that are positioned using DIV blocks. The positioning is relative, and I set the top position of the second image to a negative value so it would overlap the first image. The code to create this effect is:

<table width=50% border=3 align=center>
<tr><td>
<DIV style="position:relative;top: 100; left: 40%">
<img src="yasd.gif">
</DIV>
<DIV style="position:relative; left: 40%; top: -30">
<img src="yasd.gif">
</DIV>
</td></tr></table>

Notice the white space around the images? That’s because the table height is equal to the height of the two images as they are positioned in page layout terms one after the other. The use of the negative top value makes no difference with page layout, the rest of the HTML content, including the table, “sees” these two images as layered one after the other, hence the row height.

And I think that’s a good place to stop…with an example that works the way I expect, and I even know the reason why.

That’s it for Part II of absolute and relative positioning.