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.

Test Tools

Test Basic Menu Styles

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

Simple Menus

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.

Drop Down Menus

Vertical Menus

Push Up Menus

System Menus

Fixed Menus

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

Mack Menus

Submenu Submenu 2

---

Form

---

Print Exit

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.

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.

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.

Submenu

Submenu 2

Form

Print

Exit

Submenu Submenu 2

---

Form

---

Print Exit

Submenu

Submenu 2

Form

Print

Exit