Having trouble with JSF - css

Question

I've been trying to get my friend's JSF to look good, but the text boxes just will not cooperate! I want to get my text boxes all lined up. I was able to control the three separate tables, using CSS (table.panelGridA, B, and C), but the text boxes only look good in one browser, while looking crappy in other ones. I think it would be better to target the specific text boxes, rather than the three tables, which I tried to do with ".ui-selectonemenu," but it did nothing. I would also like to add some type of frame around the form (something similar to this). Any help would greatly be appreciated!
<h:head>
<title>Registration</title>
<link href="style/Registrationcss.css" rel="stylesheet" type="text/css"/>
</h:head>
<h:body>
<h:form >
<h1>Registration</h1>
<p>Please Fill in all fields and click Registration</p>
<h:panelGrid columns="2" style="vertical-align: middle;">
<h:outputLabel value='First Name:'></h:outputLabel >
<h:inputText id='fnameText' value='#{registrationBean.firstName}'
required="true" requiredMessage="First name is mandatory">
<f:validateLength maximum="45"/>
</h:inputText>
<h:outputLabel value='Last Name:'></h:outputLabel>
<h:inputText id='lastnameText' value='#{registrationBean.lastName}'
required="true" requiredMessage="Last name is mandatory">
<f:validateLength maximum="45"/>
</h:inputText>
<h:outputLabel value='Date of Birth (YYYY/MM/DD):'></h:outputLabel>
<h:inputText id='dateofbirthText' value='#{registrationBean.dateofbirth}'
required="true" requiredMessage="DOB is mandatory">
<f:validateRegex pattern="((\(\d{3}\) ?)|(\d{4}/))?\d{2}/\d{2}" />
<f:validateLength maximum="45"/>
</h:inputText>
<h:outputLabel value='Billing Address 1:'></h:outputLabel>
<h:inputText id='address1Text' value='#{registrationBean.street1}'
required="true" requiredMessage="Address1 is mandatory">
<f:validateLength maximum="45"/>
</h:inputText>
<h:outputLabel value='Billing Address 2:'></h:outputLabel>
<h:inputText id='address2Text' value='#{registrationBean.street2}'
required="false" requiredMessage="Address2 is mandatory">
<f:validateLength maximum="45"/>
</h:inputText>
<h:outputLabel value='Zip Code:'></h:outputLabel>
<h:inputText id='zipcodeText' value='#{registrationBean.zipcode}'
required="false" requiredMessage="Zip Code is mandatory">
<f:validateLength maximum="10" minimum="5"/>
</h:inputText>
<h:outputLabel value='City:'></h:outputLabel>
<h:inputText id='cityText' value='#{registrationBean.city}'
required="true" requiredMessage="City is mandatory">
<f:validateLength maximum="45"/>
</h:inputText>
<h:outputLabel value='State:'></h:outputLabel>
<h:selectOneMenu id="stateList" value="#{registrationBean.state}">
</h:selectOneMenu>
<h:outputLabel value='Phone: (xxx-xxx-xxxx)'></h:outputLabel>
<h:inputText id='phoneText' value='#{registrationBean.phone}'
required="true" requiredMessage="Phone Number is mandatory" validatorMessage="Please enter a valid phone number!">
<f:validateRegex pattern="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" />
</h:inputText>
<h:outputLabel value='Email:'></h:outputLabel>
<h:inputText id='emailText' value='#{registrationBean.email}'
required="true" requiredMessage="Email is mandatory" validatorMessage="Invalid email address!">
<f:validateRegex pattern="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" />
</h:inputText>
<h:outputLabel value="Country"/>
<h:selectOneMenu id="countryList" value="#{registrationBean.country}">
</h:selectOneMenu>
<h:outputLabel value='Credit Card #:'></h:outputLabel>
<h:inputText id='ccnumText' value='#{registrationBean.ccnum}'
required="true" requiredMessage="Credit Card # is mandatory">
<f:validateLength maximum="16"/>
</h:inputText>
<h:outputLabel value="Credit Card Type:"/>
<h:selectOneMenu id="cctypeList" value="#{registrationBean.cctype}">
</h:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="3" >
<h:outputLabel value='Expiration Date:'></h:outputLabel>
<h:selectOneMenu id="expMM" value="#{registrationBean.expMM}">
</h:selectOneMenu>
<h:selectOneMenu id="expYYYY" value="#{registrationBean.expYYYY}">
</h:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="2" style="vertical-align:middle;">
<h:outputLabel value='CVV:'></h:outputLabel>
<h:inputText id='CVVText' value='#{registrationBean.CVV}'
required="true" requiredMessage="CVV is mandatory" >
<f:validateLength maximum="4" minimum="3"/>
</h:inputText>
<h:outputLabel value='Credit Card Up-Limit:'></h:outputLabel>
<h:inputText id='ccuplmtText' value='#{registrationBean.ccuplmt}'
required="true" requiredMessage="CC Limit is mandatory">
</h:inputText>
<h:outputLabel value='Credit Card One-Time Limit:'></h:outputLabel>
<h:inputText id='translmtText' value='#{registrationBean.tranlmt}'
required="true" requiredMessage="One-Time Limit is mandatory">
</h:inputText>
</h:panelGrid>
<br/>
<br/>
<h:commandButton value='Register' action="#{registrationBean.register()}"></h:commandButton>
<h:outputLabel id="ConfirmationMessage" value="#{registrationBean.confirmationMessage}"/>
<br/>
<br />Registration Page
<br />Payment Page
</h:form>
</h:body>
Here's my CSS page:
body {
background-color: lightgray;
font-family:Verdana, sans-serif;
font-size:12px;
font-weight:bold;
color:#333333;}
h1 {
color: black;}
p {
color:black;}
input {
border-style:groove !important;}
table.panelGridA {
bottom: 0px; left: 0px; right: 0px; top: 0px;
width: 427px;}
table.panelGridB{
bottom: 0px; left: 0px; right: 0px; top: 0px;
width: 430px;}
table.panelGridC {
bottom: 0px; left: 0px; right: 0px; top: 0px;
width: 441px !important;}
.ui-selectonemenu-label{
width:100% !important;}
.ui-selectonemenu{bottom: 0px; left: 0px; right: 0px; top: 0px;
width: 441px !important;}