An issue with multiple checkboxes displaying correctly.

Question

My company is converting our website to seam. We obviously have a number of existing pages we must convert and at least try to mimic the previous code. The page I'm currently working on is a catalog request form(see: http://www.perma-bound.com/CatalogRequestForm). I'm totally new to jsf's to an extent. I've done some coding in it while we shift to this but I'm far from an expert. I've been able to get the bean and all the code that interacts with the database to work correctly. My issue is that it's seemingly impossible to style selectManyCheckbox's in a manner similar to that page. When we were using standard html, it wasn't an issue because you could put <input>'s wherever you wanted. In the case of selectManyCheckbox's, they insert a table into the code which seemingly isn't alterable. Here's the snippet in question
<h:form>
     <h:selectManyCheckbox layout="pageDirection" value="#{ catalogRequestAction.catalogs }">
          <f:selectItem itemLabel="Perma-Picks - Grades PreK-12" itemValue="#{ catalogs[ 455164 ] }"/>
          <f:selectItem itemLabel="Graphic Novels - Grades 2-12" itemValue="#{ catalogs[ 455013 ] }"/>
          <f:selectItem itemLabel="Social Studies - Grades PreK-12" itemValue="#{ catalogs[ 455159 ] }"/>
          <f:selectItem itemLabel="References - Grades PreK-12" itemValue="#{ catalogs[ 455669 ] }"/>
          <f:selectItem itemLabel="High/Low - Grades 2-12" itemValue="#{ catalogs[ 455884 ] }"/>
          <f:selectItem itemLabel="Science & Math" itemValue="#{ catalogs[ 455160 ] }"/>
          <f:selectItem itemLabel="Fiction - Grades PreK-12" itemValue="#{ catalogs[ 455056 ] }"/>
          <f:selectItem itemLabel="Curriculum - Grades PreK-6" itemValue="#{ catalogs[ 455491 ] }"/>
          <f:selectItem itemLabel="English Curriculum - Grades 6-12" itemValue="#{ catalogs[ 455201 ] }"/>
          <f:selectItem itemLabel="Spanish - Grades 7-12" itemValue="#{ catalogs[ 455266 ] }"/>
          <f:selectItem itemLabel="College Prep - Grades 7-12" itemValue="#{ catalogs[ 455018 ] }"/>
          <s:convertEntity/>
     </h:selectManyCheckbox>
     <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
          <h:commandButton styleClass="ui-state-default ui-corner-all ui-priority-primary" value="Submit" action="#{ catalogRequestAction.requestCatalogs }"/>
          <h:commandButton styleClass="ui-state-default ui-corner-all ui-priority-secondary" value="Reset" action="reset"/>
     </div>
</h:form>That code generates this page(http://img299.imageshack.us/img299/6550/82163381.png). As I said before, the actual selection of the boxes will yield the appropriate catalog in the database. However, I seemingly can't figure out how to stylize this in a manner that will work. From my understanding, jsf has access to 2 sets of check boxes(the ones I used and the booleans). I'm more than willing to try alternate code. However, after hours of searching online I've found few if any examples that are doing something similar to what I'm trying to do. I have to imagine that there is some other way to do this because in normal html it is simple. But, I'm just not having any luck.
Edit: Oh and if it matters we're using Mojarra
Edited by: beckdawg on May 18, 2009 2:19 PM

Answer 1

I believe this is IE 9.  Whatever the latest is.  It basically stacks all the images on top of each other.  And after some changes I attempted last night, bevel effect is still on some images after I attempted to remove that effect.  This is an issue in all the browsers.
http://http://jclementdesign.businesscatalyst.com/graphic-design1.html
This is a link to my portfolio page of my website.  This is an issue with all the lightboxes.
Thanks for the help.