Test AcmeMenu August 25, 2003

Introduction

This is a test page for AcmeMenu. It is used to test the software with the different browsers. Notes regarding browser problems are collected at Browser Notes. There are buttons that turn on debug output so that the software operations can be traced. Help testing and verifying the menus on different browsers is appreciated. Please send test results and comments to: mack@acmebase.org.

Top of page.

Test Tools

Menus can be tested here by turning on debug output, which will open up another window and write trace output there as you move the mouse over the menus.

Turn Debug On
Turn Debug Off

Mouse coordinates can be displayed on the status bar, allowing you to measure offsets and compare coordinates with those computed by the menu functions. If debug has been turned on, then the mouse coordinates are recorded in the debug window. Netscape does not display the coordinates on the status bar.

Turn Mouse Coordinates On
Turn Mouse Coordinates Off

Another tool to find page coordinates is a "position box" that moves to the coordinates entered in a form. The box can also be dragged around the page, in which case it displays the coordinates of its upper left corner.

Show Position Box
Hide Position Box
Top of page.

Test Basic Menu Styles

The following are tests of the example menus found on the AcmeMenu instruction page.

Simple Menus

Menu

Top of page.

Inline Menus

Here is the style sheet used for these inline menus.
<style type="text/css">
<!--
div.example
	{
	display:none;
	padding:1ex 2ex;
	border:solid black 1px;
	}
a.example-head,
a.example-head-hilite
	{
	display:block;
	padding:0px 3ex;
	background-position:left top;
	background-repeat:no-repeat;
	}
a.example-head        { background-image:url(dtriangle.gif); }
a.example-head-hilite { background-image:url(utriangle.gif); }
-->
</style>

Inline menus do not work well with Opera 5 or Opera 6.


Top of page.

Drop Down Menus

Menu1 Menu2 Menu3

Top of page.

Vertical Menus

 

Top of page.

Push Up Menus

Menu1 Menu2 Menu3

Top of page.

System Menus

File Edit View

Top of page.

Fixed Menus

Menu 2

M
e
n
u
1
 
Menu 1
Cool stuff
Menu 2
Cool stuff Cool stuff
Menu 3
Cool stuff Cool stuff Cool stuff

M
e
n
u
3

Top of page.

Mack Menus

Menu1 Menu2 Menu3

Form

First
Second
Third
Check One Two


Top of page.

Test Image Rollovers

The following test uses images with rollovers as menu items. It uses <table> tags as the menus instead of <div> tags. They were created by Dreamweaver.

 

Menus
Vertical
Horizontal
Submenus
Vertical
Horizontal
Menu Position
Up Down Left Right
Submenu Position
Up Down Left Right

 

Note that menus line up with the edges of the menu header whereas the submenus line up so that their menu selections are straight across or up and down. Also note that although it appears as if there is only one set of menus being flipped vertically or horizontally, there are actually 26 different menus displayed above.

Opera 7 misplaces the initial menu above because it doesn't account for the extra space it inserted around the menu star to accommodate of the size of the surrounding table cells. That can be corrected by surrounding the <a> tag with a <div> tag, so the table cell would be defined like: <td><div><a ...><img ...></a></div><td>

Either Opera 6 and Safari or Mozilla 1 do not display the above menus. The menus are <table> tags containing images. If the tables have a style setting of block:display, Mozilla displays the menus correctly but Opera 6 displays the menus wherever they are defined in source code, and Safari displays the submenus at the far top or far left edges of the page. If the display:block is not defined for the <table> tags, Opera 6 and Safari displays the menus correctly but Mozilla doesn't display them at all. (!!)

The next test is a simple test to verify that the browser correctly positions a menu consisting of a table of image links. This test does not have any fancy programming to confuse the browser like the test above.


Top of page.

Test Menu with Different Border and Padding Widths

The next menu is a test of different padding and border widths for menus and menu items. The first menu is enclosed in a table with cellpadding and cellspacing, and the first menu item on the first menu contains multiple images, testing the horizontal placement of the submenu. The entire test menu is defined within a table that's within a <div> tag with a border that is within another table on the page.

