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: 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 all currently used browsers. Only exception is the very outdated legacy browser IE5.x on Windows and Mac, which is used by about 1.5% of all websurfers globally.

Template successfully tested for (+ indicates the named browser version plus all higher versions):

Windows 2000 and XP

IE6, IE7, Firefox 2.0+, Mozilla 1.7+, Netscape 7.2+, Opera 9.0+ and Safari 3.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.3+.

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

Release Notes

Multiflex-3.12

January 20, 2008

Javascript code

Some unintended Javascript code was found in the login forms. / Correction: Code removed.

Multiflex-3.11

January 8, 2008

Drop-down menu

Browser: IE6 / Description: A 1px vertical gap between the drop-down menu main navigation bar and the first entry of the submenu entries was by accident introduced in some of the layouts of version 3.10 (typo mistake). When moving the mouse slowly from the navigation bar to the submenu items, the submenu would disappear as the mouse entered the 1px vertical gap area. The reason was found to be in the "top:1px" command in the CSS statement "nav2 table" for IE6 in the files "layoutNN_setup.css" and "headerNN_setup.css" files. / Correction: Changed to "top:0". To make the submenu to align perfectly at the left margin for IE6, a left-margin 1px correction was additionally introduced by changing "left:0" to "left:-1px" in all layoutNN_setup.css and headerNN_setup.css files.

Multiflex-3.10

December 16, 2007

Paragraph text beside an image

Browser: All non-IE browsers / Description: When having a paragraph next to an image in the content section, and when the image height is greater than the paragraph height, the subsequent following paragraph would not begin directly after the first paragraph, but at the bottom end of the image. So if the paragraph was very short, and the image high, a substantial amount of vertical free space would result in between these two paragraphs. The reason was found to be in the "clear:both" command in the CSS statement "p:after" in the files "layoutNN_setup.css". / Correction: Removed (commented out) the "clear:both" command in the "p:after" CSS statement in all "layoutNN_setup.css" files. No changes made in the HTML code, except for version number and date. To implement this update in your existing Multiflex-3 webpage you only need to remove the "clear:both" command in the CSS statement "p:after" in your layoutNN_setup.css file.

Multiflex-3.9

September 21, 2007

Version numbering and credits

All Multiflex templates now configured consistently in version numbering and author credits. The version numbering is now in the format X.Y, where X is the design series, and Y the version number. The author credits have been reformulated to "Design by 1234.info", with a link to that website.

Multiflex-3.8

May 22, 2007

Drop-down menu

Browser: IE6 and IE7 / Description: In IE6 and IE7 there was a problem when the main level of the drop-down menu contained a large amount of entries so that a second line was necessary. The line break was not functioning properly. / Correction: Only the "headerNN_setup.css" and "layuotNN_setup.css" files were modified. No changes have been made to the HTML code. In the CSS-class ".header-bottom" the statements "height" and "background" were removed. Also ".header-bottom:after" was included at the end of the CSS file to ensure that the container grows consistently with the content size. In ".nav2" the statement "white-space:nowrap" was included to make the line break function properly for IE6. This made it necessary to include a statement "white-space:normal" in the CSS-classes ".nav2 ul li:hover ul li a" and ".nav2 ul li a:hover ul li a".

Browser: IE6 / Description: In IE6 there was a problem with the layer position when the main line of the drop-down menu is 2 or more lines in size. / Correction: Only the "headerNN_setup.css" and "layotNN_setup.css" files were modified. No changes have been made to the HTML code. In the CSS-class ".nav2 ul li" the statement "position:relative" was removed. Then the statements "position:relative" and "z-index:1000" were added to the CSS-class "nav2 ul li a:hover". Additionally a new class ".nav2 ul li:hover" was introduced.

If you have an existing website with Multiflex-3, you only need to update the CSS files. The HTML files are not affected by the changes in this version.

Screenshots

Same as for Multiflex-3.7.

Multiflex-3.7

January 15, 2007

Drop-down menu

Browser: Opera 9.10 / Description: In Opera 9.0.2 the drop-down meus behaved correctly, but in the latest version Opera 9.10, the drop-down main menu collapsed after hovering the main links. / Correction: In the CSS-class ".nav2 ul li a" the float statement was modified to "float:none !important /*Non-IE6*/; float:left /*IE-6*/;" in all "headerNN_setup.css" and "layoutNN_setup.css" files. The !important-float statement defines the behavior for Non-IE6 browsers including Opera, the other float-statement is for IE6.

Screenshots

Browser: All / Description: Fresh screenshots have been made for Multiflex-3.7.

Multiflex-3.6

December 18, 2006

Drop-down menu

Browser: IE6 / Description: When hovering the drop-down menu, the rounded-corners image from the sidebar or subcontent boxes are incorrectly placed above the drop-down menu. This bug was initiated by the changes made in Update-4 (see below) / Correction: In the CSS-class ".nav2 ul li" is modified by the parameters "z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/;" was added to all "headerNN_setup.css" and "layoutNN_setup.css". The !important statement is for Non-IE6 browsers, the other statement for IE6.

Multiflex-3.5

December 17, 2006

Breadcrumb section background

Browser: All / Description: The replacement color (when image not found) for the background in the breadcrumbs section was set to its correct value. / Correction: For the CSS-class ".header-breadcrumbs" the replacement color-value for the parameter "background" was set to "rgb(255,255,255) in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Centered images

Browser: Netscape / Description: Images positioned with "center" were displayed in left-justified position, but now correctly are displayed centered. / Correction: The CSS-class "img.center" was modified by including the parameter "display:block" and "width:auto" in all "layoutNN_text.css" files. As a result of this change, it is no longer necessary for the paragraph to be centered (<p class="center">) when centering images. Paragraphs containing centered images are now simply coded as "<p>", without using any classes.

Footer height adjustment

Browser: All / Description: The footer did not expand sufficiently in the vertical when browser font-sizes were increased. / Correction: For the CSS-class ".footer" the parameter "height" was removed, while top and bottom paddings were introduced in "padding", all in the "layoutNN_setup.css" files.

Sitemessage width and text

Browser: All / Description: The site message in the middle header has received an increased width. / Correction: For the CSS-class ".sitemessage" the parameter "width" was increased by 50px in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Corrected top drop-down menu

Browser: All / Description: Due to the changes in Update-4, an unwanted sideeffect appeared, namely that the sticky hover zones outside the drop-down submenu were missing on the right-hand side of the menu. The only way to resolve this issue was to remove the sticky hover zones altogether. / Correction: Reformulation and simplification of the CSS-classes belonging to ".nav2" in all "headerNN_setup.css" and "layoutNN_setup.css" files.

Javascript removed

Browser: All / Description: In order for the navigation menu to remain flicker-free for IE browsers, a Javascript was used in the previous versions of Multiflex-3. However, since these hover zones have been removed (see topic above), this Javascript is no longer necessary. / Correction: Link to Javascript in the HTML header section, the javascript directory "js", the javascript "ieflickerhack.js", and finally the background parameters for the sticky hovering background image in the CSS-class .nav2 were removed in all CSS and HTML files.

Multiflex-3.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.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.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.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.0

November 23, 2006

First public release at Open Webdesign.

Development tools

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

  • Notepad++ 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.

Visit OpenDesigns.org

Latest top website for open-source webtemplates

Maybe you have heard of the latest news in the open-source webdesign community. As of December 2006 a new community of webdesigners was launched at OpenDesigns.org, featuring some of the very best talents. If you want to stay on the cutting edge of open-source webtemplates, learn and get ideas from experienced designers in an active forum, or simply download state-of-the-art webtemplates for you to use, then this is definitely the site you want visit regularly.

Credits for ideas and reviews

Persons who contributed with ideas or CMS-portings for Multiflex-3: