Opened 11 years ago

Closed 11 years ago

#7759 closed defect (fixed)

Toolbar: unequal height between IE and FF

Reported by: Les Owned by: bill
Priority: high Milestone: 1.3
Component: Dijit - LnF Version: 1.2beta
Keywords: Cc:
Blocked By: Blocking:

Description

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

Change History (5)

comment:1 Changed 11 years ago by 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.

comment:2 in reply to:  1 Changed 11 years ago by 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.

comment:3 Changed 11 years ago by bill

Milestone: tbd1.3

comment:4 Changed 11 years ago by bill

Component: DijitDijit - LnF
Owner: set to bill
Status: newassigned
Summary: 1.2rc2 Toolbar - Minor CSS regressionToolbar: unequal height between IE and FF

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.

comment:5 Changed 11 years ago by bill

Resolution: fixed
Status: assignedclosed

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

Note: See TracTickets for help on using tickets.