TabLayoutPanel with custom widget for tabs

I'm trying to get custom tabs with a closing "X" image next to the
label. Something like "Blah X" with the X a clickable image.

I cannot get the tab widget to display correctly.

Below is a simplified example which shows the problem. The "Bad Tab"
should float the label left and the "X" right. On Chrome this will
cause the tab to be "detached" from the tab panel. i.e. it display
about 4px above the main tab panel. In FF the tab isn't detached, but
the floating doesn't seem to work.

Has anyone got something similar working ?

TabLayoutPanel panel = new TabLayoutPanel(32, Unit.PX);
panel.setSize("300px", "300px");

HTML hello = new HTML("Bad Tab&nbsp");
hello.getElement().getStyle().setProperty("float", "left");
HTML exit = new HTML("X");
exit.getElement().getStyle().setProperty("color", "red");
exit.getElement().getStyle().setProperty("float", "right");

FlowPanel fp = new FlowPanel();
fp.add(hello);
fp.add(exit);

panel.add(new Label("Blah"), fp);

hello = new HTML("Good Tab");
exit = new HTML("X");
exit.getElement().getStyle().setProperty("color", "red");

fp = new FlowPanel();
fp.add(hello);
fp.add(exit);

panel.add(new Label("Blah"), fp);

RootLayoutPanel root = RootLayoutPanel.get();
root.add(panel);

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.