Start Building Professional
Web Apps Today

Issue with toolbar in Firefox

I have experienced the following behavior of dhtmlxToolbar in Mozilla Firefox:

When I do a clean load (loading with cache cleared or reloading with [CTRL+F5]) of the example "toolbar_skin.html", the height of the toolbars is too big. Not before I hover a button in the toolbar, the toolbar will resize to its expected height. Have a look at the sample image at the end of my question to see the difference in height. When doing a quick reload without overwriting the cache, the height of the toolbars is ok.

The described behavior shows up in every other example of dhtmlxToolbar where a horizontal toolbar is used. In the vertical example of dhtmlxToolbar, this "resizing-effect" is not present, but nevertheless the layout doesn't fit right (see sample picutre).

The Firefox Version I used is 2.0.0.12. I could not reconstruct any of this behavior in Microsoft IE7.

As this issue screws up my layout until a toolbar button is hovered, it would be great if you could provide a solution for this problem.
Thank you in advance.

Sample Image:
http://img255.imageshack.us/img255/5991/samplejl6.png

Most probably problem caused by the situation when you init toolbar while related css file not loaded yet, in such case on moment of initialization styles not active yet, so initial rendering may be incorrect.
As far as I can see there are two possible solutions

a) Start toolbar initialization from onLoad event, in such case styles will be loaded for sure

or

b) Place styles from dhtmlxtoolbar.css directly in HTML page

Thank you for your answer.

In my project, I already initialize the toolbar from the onLoad event and the issue is present. So I tried your second solution, but I didn't succeed.

To exclude the code of my project as the source for this issue, I also modified the "toolbar_skin.html" example according to your proposals which didn't have any effect on this issue either...