In With the New

Jeff Brown
Rafael M. Muñoz
Microsoft Corporation

Updated: February 16, 1999

The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "Web Men Talking" column.

Contents
We don't need no stinkin' bugs - Differences using the <STYLE> tag with Internet Explorer 4.0
Now you see it, now you don't - Preventing images from printing
A ghost from the past - COBOL - Database access with Microsoft Transaction Server
Corralling your content - Positioning and updating content
What a gyp! - Authoring for multiple browsers
Don't limit yourself - Using the Ad Rotator Component
A better way to hide - More on hiding underlines

Yes, folks, the calendar has flipped to a new year. Light the fireworks, uncork the Champagne, and throw your dishes out the window! As we wind down from the wealth of celebrations, we meet a ghost from Christmases past, COBOL, and we discuss how to adapt that spectre to current technologies. We also probe the mysteries of disappearing images, <STYLE> tag interpretations, and the dark world of advertising.

It already promises to be a great New Year!

We don't need no stinkin' bugs

Dear Web Men:

I am trying to implement style sheets to ease in the transfer of porting documentation to the Web. An issue I have run across is that the font-size style tags are not being inherited to text within a table for Internet Explorer 4.0.

The HTML I want to use follows:

<HTML>
<HEAD>
<META NAME="GENERATOR" 
   Content="Microsoft Developer Studio">
<META HTTP-EQUIV="Content-Type" 
   content="text/html; charset=iso-8859-1">
<TITLE>Font Size Test</TITLE>
</HEAD>
<style TYPE="text/css">
<!--
BODY
   {
     font-family:"Verdana,Arial,Sans-Serif";
     font-size: 20pt;
     color: red;
   }
-->
</STYLE>

<BODY>
This text is outside the table<br> 
and will be 20 points

<TABLE Align= "center" Border=1>
<TR>
   <TD>
   This text is inside the table<br>
   and will be the default font size,<br>
   but it be the right color: red.
   </TD>
</TR>
</TABLE>

</BODY>
</HTML>

After testing the HTML, I found that the font-family and color tags are being inherited but the font-size tag is not. When the HTML was tested in Internet Explorer 3.0, the styles worked fine; I also noticed the ALIGN=CENTER tag did not work for tables within Internet Explorer 3.0 (an issue easily remedied with the <CENTER> tag).

I do know that I could use TABLE, TR, or TD styles, but that defeats the purpose. Am I doing something wrong or is this a bug within Internet Explorer 4.0?

Thank you for your help,

Malcolm Eaton

The Web Men reply:

A bug in our software! We believe most companies like to refer to such items as product features.

Actually, Malcolm, what you are seeing is not a bug. We're sure you are aware that Microsoft is following the standards recommended by the World Wide Web Consortium (W3C) . The current standard, recently released, is the HTML 4.0 specifications .

With standards come minor changes from the way one might have been doing things. This applies to inheritance for tables in Internet Explorer 4.0 . Tables are now treated the same as an HTML formatting element, such as H1 or H2 heading levels, which means that the <TABLE> tag will not inherit style attributes from previously defined styles. Therefore, not all the font attributes are going to be automatically inherited, including font-size. This definitely differs from Internet Explorer 3.02 , in which tables were looked at as any other element in your page, causing tables to fall under the CSS inheritance rules.

We can refer you to many references for further information on this and other behavioral differences -- Authoring Notes for Migrating from Internet Explorer 3.0 to Internet Explorer 4.0 and Authoring Strategies for Internet Explorer 4.0 and 3.0 , to name just two.

Malcolm, the easiest way to fix this problem, as you pointed out, is by adding TD to the style.

<!--
BODY, TD
   {
     font-family:"Verdana,Arial,Sans-Serif";
     font-size: 20pt;
     color: red;
   }
-->
</STYLE>

P.S. You are correct that ALIGN=CENTER used with the <TABLE> tag doesn't appear to work in Internet Explorer 3.02 . Remember that when Internet Explorer 3.02 came out back in 1996, there really wasn't an HTML standard for aligning tables that was supported by all browsers. As you also pointed out, the <CENTER> tag corrects this, and so does Internet Explorer 4.0 .

Now you see it, now you don't

Dear Web Men:

I have a page of information that is presented in different ways. For printing purposes, I don't need redundant charts or graphs. How can I keep certain images from printing?

Thanks for any help you can offer.

Michael Rackley

The Web Men reply:

Good news, Michael: There is a way to make some of the images disappear when the page is printed!

Create a style sheet, and use the MEDIA attribute. (Note that the MEDIA attribute is part of the HTML 4.0 specification, and this solution currently does not work in Netscape Navigator.) In a STYLE block, you can set MEDIA=PRINT, which indicates to the browser that the style sheet should be applied only when the output device is a printer. Set up a class in the STYLE block that includes the display:none or visibility:hidden style. If you want the images completely removed from the flow of the page, use display:none. If you want the space they occupied to remain as blank space, use visibility:hidden. For all the images you don't want printed, include the appropriate CLASS attribute in the <IMG> tags. Here's how the STYLE block and IMG tag would look:

<STYLE
  MEDIA=PRINT
  TYPE="text/css">
    .hide { display:none; }
</STYLE>

<IMG SRC="graph1.gif" CLASS="hide">

Wow, and some people think this sort of magic can only happen in Las Vegas.

A ghost from the past -- COBOL

Dear Web Men:

We're currently developing an Internet banking system for one of our clients. We're basing the system on a Windows NT® 4.0 platform, and using additional components such as IIS, Proxy, BackOffice, SQL, etc. Our main problem is that our client's database system is not yet centralized throughout their network, and several (at least 90) branch offices still use separate servers, running a COBOL/Clipper database system. We're trying to find some way to overcome this, by not decreasing performance, while accessing the data.

I had read about a Microsoft product code-named "Cedar" that could potentially be a work-around for the above-mentioned problem, but I can't seem to find any more information concerning that particular product. Can you give me any more information regarding it, as well as its implementation, capabilities, etc.?

Jeff

The Web Men reply:

COBOL! Jeff, you have raised a ghost from our past. We thought that COBOL had been lost along with LISP, SNOBOL, Jovial, and APL, to name just a few. You bring up an interesting problem. How do you access a existing database through COBOL if you are using a Windows NT server?

You mentioned "Cedar," code name, for a product that has now been integrated into the Microsoft Transaction Server (MTS) 1.1 .

Basically, this feature allows you to create COM interfaces using a language such as COBOL. This type library is then imported into the Microsoft Transaction Server. You can now write code to call these interfaces in such languages as Visual Basic® , Visual C++® , Visual J++™ , ASP, or Visual Basic Scripting Edition (VBScript) . Everything else is handled by the MTS run-time component. You can read various white papers on MTS at the Microsoft Windows NT Server site.

You can also download MTS from the Microsoft Technical Support Downloads , in the BackOffice section.

Corralling your content

Dear Web Men:

As I try to redesign a site for Internet Explorer 4.0, I'm trying to take advantage of some of the dynamic-positioning features. I want to have a navigation bar on the left and content area in the middle (no sweat so far). But instead of using frames (as I do currently) I want to use DIVs, so I can have the nav-bar slide in & out when the user mouse-overs and mouse-clicks on it.

The problem I'm having is the updating of the content DIV when I click on a link in the nav DIV. I want to load a new .htm page and render it in the content DIV. I also want to load a new navigation bar and have it render in the nav DIV. How can I load the contents of a text file and change the outerHTML of the content DIV? Or am I barking up the wrong tree and need to do it another way?

Thanks in advance for a response,

Tom Sekula

The Web Men reply:

Between your talk of barking and <DIV> tags, it sounds like you need some help herding your content into just the right spot on the page. Unless you are using absolute positioning to control where the content in the <DIV> tags is being placed, we're not sure how this would work with <DIV> tags alone. Their content is by default placed one after the other vertically in the flow of the page; it is not placed side-by-side when the browser renders the page.

If you don't want to use frames, you can use a table with <DIV> tags within columns of the table. One column will contain the navigation bar DIV, and another column will contain the content DIV. You can set up a far-left column just a few pixels wide, and when the user moves the mouse cursor over it, you can make the navigation bar slide out to the right. To get the slide out and back effect, the column for the navigation bar can set the display:none style to hide it, and then display:"" to make it appear to slide out and push the content column to the right.

Rather than trying to use the outerHTML method, use data binding to change the content of the navigation bar and content <DIV> tags. You can use the Tabular Data Control as the data source object. To associate the data with the table and <DIV> tags, use the DATASRC and DATAFLD attributes. Since you want to fill the DIV tags with HTML content, you also need to use the DATAFORMATAS attribute, and set it equal to HTML.

What a gyp!

Dear Web Men:

I'm a site builder beginning to move beyond HTML. I want to put dynamic text, animations, calculating forms, etc. on my Web sites, but I don't want to mess around with platform-specific technologies. I've put some things on my sites (marquees and animation paths) that don't work in Navigator. However, I don't want to shortchange visitors to my sites just because they are using Navigator. Where should I look for non-platform-specific technologies, or how can I integrate Netscape technologies alongside Microsoft technologies?

Yours truly,

Dan

The Web Men reply:

If you want to stick with technologies that Internet Explorer and Navigator both support, think about animated GIF files for simple animations. Animated GIFs are supported in both browsers by default. For richer animations, you can use formats and tools that are supported by an ActiveX control for Internet Explorer, and a plug-in for Navigator. Macromedia Flash and ShockWave animations are examples of this.

You should be able to do client-side validation and calculations with fields of forms in both browsers using JavaScript. You can do more powerful things in Internet Explorer 4.0 to handle forms, such as dynamically adding new fields and displaying dialog boxes to the user, but you can also limit what you do to just what Navigator supports.

