Positioning buttons in JSF pages

[Christopher Sharp]

Hello,

I am having a lot of trouble positioning buttons in the correct locations in JSF pages. I have a number of pages containing various input controls, and want to position buttons in them. The first example is on the home page where I need to position the button labeled "?" in the upper right corner of the fieldset containing a table of inputs fields that the user enters. I have a number of PrimeFaces components, and in this example I am using <p:fieldset>

Below is the code, but the only way I can position the button in the container using an inline style is to use negative values. which does not make sense. I tried specifying a postion relative to the right, such as 0px, but the button is shown on the left. What on earth is happening? I am using Firefox.

<h:form id="indexForm" prependId="false">
  <h:panelGrid columns="1" style="margin-left:auto; margin-right:auto">
    <h:outputText
      value="Warning: You are using Internet Explorer. The Simulator may not work properly with some versions of this browser.<br/><br/>" 
      escape="false" rendered="#{fn:containsIgnoreCase(request.getHeader('User-Agent'),'MSIE')}" style="color:red;font-weight:bold"/>
        
    <p:fieldset legend="Computation:" style="text-align:left">
      <h:commandButton type="button" value="?" onclick="window.open('http://phoenix.ens-lyon.fr/Grids/README','_blank',
        'width=720, height=900')" styleClass="queryButton" style="position:relative; top:-20px; right:-800px"/>
      <h:panelGrid columns="7" styleClass="ptable" style="margin-left:auto; margin-right:auto;">

<!-- The rest of the code in the panelGrid -->

      </h:panelGrid>
    </p:fieldset>
  </h:panelGrid>

<!-- More code -->

</h:form>

The color, appearance and style of the text on the buttons are specified in an external file with the following code:

input.queryButton {background-color:#66FFAA; font-size:2em; font-weight:bold; width:40px; height:40px; border-radius:20px}
input.queryButton:hover {background-color:#FF33CC;}
input.queryButton:active {background-color:#FFFF00;}

This works correctly, but I want the individual buttons to be at various positions using inline styles. Each button invokes some JavaScript to open a popup, and that all works correctly.

If someone can kindly give me some advice, I would be most grateful.