Toolbar: extra spacing between buttons (FF)

[jeffg]

Based on unchanged markup, recent builds as we approach 1.1 have introduced extra space between buttons on toolbars. Both on custom markup (that haveabsolutely no space in it), and in the Editor tool bar, when invoked through markup.

It badly screws up the look of things...

Proper look on IE7:

Extra spacing on FF2:

[bill]

​They look fine to me. I'm attaching an image... does it look different for you?

[jeffg]

Proper look on IE

[jeffg]

Improper look on FF2.x (windows)

[jeffg]

Attached are the images the editor from our app under IE7 and FF2 (windows). The same problem occurs in our app with buttons created from markup on dojo toolbar. Same code & markup with different results.

It is a very broken look on FF, and it is a poor look as well, hence the upped priority.

[bill]

Yes, there's a problem on FF2 and FF3 where the <span> node w/the icon is 18x18 but the button itself is 24x20, although according to firebug neither the button nor the span have padding or margin... you can workaround this by just adding a CSS rule to your main page:

.dijitToolbar .dijitButton {
	margin: 0px;
	width: 18px;
	padding-left: -3px;
}

[alex]

bill: really unsure why this can't land on 1.1.1. What's the rationale for punting?

[dylan]

Culprit is [12788]

  .nihilo .dijitToolbar { 
 padding: 3px 0 1px 3px; 

etc.

Will attach a patch.

[dylan]

(In [13389]) fixes #6264, remove extra spacing from editor toolbar icons

[dylan]

(In [13390]) refs #6264, apply patch to 1.1 branch for Dojo 1.1.1

[dylan]

Patch from earlier helps, but not enough. Need to look at this again.

[Sam Foster]

Replying to dylan:

Patch from earlier helps, but not enough. Need to look at this again.

the button element in FF has some default (non-removable) padding (3px IIRC). So any solution to this will either be some css hack (thats not coming to me right now), or changing to use some other element - which may or may not be a solution. Here's some details and screenshots: ​http://www.designdetector.com/demos/buttons-padding-demo.html

Using negative padding on the button doesnt do anything for me.

[Adam Peller]

(In [13578]) Back out Dylan's changes from [13390] on 1.1 branch. Refs #6264

[Sam Foster]

From a snippet on ​http://www.sitepoint.com/forums/showthread.php?t=547059

6264_mozFocusInner.patch adds a rule to the tundra toolbar buttons that effectively removes the mysterious inner padding. The same could/should be applied to the other themes presumably - or perhaps this belongs in dijit.css? I dont know to what extent we've designed around the current behavior.

Moving back to 1.2, unless someone feels strongly that its needs to be squeezed into 1.1.1

[Sam Foster]

Re-created the 6264_mozFocusInner.patch to patch dijit.css and fix this for all themes

[bill]

(In [13617]) Fix toolbar spacing on FF. Patch from Sam Foster (CLA on file). Fixes #6264.

[Sam Foster]

[PATCH] [CLA] fixes a11y regression with the -moz-focus-inner rule by removing border:none (dijit.css)

[Sam Foster]

Turns out that removing the border specified by -moz-focus-inner (in the mozilla/ff default stylesheet) prevents the button from accepting focus. I updated the 624_mozFocusInner.patch (already committed to trunk) to remove that property assignment. This inner border basically is the outline -which we want. The padding is still removed, so I still consider this fixed. I'll look into seeing if there's a way to claw back the 2px.

[dante]

(In [13623]) refs #6264 - minor wrinkle in patch to fix padding regressed a11y. fix before becka11y notices :) (courtesy Sam Foster, CLA)