Вопросы относительно применения CSS к h: panelGrid

Question

Надеюсь, у вас все будет хорошо.На самом деле я разработал страницу, на которой я использую h: panelGrid.Я также применил класс Css к нему. Вот мой код

<h:panelGrid columns="3"
             border=""
             width="20%"
             style="position: absolute; top: 50px;"
             columnClasses="asteriskColumns, nameColumns" >

    <h:outputText value="*" />
    <h:outputText value="Map: " />
    <p:fileUpload id="uploadMapImage"
                  description="Image"
                  update="messages"
                  allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                  auto="true"
                  fileUploadListener="#{cityDetail.imageUpload}" >


     </p:fileUpload>

     <h:outputText value="*" />
     <h:outputText value="Image1: " />
     <p:fileUpload id="uploadImage1"
                   description="Image"
                   update="messages"
                   allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                   auto="true"
                   fileUploadListener="#{cityDetail.imageUpload}" >


     </p:fileUpload>

     <h:outputText value="*" />
     <h:outputText value="Image2: " />
     <p:fileUpload id="uploadImage2"
                   description="Image"
                   update="messages"
                   allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
                   auto="true"
                   fileUploadListener="#{cityDetail.imageUpload}" >

     </p:fileUpload>

 </h:panelGrid>

До сих пор все в порядке.Но тогда я сделал еще один h: panelGrid, и теперь я поместил кнопку внутри каждой сетки.Вот так

<h:panelGrid columns="4"
             cellpadding="5"
             border=""
             style="position: absolute; top: 200px;"
             columnClasses="ButtonStyle, ButtonStyle, ButtonStyle, ButtonStyle" >

    <h:commandButton type="button"
                     label="Preview"
                     value="Preview"
                     action="#{cityDetail.preview}"
                     style="color: white;
                            background-color: transparent;
                            border: 1;
                            border-width: thick ;
                            padding-left: 16%; "/>

    <h:commandButton type="button"
                     label="save"
                     value="Save"
                     actionListener="#{cityDetail.sendImagesToDatabase}"
                     action="#{cityDetail.save}"
                     style="color: white;
                            background-color: transparent;
                            border: transparent;
                            padding-left: 22%;
                            cursor:pointer"/>

     <h:commandButton type="button"
                      label="cancel"
                      value="Cancel"
                      action="#{cityDetail.cancel}"
                      style="color: white;
                             background-color: transparent;
                             border: 0;
                             padding-left: 16%;
                             cursor:pointer"/>

     <h:commandButton type="button"
                      label="remove"
                      value="Remove"
                      action="#{cityDetail.remove}"
                      style="color: white;
                             background-color: transparent;
                             border: 0;
                             padding-left: 16%;
                             cursor:pointer"/>

 </h:panelGrid>

Вот мой ButtonStyleClass

.ButtonStyle {

width:68px; height:32px;background:#0d5b7f; color:#FFF;
cursor:pointer;-moz-border-radius: 11px; -webkit-border-radius: 11px;
behavior: url(../PIE/PIE.htc)

}

Теперь, что происходит.У меня только один ряд.Так что, если я использую это

<h:panelGrid columns="4"
             cellpadding="5"
             border=""
             style="position: absolute; top: 200px;"
             rowClasses="ButtonStyle" >

, тогда Css не применяется.Почему?

Второй с синтаксисом

columnClasses = "ButtonStyle, ButtonStyle, ButtonStyle, ButtonStyle">

Классы, примененные к столбцу, а не к элементувнутри колонны.Я хочу сказать, что я положил кнопку в первом столбце.Если я не применяю стиль к своей кнопке, то на кнопке нет Css.Вот почему я применил стиль к своей кнопке.Существуют ли какие-либо методы, которые css напрямую применяет к элементам внутри столбца, а не к столбцам?

В-третьих, я использовал такой стиль, как этот

style="color: white;
       background-color: transparent;
       border: transparent;
       padding-left: 22%;
       cursor:pointer"

Если я создал отдельный файл, а те применяют styleClass какthis

<h:commandButton type="button"
                 label="save"
                 value="Save"
                 actionListener="#{cityDetail.sendImagesToDatabase}"
                 action="#{cityDetail.save}"
                 styleClass="style"/>



.style {

    color: white;
    background-color: transparent;
    border: transparent;
    padding-left: 22%;
    cursor:pointer"

}

Тогда все отлично работает, кроме "border: transparent;"почему?

Кнопка показывает границу вокруг нее.Почему он работает со стилем, а не с styleClass

Спасибо