jsf 1.2 h:panelGrid f:facet header and footer style background color not filling width 100%

i have the following xhtml for my jsf login box:


<h:panelGrid columns="2" styleClass="login">
<f:facet name="header">
<h:outputText value=" " />
</f:facet>
<h:outputLabel for="username" value="Username" />
<h:inputText required="true" id="username" value="#{loginBean.username}" />
<h:outputLabel for="password" value="Password" />
<h:inputSecret required="true" id="password" value="#{loginBean.password}" />
<f:facet name="footer">
<h:panelGroup>
<a4j:commandLink ajaxSingle="true"
value="Forgot password" oncomplete="#{rich:component('forgotPw')}.show()" />
</h:panelGroup>
</f:facet>
</h:panelGrid>

(the Login button and Terms of use link are irrelevant here so i left out the code)

as you can see, the footer and header background color doesn't horizontally fill the entire width of the h:panelGrid:

by using chrome's debugger i found the problem:

chrome's (user agent) stylesheet has a default border-collapse: separate for table elements, so to fix this i added the following to my application's stylesheet:

#checkPassword table {

border-collapse:collapse;

}

where #checkPassword is the id of the form that encloses the h:panelGrid, i.e. collapse all table borders inside my form.