2012-04-16 67 views
-2

這是存儲一些客戶詳細信息css底部邊框無法正常工作?

<html> 
    <head> 

     <link rel="stylesheet" type="text/css" href="css/Home.css" /> 
     <title>Customer</title> 
    </head> 
     <body> 
      <form id="formId" jwcid="[email protected]" 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="[email protected]" 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="[email protected]" 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%; 

} 
+0

有人請回答這個問題..在除firefox和IE以外的每個瀏覽器中工作8 – surajR 2012-04-16 13:39:32

+1

http://sscce.org/應該提供 – fcalderan 2012-04-16 13:40:56

+1

您不是單獨設置邊框底部,只是邊界四面八方。您沒有指定應顯示哪個邊框以及如何顯示。該代碼既不是一個工作頁面,也不是構建用於演示問題的最小文檔。 – 2012-04-16 13:43:57

回答

0

你的問題還不清楚我的HTML文件(是有問題什麼元素邊界 - 只有CSS類適用於該元素),但在一般情況下,一些瀏覽器如果對象爲空(不包含可顯示的內容),則不顯示邊框。

爲了解決這個問題,提出了「空間」在空的對象,例如:

<td> 
</td> 

將成爲

<td>&nbsp;</td> 
+0

但沒有空物件..仔細閱讀代碼...嘗試在你的機器上..它工作得很好所有的瀏覽器,但不是在Firefox和IE – surajR 2012-04-16 13:46:58

+0

@surajR如果你有IE9安裝你可以按F12,看看CSS應用於該特定對象(通過單擊該對象)它將顯示所有繼承的CSS代碼,也可以取消值以查看它是如何更改的 – Ozzy 2012-04-16 13:51:39

+0

我正在使用不支持iE9的Windows XP ..所以請告訴我一些可靠的替代方案 – surajR 2012-04-17 06:21:00

1

這不是從你的問題很清楚,但我猜你的問題是,邊框沒有正確包裝你的html的body。這是因爲你絕對將form中的所有元素定位在body之內。由於所有元素都是絕對定位的,所以實際上沒有任何元素位於主體的佈局中,因此瀏覽器給出的主體高度爲0.

我建議重寫您的css以避免大多數表單元素的絕對位置。

+0

如果我定位身體絕對? – surajR 2012-04-19 09:15:21

+0

@surajR這不會有什麼區別。 – 2012-04-19 12:56:24