For dynamic text, some tools, such as FrontPage 98 , can create dynamic text effects for both Internet Explorer 4.0 and Navigator. But there is no way to achieve many of the Dynamic HTML effects you can use in Internet Explorer 4.0 using Navigator (honest!).

To take full advantage of Internet Explorer 4.0 technologies without gypping Navigator users, sketch out the layout of your pages, how you want to present the information, and what dynamic effects you want. Create base pages that include only technologies supported equally well by both browsers. Then build on the base pages to take advantage of Internet Explorer 4.0 technologies. Put in a check for browser version in pages on your site (as we describe in our archived answer Don't I know you?), send the enhanced pages to Internet Explorer 4.0 users, and send the base pages to Navigator users.

For more suggestions and links to other resources on this subject, check out Robert Hess's article Made for Each Other? Making your Site Browser Compatible.

Don't limit yourself

Dear Web Men:

Rotating banners with clickable images that take you to different locations are all the rage now. How do you implement this in a browser that does not support the image object (like Internet Explorer 3.0).

Edward Kowalski

The Web Men reply:

Ed, why limit yourself to accessing image objects from script? Expand your horizons; it's a New Year. Check out our past -- columns, that is -- and look into using Active Server Pages , Internet Information Server (IIS) and the Ad Rotator Component . Then you can create some great rotating banners that will work with Internet Explorer versions 3.x and above , and with the other guys' browser, too. Yes, the Ad Rotator Component will also work with Netscape.

By using the Ad Rotator Component , you don't need to include image objects in script on the client to do banner ads; rotating images can be inserted by the server instead. You can find great documentation on the Ad Rotator Component on the Microsoft Developer Network (MSDN) Web site. There you will also find some great information on using Active Server Pages . Once you have digested this information, you will be ready for a sample. Refer to the Web Men answer Show me the money!, where we provide you with more information and finish our description out by furnishing a sample, which will have you up and running with banner ads in just a short time.

After you are familiar with the Ad Rotator Component, move on to using IIS to set up a Logging Interface, so you can keep track of which ads a user jumps to. Here again, you can also refer to a Web Men answer, Who gets what, and when?, for more information on this subject.

A better way to hide

In last month's column, we showed how to display and hide the underline usually associated with a hyperlink and the anchor tag, <A>, when the mouse was passed over it. With today's technologies, effects can be achieved in so many ways. Jason Truesdell, one of our readers, and George Young, a Microsoft colleague, pointed this out. A sweeter way is through the use of the hover class, found in the Cascading Style Sheets (CSS) Attributes section of the Web Workshop. Using this class, we can remove our JavaScript functions, and write the style sheet as follows:

<STYLE>
   A {text-decoration: none; }
   A:hover { text-decoration: underline; }
</STYLE>

Thanks to both Jason and George for pointing this out.

Jeff Brown, when not forcing family and friends to listen to Zydeco and country blues music, helps develop training courses in the Microsoft Mastering Series -- with a smile.

Rafael M. Munoz is a part-time Adonis, and full-time support engineer for Microsoft Technical Support. He takes it very, very personally every time you flame Microsoft.

The Web Men in Short

Added January 19, 1998

Q: William Hester wants to fill in e-mail message fields automatically when using a MAILTO: link.

A: Use field names (i.e., subject, cc, body), with question marks (?) and ampersands (&) as separators; for example:

<A HREF=
"mailto:a@place
?subject=test
&cc=b@place
&body=text">
Send mail</A>

Q: Greg wants to change the font size in a drop-down list box.

A: Use Cascading Style Sheets (CSS) with the SELECT tag, which supports a limited number of CSS styles.

Q: Fred Doughty wants to keep text or a graphic in a fixed spot on the screen when the user scrolls.

A: Check out Positioning in the DHTML, HTML & CSS area of the Web Workshop.

Q: Adam Newberg wants the BGCOLOR of an H1 tag to change on the onmouseover event.

A: Changing Element Styles has two samples that show how.

Posted January 5, 1998

Q: Thomas Latham wants to know about the HTTP file upload capabilities of Internet Explorer 3.02 and Internet Explorer 4.0.

A: This feature is part of Internet Explorer 4.0 . For Internet Explorer 3.02 , download the "HTTP File Upload" from the Internet Explorer 3.0 Add-Ons area.

Q: Arne Gleason asks how to add images using DHTML.

A: Insert new <IMG> tags within their containing element using the insertAdjacentHTML method, or change the element's innerHTML property.

Q: Chip Gasser wants to use JavaScript and the OnMouseOver event to change graphics dynamically.

A: Use Dynamic HTML. Refer to the Web Men Talking archived answer Activate me for an example.

Q: Janice Sjostrom asks how to integrate Site Server with Exchange, or otherwise send order data via e-mail.

A: Use the Send Mail component of the Site Server Personalization System . Also, see Collaborative Data Objects .

The Web Men's Greatest Hits

List of Web Men Topics

Write us!