U4-9374 - Navigation panel header and editor panel header don't line up properly in Firefox

Created by Arjan Hoogervorst 12 Jan 2017, 14:41:32 Updated by Warren Buckley 06 Sep 2017, 11:38:56

Tags: PR

Subtask of: U4-9609

After upgrading to Umbraco 7.5.7 I noticed the navigation panel header and editor panel header don't line up properly when using Firefox.There's a 1 pixel difference which makes it look kinda crappy. I've tested this on Firefox 50.1.0 (current version). I also tried it on Firefox in safe-mode to rule out any interference from an extension. And I've tested it through BrowserStack: same results. The alignment is fine in Chrome.

The CSS height is properly set to 99px with a 1px border-bottom, but for some reason Firefox renders the height as 100px with a 1px border-bottom. The issue affects an upgraded Umbraco project, but also a clean 7.5.7 install.

2 Attachments


Arjan Hoogervorst 12 Jul 2017, 19:46:25

The issue is being caused by line 25 in /Umbraco.Web.UI.Client/src/less/components/editor.less:

.umb-editor-header {
	background: @gray-10;
	border-bottom: 1px solid @purple-l3;
	{color:red}flex: 0 0 99px;{color}
	position: relative;

The following CSS changes fix this issue:

.umb-editor-header {
	background: @gray-10;
	border-bottom: 1px solid @purple-l3;
	position: relative;

	@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
		/* IE10+ specific styles go here */  
		flex: 0 0 99px;

Ronald Barendse 04 Sep 2017, 09:33:51

I've created the pull request: https://github.com/umbraco/Umbraco-CMS/pull/2168.

The height of .umb-panel-header-content-wrapper was 100px, while the parent element .umb-panel-header was 99px. Apparently the flexbox model varies in this regard...

Warren Buckley 06 Sep 2017, 11:38:27

Thanks @rgmbarendse for the fix it has now been merged in

Priority: Normal

Type: Cosmetics

State: Fixed


Difficulty: Very Easy

Category: UI

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.5.7, 7.6.3, 7.6.4

Due in version: 7.6.7


Story Points:

Cycle: 4