Multiflex-3 Overview

Flexible and robust template

Now substantially improved and simplified

Multiflex-3 is the third generation Multiflex template. Numerous improvements have been made since Multiflex-2.1: More modern appearance, more page layouts, new drop down menus with sticky hover zones, solid printer support, expanded browser support, fully scalable upwards and downwards when user resizes the default browser font size, and last but not least, a much better and easier code. But there is more than that. Check the navigation menu to discover all about the new Multiflex-3!

Content Management Systems

Portings already available or in development

At the time of release, portings were being produced for various Content Management Systems, such as MODx, WordPress, and Contrexx.

Extensive browser support

Tested for all common browsers and systems

Multiflex-3 has been tested live for all major browsers, and functions properly for about 97% of currently used browsers. Only exception is the outdated IE5.x which has incorrect rendering.

Template successfully tested live for:

Windows XP

IE 6/7, Firefox 2.0, Mozilla 1.7, Netscape 7.2, and Opera 9.0

Windows Vista

IE7, Firefox 2.0, and Opera 9.0

Mac OSX 10.3

Firefox 2.0, Mozilla 1.7, Netscape 7.2, Opera 9.0, Camino 1.0, and Safari 1.2

Mac OSX 10.4

Firefox 2.0, Mozilla 1.7, Netscape 7.2, Opera 9.0, Camino 1.0, and Safari 2.0

Linux (Fedora Core 4)

Firefox 2.0, Mozilla 1.7, Opera 9.0, and Konqueror 3.4

Check browser screenshots

Javascript to avoid flickering

Download and installation instructions

IE is known to have a problem when hovering over background images since the browser tries to load the background image from the original site afresh every time it is hovered upon, instead of getting it from the cache memory on the local computer. This leads to the well-known and so-called "flicker effect" for IE, due to the small time delay that occurs while the background image is reloaded.

This hack is only able to remove the flicker effect when hovering over the drop-down menu. For other background image hovers, such as the bulleted navigation, this hack cannot prevent the flicker effect. Since javascript is not allowed at most webtemplate download sites, I have removed the script from the template.

Installation instructions

Release Notes

Multiflex-3 / Update-4

December 11, 2006

Drop-down menu critical bug solved

Browser: All / Description: When hovering the drop-down submenu at very large font-sizes, i.e. when the menu is shown on two or more lines, the hovered submenu is now shown on top of other main menu items. Until now, the hovered submenu would erroneously appear below other menu main items, thus making it impossible to reach those submenu links. / Correction: Removed the "z-index:1000;" parameter in the CSS-class ".nav2 ul li" in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Multiflex-3 / Update-3

December 4, 2006

Browser compatibility increased

Browser: Konqueror, Netscape and Mozilla / Description: Drop-down menus now correctly open up vertically. / Correction: Added a width-specification for the CSS-class ".nav2 ul li:hover ul" in "headerNN_setup.css" and "layoutNN_setup.css".

IE flicker hack moved

Browser: IE / Description: Flicker bug hack now moved from CSS to Javascript, for compatibility with IE6 versions before SP1. / Correction: Delted "html{expression...}" from "headerNN_setup" and "layoutNN_setup", and placed the code in the Javascript file "ieflickerhack.js" in the directory "js". Advantage is, that the CSS-file now validates correctly.

Browser screenshots

Browser: All / Modification: Individual image links removed, instead a general link to my homepage directory containing the screenshots of interest. Advantage is that screenshots can be added or deleted without breaking any links in the template.

Footer text

Browser: All / Modification: Designer credits now reads "Design by", instead of before "Original design by".

Multiflex-3 / Update-2

November 29, 2006

Printer layout and background color

Browser: All / Description: When printing, a gap was created between the header and the content section. Further, no background color was printed for the left navigation sidebar. / Correction: Removed erroneous vertical padding in CSS-class ".header-breadcrumbs in all CSS-files "layoutNN_setup.css". Further, included a printer CSS statement for the class ".main-navigation" in CSS-files "layoutNN_setup.css".

Template links

Browser: All / Modification: All template links now point to my homepage, instead of to Open Webdesign. This change was done in "index.html".

Multiflex-3 / Update-1

November 27, 2006

Drop-down menu items

Browser: IE7 / Description: Misbehavior when hovering main link by showing multiple columns / Correction: Reformulated conditional "if" statements in "layoutNN.html", "headerNN.html" and "index.html".

Bottom header background

Browser: All / Description: Background gap between bottom header and breadcrumbs when browser font-size reduced / Correction: Added background to the CSS-class ".bottom-header" in "layoutNN_setup.css".

Rounded corners line

Browser: All / Description: When decreasing or increasing browser font size, a horizontal line appears above the rounded corners for subcontent boxes with boundary. Effect happens when font-size resizes, but page is not reloaded. / Solution: Simply reload the page, and the horizonal line disappears. This is a Safari bug which we have no control over.

Top search form

Browser: Konqueror 3.4 / Description: Field width available for search form widened, so that "Go" button appears to the right, and not below, the search area. / Modification: CSS-class ".header-breadrumbs" changed in "headerNN_setup.css" and "layoutNN_setup.css".

Search form layout

Browser: All / Description: Search forms now have their "Go" buttons below the search entry field (only exception is search form below the page header). Reason for this is that design remains consistent when browser font-sizes are resized / Modification: CSS-class ".button" changed in "headerNN_setup.css" and "layoutNN.css".

Button styles

Browser: All / Description: Default buttons are styled very differently for different browsers. / Correction: To harmonize button appearance we have now styled the buttons explicitly. However, Camino and Safari overrule this style with Mac-specific buttons. / Modification: CSS-class ".button" changed in "headerNN_setup.css", "layoutNN_setup.css" and "layoutNN_text.css".

Credits for flags

Credits were included for the flags.

Multiflex-3 Launched

November 23, 2006

First public release at Open Webdesign.

Development tools

Many people ask me what tools I use. Here is the list:

  • HTML-Kit 292 freeware for coding the HTML documents.
  • TopStyle Lite 3.10 freeware for coding the CSS documents.
  • Browsercam provides fantastic browser screenshots and live testing of all currently available browsers on various systems.

Credits for ideas and reviews

Persons who contributed with reviews, ideas or CMS ports: