Category: Web

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.

Any information system group that has a client base that is split geographically will have a problem with distribution: how do you notify the clients that a new version of the tool(s) they are using is out, what the version contains, and how to upgrade.

You can automate the upgrade process by using tools that determine that the application a person is accessing is now out of date and upgrading it accordingly. The problem with this approach is that the user will not have control of when the upgrade is occurring and may be wary of an update that they know nothing about.

You can take a more passive approach by sending an email or memo out to all of your clients that an update has occurred to the application and they then can access the update on a certain sub-directory. The problem with this is that unless the update is fixing a problem that the client specifically wants or asked for, they may not be as willing to take the time to make the upgrade to their own installation, and then you in the IS department are now faced with trying to support multiple installations using multiple versions of your product. Additionally, the application user will then have to find this upgrade, download it on their own, and install the upgrade, a multiple step process which can generate problems.

Is there a simple solution? There is a simple possibility.

Many companies are interested in porting applications to the Web in some form of an internal intranet just for this problem. Unfortunately as many IS departments are finding out, most applications will not port to the web that easily. However, this is not the only way the web can be used to solve migration and upgrade problems.

Another approach is to use techniques such as Server Side Includes and to use the concept of the personalized user page. This is a web document that the user will open every morning. The contents of the document have been personalized for the user and presents information from categories that they have chosen. A case in point is that a person who works with Group A in Department 1B for Division J for Company XYZ. They will have a web page that contains new information pertinent to Company XYZ at the top, then information pertinent only to Division J next, information for Department 1B next, and finally information for Group A.

A Server Side Include (SSI) embeds a command line in the HTML document given an extension which is usually .shtml or .stm (the webmaster can determine what this extension is). This type of extension tells the web server to parse the web document for SSI commands before sending the document to the browser. An example of one of these commands is:

<!–#include file=”company.html” –>

This SSI command will instruct the web server to open the file called company.html and load the contents of company.html at this point.

The advantage of this approach should be fairly obvious: the information is specific to the interests and needs of the individual and is presented in such a way that they can examine it for the entire day if they need to; the information can include links to other documents if the person wishes to pursue more in-depth knowledge; and the document can be saved using most browers SaveAs capability. In stead of a flurry of emails which may or may not contain information that is relevant and that can be ignored and difficult to follow or read you have one document that contains all the information.

Another advantage is that no programming is required, and the information for each department can be maintained by each department. Group A maintains the HTML document that is specific to them. If there is no new information a blank HTML document or one containing the words “No New Information” can be given. Division J can maintain their own HTML document, and so on. With the many many simple to use HTML tools this should not be a solution that requires programming intervention.

While presenting a unified approach to information presentation, each group maintains autonomous control over what information is presented.

For our distribution problem, if IS has upgraded software that is in use throughout Division J, a notice can go into the Division J section that a new version of the software is being created, what bugs it will fix and features it will add. When the software is ready, a link can be inserted into the document that will allow the person to download the upgrade with one click of the button. The user can then double click on this file as soon as it is on their machine and the upgrade process can occur.

What is the advantage of this technique over others? The information about the upgrade is presented in the same format and in the same context as the upgrade itself. Information about the upgrade and the upgrade itself are only given to those who are impacted by it.

How can this solve the multiple version problem? After all the user can continue to ignore the upgrade notice and continue on their merry way. Well, this is where the concept of something called a Netscape Cookie comes in.

A Netscape cookie, implemented by both Netscape and Internet Explorer browsers, is a tiny bit of information that is stored locally on the client’s machine and that can be accessed by the browser when a specific web document is loaded. When the document containing the information about the upgrade is loaded, this value is set for the first time. After that point every time the person accesses their personalized web page the cookie is accessed and the value is incremented or decremented. Information can be printed out to the effect that they have so many days to make the upgrade, and this value is decremented for each day.

If they make the upgrade, the cookie information is destroyed and the reader will no longer get the count down.

With additional sophistication, one can create the page in such a way that the download no longer shows once they make the upgrade. To use this approach, persisten information about what HTML documents one specific person will see is kept in a file on the server. When the person logs in and gives their user name and password this file is accessed. Instead of an HTML document the person accesses a file that is called index.cgi. This application will access the file containing the person’s preferences and the information is then used to determine how to build the page the person will see. The application does this by opening up the individual HTML documents that make up the person’s preferences and printing them back to the browser, in turn.

With this approach, after a person makes an upgrade their personal preference file is accessed and the entry that contains the upgrade information is removed. Not only will the person receive timely information that is pertinent to their needs, they will receive content that is dynamic and also matches their choices.

Finally, if the person still does not upgrade by a specific date an email can be generated automatically that will be sent to the IS department informing them of this information.

A link file containing sample Perl script that demonstrates the CGI based approach and that demonstrates the use of SSI can be found here.