PrimeFaces 3.0 - How do I prevent <p:layoutUnit> from displaying border and/or scrollbars?

Question

I'm using PrimeFaces 3.0 and I want to incorporate the <p:layout> into my pages. The layout component in 'fullPage' mode does a nice job of dividing up the page, but I have some issues with the look-and-feel of it. Here is what my test page looks like:

Look specifically at the bottom/south layout unit. There are two things I want to change.

1. How can I stop it from displaying that layout unit with a border around it?
2. How can I stop it from displaying the scrollbar when the content is too big to fit? I just want it to clip the content.

I just purchased the PrimeFaces 2.2 manual (there isn't a 3.0 manual yet), but it doesn't speak to this kind of change. Do I need to perform some CSS styling magic?

Answer 1

The two primary browser types in service in my target environment are IE 6 and IE 7. Unfortunately, I was only able to fix issue #1 for these browsers. The CSS to make the border stop displaying is:

.ui-layout-pane-south {
    border: 0;
}

If I wanted ALL of the layout unit boxes to stop displaying the border, it would have been:

.ui-layout-pane {
    border: 0;
}

I followed the suggestion from BalusC to try using Firefox/Firebug to inspect the HTML and play around with the CSS styles. It appears that the key theme-based CSS styles at play here are: .ui-layout-pane-south, .ui-layout-unit-content, .ui-layout-south.

I tried messing with all of them, but I can't get IE 7 (the IE version on my development workstation) to stop showing the overflow scrollbar. Firefox 4 never showed the scrollbar in the first place.

In any case, the border was the most important thing to get rid of and that's now fixed. I can prevent the overflow scrollbar by being careful not to overflow the bounds of my layout unit boxes.