Toolbar: unequal height between IE and FF

[Les]

Please take a look at the 'Toolbar that looks like MenuBar?' toolbar.

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Toolbar.html

The height of the toolbar is smaller in 1.2rc2 v.s. 1.1.1.

More info here:

http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-development-discussion/1-2-0rc2-toolbar-height

[bill]

The height is probably less due to [14125] but I wouldn't call it a regression, just a change. Lots of LnF stuff was changed for the 1.2 release.

[Les]

Replying to bill:

The height is probably less due to [14125] but I wouldn't call it a regression, just a change. Lots of LnF stuff was changed for the 1.2 release.

Bill, the problem is difference in height (about 6px) between IE and Firefox. I don't mind if the height changes from release to release as long as the height is consistent between browsers.

[bill]

Well, the good news is that there is a MenuBar widget in 1.3 that doesn't have this problem.

As to the issue with !Toolbar, I do see the difference between IE and FF, and it looks like this is some voodoo with <button> nodes and implicit padding added by the browsers. On firefox, the height of the toolbar, button, and span in the button are:

>>> dojo.byId("toolbar4").offsetHeight
21
>>> dojo.byId("toolbar4.Cut").offsetHeight
18
>>> dojo.byId("toolbar4.Cut_label").offsetHeight
15

FF is adding 3px vertical padding around the button.

On IE7 there is a larger difference:

> dojo.byId("toolbar4").offsetHeight
25
> dojo.byId("toolbar4.Cut").offsetHeight
22
> dojo.byId("toolbar4.Cut_label").offsetHeight
16

Although in IE8 it's shorter:

> dojo.byId("toolbar4").offsetHeight
20
> dojo.byId("toolbar4.Cut").offsetHeight
17
> dojo.byId("toolbar4.Cut_label").offsetHeight
15

I see a clue in dijit.css:

.dj_ie .dijitToolbar button,
.dj_webkit .dijitToolbar button {
	/* FF adds implicit padding to buttons so make other browsers follow suit,
	 * to avoid a bunch of browse specific rules in theme files
	 */
	padding: 1px 2px;
}

Commenting that out seems to make things better on IE6/7:

> dojo.byId("toolbar4").offsetHeight
23
> dojo.byId("toolbar4.Cut").offsetHeight
20
> dojo.byId("toolbar4.Cut_label").offsetHeight
16

although still a 2px difference.

Of course commenting out this line makes webkit and IE8 too short, webkit is 14 / 15 / 18.

So I guess I just need to only add padding for webkit and IE8, not IE6/7.

[bill]

(In [16475]) Fixes #7759: try to equalize height of Toolbar between browsers