I making a jsp which ncludes 5 jsp’s all together. On my 4th one..it’s

Question

0

Asked: May 29, 20262026-05-29T05:46:28+00:00 2026-05-29T05:46:28+00:00

I making a jsp which ncludes 5 jsp’s all together. On my 4th one..it’s

0

I making a jsp which ncludes 5 jsp’s all together. On my 4th one..it’s operational but.. my design looks a lil clunky. Can you point out any suggestions to make it look better or cleaner? Any suggestions would be appreciated. Thanks

CSS

    table.det
{ }

 table.det td
 {
 border: none;

 }


fieldset.det 
{     
display:block;
float:left;

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:2px solid #CCCCCC;

}
 fieldset.det legend
   {
    padding:2px 5px;
    border:2px solid #CCCCCC;

   }

jsp:

<tr>
<th>
<span onclick="toggleDiv('filtering', 'filterImg')" style="cursor: hand;">Filters&nbsp;<img name="filterImg" src="../images/minus.gif" /></span>
</th>
</tr>
<tr>
<td>
<div id="filtering" style="display:block;">
    <table class ="det">
        <tr>
            <td>
    Workload Year:&nbsp;<select size="1" name="wYearSelect">
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option selected value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                       </select>
    Fiscal Year:&nbsp;<select size="1" name="wYearSelect">
                            <option value="2007">2007</option>
                            <option value="2008">2008</option>
                            <option value="2009">2009</option>
                            <option value="2010">2010</option>
                            <option value="2011">2011</option>
                            <option selected value="2012">2012</option>
                            <option value="2013">2013</option>
                            <option value="2014">2014</option>
                       </select>

    Condition Code:&nbsp;<select size="1" name="condCodeSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="2007">A</option>
                            <option value="2008">B</option>
                            <option value="2009">C</option>
                            <option value="2010">D</option>
                            <option value="2011">E</option>
                            <option value="2012">F</option>
                            <option value="2013">G</option>
                            <option value="2014">H</option>
                       </select>


    Customer:&nbsp;<select size="1" name="customerSelect">
                            <option selected value="">&nbsp;</option>
                                                       </select>

    Repair Facility:&nbsp;<select size="1" name="repFacSelect">
                            <option selected value="">&nbsp;</option>
                                                          </select><br/>
    Work Type:&nbsp;<select size="1" name="workTypeSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="10">Rebuild</option>
                            <option value="11">IROAN</option>
                            <option value="12">SOAR</option>
                            <option value="13">Special</option>
                       </select>
    Special Indicator:&nbsp;<select size="1" name="specIndSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="RST">RESET</option>
                       </select>
    WBS:&nbsp;<select size="1" name="wbsSelect">
                    <option selected value="">&nbsp;</option>
                                         <!-- etc -->
              </select> 
              <br/>
    Appropriation:&nbsp;<select size="1" name="appropSelect">
                            <option selected value="">&nbsp;</option>
                                                        </select>

    MWSLIN:&nbsp;<input type="text" name="mwslin" value=""/>
    Serial #:&nbsp;<input type="text" name="mwslin" value=""/>
    <input type="checkbox" name="include_carryover">Include Carryover</input>

</td></tr><tr><td>
    <fieldset>
        <legend>Standard Materiel filter structure here</legend>
    NSN:&nbsp;<input type="text" name="nsn" value=""/>
    TAMCN:&nbsp;<input type="text" name="tamcn" value=""/>
    PGD/Group:&nbsp;<input type="text" name="pgd" value=""/>
    SAC :&nbsp;<select size="1" name="condCodeSelect">
                            <option selected value="">&nbsp;</option>
                            <option value="2011">1</option>
                            <option value="2012">2</option>
                            <option value="2013">3</option>
                        </select>
    <br/>
    Nomenclature:&nbsp;<input type="text" name="nomen" value=""/>
    </fieldset>
    </td></tr><tr><td>
    <fieldset class="det">
        <legend>Source of Repair</legend>
        <input type="checkbox" name="sorCodes" value="A">MCA&nbsp;&nbsp;&nbsp;</input>
               </fieldset>
    <fieldset class="det">
        <legend>Schedule Type</legend>
        <input type="checkbox" name="schedType" value="1">Regular</input><br/>
        <input type="checkbox" name="schedType" value="2">Lot Job</input><br/>
        <input type="checkbox" name="schedType" value="3">Batch Job</input>
    </fieldset>
    <fieldset class="det">
        <legend>Workload Type</legend>
        <input type="checkbox" name="workloadType" value="1">SMC Workload</input><br/>
        <input type="checkbox" name="workloadType" value="2">Other Workload</input>
    </fieldset>
    <fieldset class="det">
        <legend>Closure Level</legend>
        <input type="checkbox" name="workloadType" checked value="1">Open</input><br/>
        <input type="checkbox" name="workloadType" value="1">Physically Complete</input><br/>
        <input type="checkbox" name="workloadType" value="2">Financially Complete</input>
    </fieldset>
</td></tr></table>
</div>
</td>
</tr>
<tr>
<td align="center">
<button name="Generate Report" value="Generate Report">Generate Report</button>
&nbsp;&nbsp;&nbsp;&nbsp;
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button>
</td>
</tr>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-29T05:46:29+00:00

At a first glance, getting rid of the tables would be somewhere to start if you can.

I am headed to work will look over it more thoroughly there.

Cheers!

EDIT – You could take out the border on your fieldset.det legend, it should cascade down from fieldset.det

On your div id=filtering, couldn’t you add the extra styling to the filtering id?

