This post is basically inspired by a problem I encountered with latest Firefox release (3.6). Some styling changed for no apparent reason at the end it turned out to be favicon I had set in XUL.

Basically, with favicon set my vbox stopped filling the window so my styling was off – background image was cut off, and I got some weird popup menu behavior where menu appeared to be shifted off the button.

Anyway here are a few simple examples that shows what is going on and how to solve it.

This what I want to have:

<?xml version="1.0"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml"
         >
		 <vbox flex="1" style="background-color: red">
			<hbox height="100" style="background-color: green"></hbox>
		 </vbox>
</window>

This would look like this in browser:

Now lets try to add favicon there:

<?xml version="1.0"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml"
         >
		 <html:link rel="icon" />
		 <vbox flex="1" style="background-color: red">
			<hbox height="100" style="background-color: green"></hbox>
		 </vbox>
</window>

Note that doesn’t really matter what icon you put there. I expected the browser to show exactly the same thing but it did not happen:

Now, that was unexpected. Basically the whole box collapsed and Firebug at the bottom shows that code is there, just not shown.

Fix for this was just to add style="display:none" and that was it:

<html:link rel="icon" style="display:none" />

And we’re back on track, browser is showing our page correctly again. This works in Firefox 3.0.x and 3.5.x without adding style attribute, but it has been changed in Firefox 3.6 for some reason so be warned. I’d suggest that if you have favicon specified like this and your page is not behaving as you expect try this fix first, my popups were shifted by the size of a spacer to the left and once I’ve applied this it was back to normal.