[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Presentation

Concerning the presentation problems continues with the Netscape 4.x series because CSS works just partial in the dynamic menus, which I have used. Browsers have especially difficulties with linked CSS, because just a part of it works. Because direct CSS works better, I have used some style attributes (if necessary I have cancelled the effects by using the !important-rule in the CSS for other browsers). I must add some extra elements (for example B and IMG) in order to get the presentation better. Links seem to need the FONT element, because even the style attribute doesn't always work. For other browsers than Netscape 4.x I have defined the presentation primary through external CSS-files.

If Netscape 4.x series browsers should be supported, the HTML-code for dynamic menus must be in the beginning of the page because I found that Netscape 4.x crashed when the code was in the middle of the page inside a table!

In my mind it is reasonable to set id or class attribute for each individual link or the container element of each links. At this way is possible to get the same menu to look different in every page. Each page has a style sheet, which defines the style of the link, which refers to the current page. In one level dynamic or static menus the link to the current page can be hided with display:none or for it have been set special color and/or background-color/ background properties. The latter alternative can be used also in multilevel dynamic menus. For Example this page has the following CSS:

#Dy {background-color:#ffd700 !important; color:#303400 !important; cursor:default}

It cause the following result (in order to get good result as many browser as possible the definition should be given both to the link itself and the container table cell, if the link is inside a table; remember that the value of the id-attribute should be document wide unique):

CSS-site

Properties have !important in order to eliminate changes of link and dynamic pseudo-classes (a:visited ect). If links don't have any sub-menus they can have cursor:default. By marking the current page the visitor doesn't click so easily the link of the current page. He can also clearer know, where he is in the selected page group.

New Opera, MS IE and Mozilla Gecko (for example in Netscape 6.x) browsers don't need image links because setting for the link display:block a normal text link looks like an image as in the screen capture image below (in new Opera and Netscape the whole element works always as a link but in MS IE the whole element is in some cases active and some cases not; in the latter case display:block cause just the visual effect but only the the text works as the link; if in MS IE the width property has other value than auto links are active at the whole available width except in situations, where links use the property float and links don't fit to the same line; it is also possible to get rid of this problems by the method, which I have intended primary for MS IE 4.x for Windows).

CSS-site

By using some pseudo-classes it is possible to get the same result as with JavaScript & event handlers, which change images or background colors of text links, when the mouse goes over/out of links or it does some other actions. In order to get the optimal result links need for example following properties:

.pageGroup a {display:block; width:100px; height:15px; line-height:15px; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 font-size:12px} /* Without the line-height property there might leave vertical space between links and text links don't behave exactly like image links. If links are inside table cells, also table cells need the line-height property in order to get good result also in Mozilla Gecko browsers (further is into this matter related code example). It is reasonable to set padding and margin properties should be set as zero in order to get links work equal in as many browsers as possible. The font size would be desirable to set so, that is possible to zoom it 120%. */
.pageGroup span.link {background:...; padding-left:11px;...} /* I have used in some versions around text links elements, which I gave background properties and the padding-left property. This element layer is not necessary. I recommend to set only background colors because background images don't work in all browsers. */
.pageGroup span.Link a:link {background:...; color:...}
.pageGroup span.Link a:visited {background:...; color:...}
.pageGroup span.Link a:hover {background:...; color:...}
.pageGroup span.Link a:active {background:...; color:...}
.pageGroup span.Link a:focus {background:...; color:...}
CSS-siteCSS-site

Because display:block doesn't work properly in Netscape 4.x and MS IE 4.x for Windows browsers, the solution doesn't look out smart in MS IE 4.x for Windows and Netscape browsers (look at a screen capture from the implementation of MS IE 4.x for Windows above on the right and compare it to the image on the left). It is however possible by using media blocks to define CSS so, that MS IE 4.x for Windows and Netscape 4.x don't get background properties for text links (I have advice in the extra page, which handles MS IE problems[S]; I use however background colors for text links, which gives sometimes a little bit bad looking result in these browsers).

Indeed for MS IE 4.x for Windows is possible to create the same result with event handler attributes for container elements of links. If all opening and closing commands have been executed by using the container elements of links, it would be possible to give the illusion, that links are active at their whole available widths, for example::

var nav_over = "this.style.background='#cee8ea';";
var nav_out = "this.style.background='#ffffff';";
...
<div onmouseover="MM_showHideLayers('Generic','','show',...); eval(nav_over);" onmouseout="eval(nav_out);"><a onmouseover="MM_showHideLayers('Generic','','show',...);" href="..."></div>

Adding corresponding functionality for Netscape 4.x browsers increase drastic the quantity of necessary encoding because it is necessary to add (9nce again) LAYER elements.

Text based links could work relative well in Netscape 4.x and MS IE 4.x for Windows browsers, if links itself would not have background properties and each link would be in an own table row so, that both on the left and on the right would be a table cell and widths of the cells, which has the text links would have been defined with spacer images. In the cells on the right and left would be opening/closing links of sub-menus. On the cells on the left would be list bullets. If necessary height values have been defined by using spacer images. I changed my menus using this style in order to demonstrate the system.

Indeed it still exists a problem, which concerns borders. If borders have been set with CSS Netscape 4.x leaves between the background color and the borders of the container block few pixel wide ugly transparent padding. In addition eldest Netscape 4.x series browsers crash easily, when CSS-borders have been used. Taking account all matters, the best solution to avoid this problem is to set the background color for the entire table and set "borders" by using table cells around the the content (cells can use rowspan and colspan attributes). I don't have created these additional cells to all menus, but only for the main menus.

Another way to avoid transparent paddings is to set background colors for LAYER elements and the descendant block has the borders. Below is a screen capture from a test menu. In the first level menu I have solved background color and border problems with additional table cells. In the second-level menu I have used a generated LAYER element.

A test page

The advance of the LAYER solution is that is is simple and also background images work so, that Netscape 4.x doesn't splitter them ugly way into individual table cells. But it has also disadvantages. From the screen capture can be seen, that the height of table rows are not the the same. Around the right hand table is a block, which has border and padding properties. In these kinds of situations the height of the tables vary even if they would have equal quantity of rows. The advance of additional cells is that vertical dimensions work more exact. In fact exact working paddings areas need around the content additional table cells at the same way as borders (the quantity of needed columns is then seven and additional table rows four).

In the example document[S] has been used have seven columns but in sub-menus simpler three columns structures. All menus and related link sets on the top-left are inside LAYER elements, which are generated by scripts. Below is the method how to create additional table cells and columns (because the natural dimensions of the spacer image is 1x1 pixel, it is not always necessary to set both height and width attributes):

<table summary="" cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="126" >
<tr class="topCells">
<td id="cell1" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="1" /></td>
<td id="cell2" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="2" /></td>
<td id="cell3" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="11" /></td>
<td id="cell4" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="101" /></td>
<td id="cell5" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="8" /></td>
<td id="cell6" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="2" /></td>
<td id="cell7" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" height="1" width="1" /></td>
</tr>

<tr class="paddingCells">
<td rowspan="5" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" width="1" /></td>
<td rowspan="5"><img src="spacer.gif" border="0" alt="" width="2" /></td>
<td colspan="3"><img src="spacer.gif" border="0" alt="" height="5" /></td>
<td rowspan="5"><img src="spacer.gif" border="0" alt="" width="2" /></td>
<td rowspan="5" bgcolor="#303400"><img src="spacer.gif" border="0" alt="" width="1" /></td>
</tr>

<tr class="contentCells">
<td><img src="menuButton.gif" border="0" alt="" height="10" width="10" /></td>
<td>The first row</td>
<td><img src="rightArrowr.gif" border="0" alt="" height="15" width="8" /></td>
</tr>

<tr>
<td><img src="menuButton.gif" border="0" alt="" height="10" width="10" /></td>
<td>The second row</td>
<td><img src="rightArrowr.gif" border="0" alt="" height="15" width="8" /></td>
</tr>

<tr>
<td><img src="menuButton.gif" border="0" alt="" height="10" width="10" /></td>
<td>The third row</td>
<td><img src="rightArrowr.gif" border="0" alt="" height="15" width="8" /></td>
</tr>

<tr class="paddingCells">
<td colspan="3"><img src="spacer.gif" border="0" alt="" height="5" /></td>
</tr>

<tr class="bottomCells">
<td bgcolor="#303400" colspan="7">
<img src="spacer.gif" border="0" alt="" height="1" /></td>
</tr>
</table>

I found that the main menu worked in my primary test browser (Opera) a little bit slower than before. At least Opera suffers the more complex structure, which gives better presentation for Netscape 4.x browsers. That's why I don't recommend to create more complex structures, which I have used. In in the basic structure has been used nested tables I counted that Netscape 4.x needs over 50% percentage more code than modern browsers in order to get reasonable good result. Compared to the minimum HTML-encoding it might be necessary to add because of Netscape 4.x over double quantity of HTML-code! Because of this reason it is quite questionable to support Netscape 4.x series browsers.

#Pages table, #PagesEn table {width:136px; table-layout:fixed} /* When the fixed table layout algorithm has been used the widths of individual cells must exactly match with the width of the whole table. */
#cell1,#cell2, #cell3,... {height:1px; line-height:1px; font-size:1px}
#cell1 img, #cell2 img, #cell3 img,... {height:1px}
#cell1 img, #cell7 img, td#cell1, td#cell7 {width:1px}
...
#cell4 img, td#cell4 {width:105px}
...
.paddingCells td {line-height:5px; font-size:5px; height:5px}
...
div.pageGroup td {height:15px; line-height:15px; padding:0}
/* Cells, which have actual links. Without this definition table rows are don't have the same heights as new MS IE and Opera browsers. This solution doesn't work properly in MS IE 4.x for Windows because only a part of cell have correct line height values. */

Old-fashioned HTML 3.2 style structure solutions cause additional work and they are difficult to get work exactly correct in new Mozilla Gecko based browsers. For new browsers it would be more reasonable to take off additional rows and (if rowspan attributes have been used) at the same time also all additional columns by using display:none for the additional table rows (to the tables of the main menus remain then three columns). In order to do that additional table rows must have id or class attributes (for example tr.topCells, tr.paddingCells, tr.bottomCells {display:none}). In this case it is possible to define real padding and border properties for the container element of the main menu. At this way Netscape 4.x works according to HTML 3.2 guidance and newer browser guided by CSS. I have however noticed, that setting the line-height property doesn't always help getting the correct result in Mozilla Gecko browsers (a test page[S]).

The previous mentioned solution doesn't work properly either in MS IE 4.x for Windows because it doesn't support display:none for table rows. If additional rows and columns for Netscape 4.x have been generated with scripts documents don't conform with (X)HTML specifications. I don't fine any fully satisfactory solution for MS IE 4.x for Windows when text links have been used. If menus will be created on fly with JavaScript (like DHTML Menu Builder does), they can be different for Netscape 4.x and other browsers. But generating menus with scripts is also problematic.

The smartest and the best working result for MS IE 4.x for Windows and Netscape 4.x browsers can be achieved only if all links are images. I don't change all links as image links because they cause so much additional work. If some favors image links it is not in my mind reasonable to encode menus by hands, even if the site of the TechsOfTheWeb.Com teaches, how to use images in dynamic menus. Because MS IE 4.x for Windows and Netscape 4.x series browsers are not anymore very common and they are quite buggy, I don't regard personally as reasonable giving full possible support for them. When menus are intended to encode by using code editors I recommend to use text links with necessary spacer images. In my mind the only reasonable alternative for this is to create menus with commercial applications like Macromedia Dreamweaver and DHTML Menu Builder. Indeed dynamic menus, which have been created with these applications have presumably stability problems at least in some browsers.

Presentation of menus can get better to set true or illusory transparent menus and shadows.

Browser-specific notes:

  1. For Netscape 6.2+/ Mozilla 0.9.4+/ at least as new other Mozilla Gecko browsers can set well-working real transparent sharp-edged menus and shadows by using the -moz-opacity property.

  2. For Opera 6.x+ browsers can set well-working half-transparent sharp-edged menus and shadows by using PNG-background images (MS IE doesn't support transparency in PNG-images). (A model image[S].)

  3. For MS IE 5.5+ for Windows transparent menus and soft-edged shadows can be made by using the proprietary filter property, but it is worth to note that for MS IE 5.5 can set only one effect for one element (a link to CSS-notes[S]). For example soft shadows has the following CSS: filter:progid:DXImageTransform.Microsoft.Shadow(color='#777777', Direction=135, Strength=5);. From the collection of Dynamic Drive can be found a ZIP-file, which can be found a model of a dynamic menu, which use the filter property (Top Navigational Bar IV). Indeed the menu has problems with Opera, which I have mentioned in the previous section[S].

  4. For other browser than new MS IE and Mozilla Gecko can be set transparent GIF-images. Certain pattern can create rough transparency.


Dynamic Drive: Top Navigational Bar IV; Macromedia; TecsOfTheWeb.Com: Using and Manipulating Dropdown Windows; xFX JumpStart: DHTML Menu Builder.

I explain some matters also in the browsing advice[S] - most pages has a short cut to this help (the question mark Apua).

   
Copyright Tapio Markula 1999-2003, Salo, Finland
(table of topic groups, E-mail - add Tapio.Markula)
( tapio.markula@nic.fi)
Not into the public use without my permission. If you want to use my pages at some way read the copyrights.
Get Expression!

An editor for creating standard-compliant HTML and XML documents. Documents of this site have in most cases checked with HTML Tidy by Dave Ragget (W3C) and randomly with the official MarkUp Validation Service of W3C. The syntax of most pages in this site should conform with the XHTML 1.0 specification of W3C. Test this page!
Information about browsers, which render or print this site best.
[Get Opera!] [Get Mozilla!]
CSS-guide has been last edited 07.08.2004