Snippets code from my daily experience

March 11, 2008

XBL, CSS selectors priority and Firefox 3

Filed under: css,firefox,gecko,mozilla,xbl,xul — dafi @ 8:58 pm

I wrote a little XBL component to allow menuitems to have images centered, I added it to Firefox 2 browser context menu and worked fine immediately, after a while I installed component on Firefox 3 beta 4 and surprisingly the menuitem didn’t show the image😦

I’ve asked help on Mozilla IRC and after about an hour the mistery was revealed.

The innocent CSS declaration shown below works fine on Firefox 2

.menuitem-image-center {
-moz-binding: url(‘chrome://morekomodo/content/bindings/menu.xml#menuitemImageCenterBinding’);
}

but requires a little modification on Firefox 3 beta 5pre (at this time the latest available)

.menuitem-image-center {
-moz-binding: url(‘chrome://morekomodo/content/bindings/menu.xml#menuitemImageCenterBinding’)
!important;
}

You must notice the selector without !important attribute works on Firefox 3 when applied on menus different from browser context menu.

I suspect the browser context menu should have some special treatment on new Firefox…

Context menu

1 Comment

  1. > I suspect the browser context menu should have some special treatment on new Firefox…

    Can the simple explanation be that there is just one CSS rule like this “menuitem:not(type) { -moz-binding: … }” in the browser.css that has higher priority then yours? Try to be more specific in your selector if you want to avoid the “!important”.

    Comment by Elixon — July 6, 2008 @ 5:00 pm


RSS feed for comments on this post.

Blog at WordPress.com.

%d bloggers like this: