The Tutorial - Positioning the menus
Scenario: When the menus appear perfectly positioned under some browsers and not others (Floating mode)

The previous tutorials about positioning only showed how the toolbars appeared under Internet Explorer. If you try one of the samples in the tutorials using FireFox or any other browser you would notice that the toolbars appear out of position... or do they?

This image on the left shows how the menus look under FireFox. They appear to be out of position but the fact is that its the HTML content that is out of position. If you compared the position of the menus under Internet Explorer and FireFox you would see that they are being displayed at exactly the same spot but the HTML content is actually being rendered lower under FireFox. Why? Well, because on this particular sample we didn't specify a top margin for the BODY and Internet Explorer uses a different "default top margin" than other browsers.

Although most modern browsers try to follow the W3C standards as close as possible to render HTML content there're a lot of situations where one browser will interpret the standards in a different way resulting in the HTML layout being rendered differently.

So, how do we deal with this problem? Well, DHTML Menu Builder provides what's known as custom offsets. A custom offset is a highly configurable condition that, when met, will apply a specific offset.
Since we designed the menus to work under Internet Explorer we could create a condition that when a Mozilla-based browser is detected we apply a different vertical offset so the toolbar appears properly positioned.


Here's how this is done:

Click File->Project Properties->Advanced->Menus Offset. Click the Advanced button.

You will now see the Custom Offsets dialog. This dialog lists all the custom offsets that we have defined. DHTML Menu Builder supports an unlimited number of custom offsets.

Click the Add button to add a new custom offset.

The Custom Offsets dialog may look complex and overwhelming but it's actually very easy to use. The dialog is divided in to two main sections: the Assistant and the Advanced.

Most of the offset differences produced by the way HTML content is rendered under different browsers can be resolved by using the Assistant. The Assistant is the default section of the Custom Offset dialog and requires no knowledge of javascript programming and yet it is powerful enough to cover almost all circumstances and conditions where a custom offset might be needed.

Let's take a look at all the sections in the Custom Offsets dialog to get familiarized with them:
 


Description

In this area you can type a small description for the custom offset. This is very useful so you know what this custom offset is used for in case you need to revise your project in the future.

For the purposes of this tutorial we're going to write this description: Fix offset for Mozilla-based browsers


Condition

This is the section where you define the condition. The condition is very important because it will determine when DHTML Menu Builder will apply the offset.

The section is divided into three main sub-conditions:

  • The Platform: The platform defines the operating system under which the browser is being used and can have the following values:

    - Any: The condition will be applied regardless of the operating system being used to view the menus.
    - Windows: The condition will be applied when the browser is running under Windows.
    - Linux: The condition will be applied when the browser is running under Linux.
    - Mac: The condition will be applied when the browser is running under Mac.

    Although most cross-platform browsers, such as Mozilla, will render the content exactly the same under any platform there're situations where the HTML layout will present some minor variations depending on the platform under which the browser is being used. This is specially true for Internet Explorer 5 for Mac.

    In this tutorial we'll leave the condition as "Any" because we want to apply the same offset regardless of the platform being used.
     

  • The Browser: Here we can choose for which browser we want to apply the offset. Notice that for each browser we have three options: "The browser", "Not the browser" and "Ignore the browser".
    This is so because DHTML Menu Builder will treat some browsers as a combination of browsers. Don't worry if you feel confused... there is a very good reason for this.
    For example, DHTML Menu Builder will "see" Safari as combination of three browsers: Internet Explorer, Mozilla-based and Opera. So, if you want to apply a custom offset for Internet Explorer that doesn't affect other browsers you should setup your browser condition as seen in this image:

    So why does DHTML Menu Builder sees browsers as a combination of other browsers? To simplify the code... but, don't worry too much about it. Just keep in mind that if you create a custom offset for browser A and you see the offset affecting browser B and you did not want this to happen then simply use the "Not the browser" option for browser B.

    Here's a list of browser grouping performed by DHTML Menu Builder:

    • Internet Explorer is seen as a unique browser
    • Netscape 4 is seen as a unique browser
    • Mozilla-based browsers (such as FireFox and Netscape 6 and 7) are seen as a combination of Mozilla-based browsers and Internet Explorer
    • Opera is seen as a combination of Internet Explorer, Mozilla-based and Opera
    • Safari (and/or Konqueror) is seen as a combination of Internet Explorer, Mozilla-based, Opera and Safari

    Since in this tutorial we want our offset to affect all Mozilla-based browsers we are going to select the "Mozilla-based" option. According to the browser grouping table above, any offset applied to Mozilla-based browsers will also affect Safari and Opera. This is a good thing because the offset that you see on the screenshot at the top of this page is also occurring under these browsers so with just one custom offset we're going to solve a positioning problem under three different browsers!
     

  • The Browser Version: Here you can restrict the condition so it is only applied under a specific version of the selected browser. This is particularly useful to accommodate issues with very old browsers. For example, suppose that you have discovered that there's an offset issue with Netscape 6, but the menus appear properly positioned under all other versions of Netscape; in this case you would select the Mozilla-based option and then set the browser version to "Less than 7", which means that the condition will be applied to all Mozilla-based browsers whose version is below 7.0:

    You're probably asking yourself, and why not use "Equal to 6"? Because using "Less than 7" is a more generic condition and it will let us target versions 6.0, 6.1, 6.2 and so on...

    For the purposes of this tutorial we're going to leave the browser version condition as "Any" because we want to target all browser versions.


Offsets

Here is where you specify the offset that will be applied when the Condition that you have defined is met.
As you can see you can specify offsets for all the elements in a project: toolbars, root level menus and submenus.

For the purposes of this tutorial we only need to specify a small vertical offset for the toolbar. Notice that we have specified 10 pixels vertically.

This means that when DHTML Menu Builder detects that the menus are being viewed by any Mozilla-based browser, the toolbar will be pushed 10 pixels down.

The result can be seen on this screenshot of the FireFox browser:


This concludes this tutorial. Click here to return the "Positioning the menus" tutorial index.