Splitting an image in GWT results in unwanted white space

Question

I am using GWT 2.03 and am have an image that I want to place partially in an area with a background and partially above a background. I am using a FlexTable to try to accomplish this and have used GIMP to cut the image into two sections. I am trying to load the top part of the image into row 0 and the bottom part of the image into row 1. I set the alignment of the top image to ALIGN_BOTTOM but there is a bit of space at the bottom of cell and so the two parts of the picture don't touch.

Here is an image showing what I am talking about. I set the background of the cell to be yellow show where the cell boundaries are. The bottom image and background are rendering correctly.

Here is the relevant code snippet:

FlexTable table = new FlexTable();
table.setCellSpacing(0);
table.setCellPadding(0);
table.setBorderWidth(0);
FlexCellFormatter formatter = table.getFlexCellFormatter();

table.setWidget(0, 0, topImage);
formatter.setStyleName(0, 0, "topImageStyle");
formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM);
table.setWidget(1, 0, bottomImage);
formatter.setStyleName(1, 0, "bottomImageStyle");

How can I get rid of that space between my image and the cell boundary?

Answer 1

This is caused by the Standards rendering mode (see this article for a thorough explanation).

A quick fix (which should be applicable for this case) is to set your image slices to have the display: block style.

PS: It probably doesn't matter at this size (2x1) but Grid should be used when the size of the table is constant/known beforehand - it just offers better performance than FlexTable.

Answer 2

GWT has a class called DecoratorPanel, which targets this use case. See the JavaDoc for details on how to use it.

Answer 3

I have some suggestion for you:

• I'm not sure, if this work for FlexTable, but try setCellPadding(0) or setCellSpacing(0)
• Try addStyleName or setStylePrimary instead setStyleName
• Try to set the style to the image and not to the formatter
• Try also formatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_BOTTOM) with formatter.setStyleName(1, 0, HasVerticalAlignment.ALIGN_TOP).
• Firebug can help you to find, what you need to change to fix the problem. If you post peace of code (DOM), we can try to help you.