EDIT – Here is something I threw together, not saying it is ANYWHERE near perfect. It gives you a div layout and ways to easily change the layout through CSS. Also, check out this site for best form practices, http://blog.sherpawebstudios.com/2009/06/17/top-10-html-form-layout-best-practices/.

CSS:

#wrapper{ width: 1040; overflow:hidden; }
#filter {
    cursor: hand;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.formLabel {
    font-weight: bold;
    text-align: right;
    width: 160px;
    float: left;
}

.field {
    float: left;
}

.content:before,
.content:after {
    content: "";
    display:table;
}

.content:after {
    clear: both;
}
/*IE 6/7 */
.content { zoom:1;margin-bottom: 10px;}

.subset {
    float: left;
    margin: 0 15;
}

.subset div.formLabel {
    width:100px;
}

#generate {
    margin-right:15px;
}

HTML:

<div id = "wrapper" >
    <div id = "filter" class ="clearfix">
        <span onclick="toggleDiv('filtering', 'filterImg')">Filters&nbsp;<img name="filterImg" src="../images/minus.gif" /></span>
    </div>
    <div class = "content">
        <div class = "formLabel">
            Workload Year:&nbsp;
        </div>
        <div class = "field">
    <select size="1" name="wYearSelect">
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option selected value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Fiscal Year:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="wYearSelect">
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option selected value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Condition Code:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="condCodeSelect">
            <option selected value="">&nbsp;</option>
            <option value="2007">A</option>
            <option value="2008">B</option>
            <option value="2009">C</option>
            <option value="2010">D</option>
            <option value="2011">E</option>
            <option value="2012">F</option>
            <option value="2013">G</option>
            <option value="2014">H</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Customer:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="customerSelect">
            <option selected value="">&nbsp;</option>
        </select>
</div>
</div>
<div class = "content">
    <div class = "formLabel">
        Repair Facility:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="repFacSelect">
            <option selected value="">&nbsp;</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Work Type:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="workTypeSelect">
            <option selected value="">&nbsp;</option>
            <option value="10">Rebuild</option>
            <option value="11">IROAN</option>
            <option value="12">SOAR</option>
            <option value="13">Special</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Special Indicator:&nbsp;
    </div>
    <div class = "field">   
        <select size="1" name="specIndSelect">
            <option selected value="">&nbsp;</option>
            <option value="RST">RESET</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        WBS:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="wbsSelect">
            <option selected value="">&nbsp;</option>
        </select> 
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Appropriation:&nbsp;
    </div>
    <div class = "field">
        <select size="1" name="appropSelect">
            <option selected value="">&nbsp;</option>
        </select>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        MWSLIN:&nbsp;
    </div>
    <div class = "field">
        <input type="text" name="mwslin" value=""/>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Serial #:&nbsp;
    </div>
    <div class = "field">
        <input type="text" name="mwslin" value=""/>
    </div>
</div>
<div class = "content">
    <div class = "formLabel">
        Include Carryover:
    </div>
    <div class = "field">
        <input type="checkbox" name="include_carryover"></input>
    </div>
</div>
<div class ="content">
    <div class = "subset">
        <h3>Standard Material filter structure here</h3>

        <div class = "content">
            <div class = "formLabel">
                NSN:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="nsn" value=""/>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                TAMCN:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="tamcn" value=""/>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                PGD/Group:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="pgd" value=""/>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                SAC :&nbsp;
            </div>
            <div class = "field">
                <select size="1" name="condCodeSelect">
                    <option selected value="">&nbsp;</option>
                    <option value="2011">1</option>
                    <option value="2012">2</option>
                    <option value="2013">3</option>
                </select>
            </div>
        </div>
        <div class = "content">
            <div class = "formLabel">
                Nomenclature:&nbsp;
            </div>
            <div class = "field">
                <input type="text" name="nomen" value=""/>
            </div>
        </div>
    </div>
    <div class = "subset">
        <h3>Source of Repair</h3>
        <div class = "formLabel">
            MCA
        </div>
        <input type="checkbox" name="sorCodes" value="A"></input>
    </div>
    <div class = "subset">
        <h3>Schedule Type</h3>
        <div class = "formLabel">
            Regular
        </div>
        <input type="checkbox" name="schedType" value="1"></input><br/>
        <div class = "formLabel">
            Lot Job
        </div>
        <input type="checkbox" name="schedType" value="2"></input><br/>
        <div class = "formLabel">
            Batch Job
        </div>
        <input type="checkbox" name="schedType" value="3"></input>
    </div>
    <div class = "subset">
        <h3>Workload Type</h3>
        <div class = "formLabel">
            SMC Workload
        </div>
        <input type="checkbox" name="workloadType" value="1"></input><br/>
        <div class = "formLabel">
            Other Workload
        </div>
        <input type="checkbox" name="workloadType" value="2"></input>
    </div>
    <div class = "subset">
        <h3>Closure Level</h3>
        <div class = "formLabel">
            Open
        </div>
        <input type="checkbox" name="workloadType" checked value="1"></input><br/>
        <div class = "formLabel">
            Physically Complete
        </div>
        <input type="checkbox" name="workloadType" value="1"></input><br/>
        <div class = "formLabel">
            Financially Complete
        </div>
        <input type="checkbox" name="workloadType" value="2"></input>
    </div>
</div>

<button name="Generate Report" value="Generate Report" id="Generate">Generate Report</button>
<button name="Clear Criteria" value="Clear Criteria">Clear Criteria</button>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I making a jsp which ncludes 5 jsp’s all together. On my 4th one..it’s

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply