Firefox 7.0 breaks buttons with icons (Chameleon Theme)

Not sure why, but Firefox 7.0 (on Windows 7 at least) seems to have broken buttons with icons in them? I am using Chameleon Theme on the latest Vaadin 6.6.6.

The icon and the front of the buttons are replaced with “…” ellipsis.

According to Firebug, if I turn off the ‘overflow’ then the icon appears again (same with overflow: visible). It’s as if the area is considered to be too small to render so FF 7 is putting “…” in place.

.v-sa .v-button, .v-sa .v-button-wrap, .v-ff .v-button, .v-ff .v-button-wrap {
    overflow: hidden;

button.css (line 58)

No comments from Vaadin on the Chameleon Theme, but if you experience this, you can add this to your theme’s style after you import Chameleon:

.v-ff7 .v-button-wrap { overflow: visible; }

I’ve not seen anything wrong with it (yet)…

Firefox 7 has added support for
and it looks like they are applying it quite randomly.

Maybe trying text-overflow:visible or text-overflow:none would revert that new behavior with more predictable results.

We haven’t gotten around to run our automated tests with Firefox 7 yet (shame, it has been out for many days already). Once we do I’m sure we will found this and probably other similar issues and can then proceed to fix them.

Actually this was not discovered by our automated tests. Only in a few places there were “…” and these were all places where ellipsis was supposed to be used.

Please create a ticket for the issue at

What’s new about this issue?