Panel's border is clipped out in IE9


The panel’s border at the bottom of the page is clipped out in IE9 browser. But seems to work fine in firefox. Can anyone help me out with this.

I have attached the sample code that I’m using.

private Panel panel = new Panel();
Table tbl = new Table();

HorizontalLayout mainLayout = new HorizontalLayout();
mainLayout.addComponents(tbl, panel);
mainLayout.setExpandRatio(tbl, 4);
mainLayout.setExpandRatio(panel, 1);

css code:

.pm-normal-panel {
border-radius: 5px;
border: none;
position: relative;
.v-panel-caption {
background-color: $background-color-light-blue;
color: black;

I have attached an image. The left side is the table and the right side one is the panel which has the border at the bottom being clipped off.


One more information I forgot to add was we are using custom theme which extends Chameleon Theme.

The fact that you are overriding the theme for the Panel (and other parts of the UI) makes it really difficult for us to help you. Most likely you have an extra padding, margin, or border somewhere that pushes the panel a couple of pixels. You need to walk through the DOM in e.g. FireBug to see what element is the wrong size.

Hi Thomas,

I have attached a sample program which replicates our problem. I have tried as much as possible to be exactly same in layout and sizing.
Can you please take a look at it and let me know why is the lower border not shown for the last panel in the layout(IE 9). If you can suggest the correction I could fix a lot of issues within our implementation.

Pooja (5.57 MB)

I took a quick look, and I can’t even find where that border comes from originally. Don’t have any time to help further right now, sorry :frowning: