css底部边框不能正常工作?

时间:2012-04-16 13:34:18

标签: css

这是我的html文件,其中存储了一些客户详细信息

<html>
    <head>

        <link rel="stylesheet" type="text/css" href="css/Home.css" />
        <title>Customer</title>
    </head>
      <body>
            <form id="formId" jwcid="formId@Form" success="ognl:listeners.addCustomer">

                <table>
                         <h3 id="customerTab1">Customer Data</h3>
                         <!--TextField for taking customerId-->

                         <!--TextField for taking customerName-->
                         <tr>
                             <td><label id="customerlabel1">Customer Name:</label>
                             <input type="text" jwcid="@TextField" id="customername" value="ognl:customerName"/></td>
                         </tr>
                         <!--TextField for taking customerAddress-->
                         <tr>
                             <td><label id="customerlabel2">Customer Address:</label>
                                 <textarea rows="2" cols="20" jwcid="@TextArea" id="address" value="ognl:address"></textarea>
                             </td>
                         </tr>
                    </table> 
                        <h3 id="customerTab2" >Select Gender</h3>
                        <!--RadioGroup with Radio buttons to select Gender--> 

                            <span id="customerGender" jwcid="customerGender@RadioGroup" selected="ognl:customerGender">
                                <Input type="radio" name="customerGender" jwcid="@Radio" value="0"/><label id="customermale">Male</label>
                                <Input type="radio" name="customerGender" jwcid="@Radio" value="1" /><label id="customerfemale">Female</label>
                            </span>


                        <h3 id="customerTab3" >Select Service</h3>
                          <!--Checkbox to select Service--> 
                         <Input type="checkbox" id="customerPrivilege" jwcid="customerPrivilege@Checkbox" value="1" selected="ognl:customerPrivilege"/>
                         <label id="privilegecustomer">Privileged Customer</label>
                        <!--List to select PaymnetMode--> 
                        <h3 id="customerTab4">Customer List</h3>


                             <select>
                                 <span jwcid="@For" source='ognl:customerList' value='ognl:currentCustomerData' keyExpression="id">
                                     <option jwcid="@Any" value='ognl:currentCustomerData.id'><span jwcid="@Insert" value='ognl:currentCustomerData.customerName'></span></option>
                                 </span>
                             </select>
                            <!--Buttons to perform desired action-->
                             <input id="submitform" type="Submit" value="Add Customer" />

            </form>      

        </body>
</html>

 2. CSS code


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body
{
    margin: 17% 25%;

    border-width: 1em; 

    border-style: groove;
    border-color: orange;

    background-image:url('blue.BMP');

    background-repeat:no-repeat;
    background-position:50%;

    background-size:100%;

}
textarea {
    position: absolute;
    left: 48.2%;
    height: 5%;

    resize: none;
    width:12%;
    top: 34%;
}
#customerlabel1
{
    position: absolute;
    left: 34%;
    top: 30%;
    font-family:verdana;
    font-weight:bold;
}
#customerlabel2
{
    position: absolute;
    left: 34%;
    top: 34%;
    font-family:verdana;
    font-weight:bold;
}
#customername {
    position: absolute; 
    left: 48%;
    top: 29.5%;
}
#customerGender
{
    position: absolute; 
    left: 42%;
    top: 47%;
}
#customermale
{

    font-family:verdana;
    font-weight:bold;

}
#customerfemale
{

    font-family:verdana;
    font-weight:bold;

}
#customerPrivilege
{
    position: absolute; 
    left:40%;
    top: 57%;

}
#privilegecustomer
{
    position: absolute; 
    left: 42%;
    top: 57%;
     font-family:verdana;
    font-weight:bold;
}
#customerTab1 {
    position: absolute;
    left: 42%;
    top: 26%;
    background-color:fuchsia ;
    background-repeat: no-repeat;
    color: black;
    text-align: left;
    font-family: Arial;
    font-style:  normal;
    font-weight: 500;
    font-size: 1.5em;
}
#customerTab2 {
    position: absolute;
    left: 42%;
    top: 42%;
    background-color: fuchsia;
    background-repeat:  repeat-x;
    color: black;
    text-align: left;
    font-family: Arial;
    font-style:  normal;
    font-weight: 500;
    font-size: 1.5em;
}
#customerTab3 {
    position: absolute;
    left: 42%;
    top:  52%;
    background-color: fuchsia;
    background-repeat:  repeat-x;
    color: black;
    text-align: left;
    font-family: Arial;
    font-style:  normal;
    font-weight: 500;
    font-size: 1.5em;
}
#customerTab4 {
    position: absolute;
    top: 62%;
    left: 42%;
    background-color: fuchsia;
    background-repeat:  repeat-x;
    color: black;
    text-align: left;
    font-family: Arial;
    font-style:  normal;
    font-weight: 500;
    font-size: 1.5em;


}
select {
    position: absolute;
    left: 44%;
    top: 66%;
    font-family:verdana;
    font-weight:bold;
}
#submitform
{
    position: absolute ;
    left: 44%;
    top: 70%;

}

2 个答案:

答案 0 :(得分:1)

你的问题不是很清楚,但我猜你的问题是边框没有正确包装你的html的body。发生这种情况是因为您绝对将form内的所有元素放在body内。由于所有元素都是绝对定位的,因此主体的布局中实际上没有元素,因此浏览器的主体高度为0。

我建议重写你的css以避免表单元素的大部分绝对定位。

答案 1 :(得分:0)

你的问题不清楚(边框有哪些元素 - 只有适用于该元素的css类?),但一般情况下,如果对象是空的,某些浏览器将不会显示边框(没有可显示的内容) )。

要解决此问题,请在空对象中添加“空格”,例如:

<td>
</td>

将成为

<td>&nbsp;</td>