| 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.
|