Menu1 Menu2 Menu3

Netscape 6 and 7 and Opera 7 displays the items in Menu2 and Menu3 incorrectly. They extend too far to the right and are outside of the menu panel. That is caused by specifying padding and a width of 100% for the <a> tags. Specifying a width is necessary for Internet Explorer. It is best specifying a non-percentage unit, such as em or px.


Top of page.

Test Menus for Opera 5 and 6

The following menus have Menu configuration constants defined for the dimensions of the borders and padding of the the menus and menu items. Opera cannot read CSS settings from stylesheets so the positioning of above test menus is slightly off whereas the following menus should be accurate.

 

Submenus of manual menus do not work with Opera 5 and 6. Their implementation of the DOM does not provide a facility of searching menus for their submenus. Only top level menus (or form menus) can pop-up in manual menus, not their submenus. Also, the z-index setting needs to be set in the styles as it cannot be adjusted programically.

The CSS style display:none; cannot be used on any of the menus — it cannot be unset in the JavaScript so the menus never appear. Use the style visibility:hidden; instead.

Menu1 Menu2 Menu3

Borders and padding causes the spacing of the menus to be off. Opera 5 and 6 cannot read CSS style settings for those dimensions. A work around is to define the configuration constants Menu.MenuBorderWidth, Menu.MenuPadding, Menu.SubmenuBorderWidth, and Menu.SubmenuPadding.

Opera 6 has a bug where it always returns 0 for the dimension of the top margin of the document body. Therefore, you need to set the configuration variable Menu.BodyMarginTop to the dimension of the top margin of the document body.

Opera 5, if using tables for menu panels, needs to have the table's width defined. Tables extend to the width of the page once a position:absolute; style is specified, which is needed in order to position the menus.



Submenu
Submenu 2

Form

Print
Exit
Go Nowhere Go Somewhere
Submenu 3 Go North Go South Go East Go West
Go North Go South Go East Go West
Submenu Submenu 2
Print Exit
Go Nowhere Go Somewhere
Go North Go South Go East Go West
Submenu Submenu 2
Print Exit
Go Nowhere Go Somewhere
Go North Go South Go East Go West

Form

First
Second
Third
Check One Two

Form

First
Second
Third
Check One Two

Go Nowhere Go Somewhere
Submenu 3 Go North Go South Go East Go West
Go North Go South Go East Go West
Go Nowhere Go Somewhere
Submenu 3 Go North Go South Go East Go West
Go North Go South Go East Go West
New Open Save Save As
Print Setup Print
Properties Close
Cut Copy Paste
Select All
Find
Toolbars Status Bar Explorer Bar
Go To Stop Refresh
Text Size Encoding
Source Full Screen
Window
Message Post Contact
Standard Buttons Address Bar Links Radio
Customize
Search Favorites History Folders
Tip of the Day
Back Forward
Home Page
Largest Larger Medium Smaller Smallest
Auto-Select
Western European (Windows) Western European (ISO) More
Arabic (ASMO 708) Arabic (DOS) Arabic (ISO) Arabic (Windows)
Baltic (ISO) Baltic (Windows)
Central European (DOS) Central European (ISO) Central European (Windows)
Chinese Simplified
Chinese Traditional
Cyrillic (DOS) Cyrillic (ISO) Cyrillic (K018-R) Cyrillic (K018-U) Cyrillic (Windows)
Greek (ISO) Greek (Windows)
Hebrew
Japanese (Auto-Select) Japanese (EUC) Japanese (Shift-JIS)
Korean
Thai
Turkish (ISO) Turkish (Windows)
Unicode (UTF-8)
User Defined
Vietnamese

Submenu
Submenu 2

Form

Print
Exit
Go Nowhere Go Somewhere
Submenu 3 Go North Go South Go East Go West
Go North Go South Go East Go West
Submenu Submenu 2
Print Exit
Go Nowhere Go Somewhere
Go North Go South Go East Go West
Submenu Submenu 2
Print Exit
Go Nowhere Go Somewhere
Go North Go South Go East Go West

Form

First
Second
Third
Check One Two

Position Me
Left
Top
Close