asp.net - Having troubles setting the appearance of a web control -

i'm trying set appearance of login web control, i'm having quite few problems. far can tell, i've set correctly, reason control still isn't displayed correctly:

a) width of 2 textbox controls ( ids username , password ) should equal 70% of table's width, isn't, though i've set width attributes. idea why is?

b) if table cells containing lblpassword , lblpassword controls have text-align property set center, lblpassword , lblpassword overflow. why that?

    <div id="loginbox">        <asp:login id="login1" runat="server" width="100%" failureaction="redirecttologinpage"                     remembermeset="false">                     <layouttemplate>                         <table>                             <tr>                                 <td style="padding:6px;text-align:center;">                                     <asp:label id="lblusername" width="30%"  runat="server" text="username "></asp:label>                                 </td>                                 <td>                                     <asp:textbox id="username" width="70%" runat="server"></asp:textbox>                                 </td>                             </tr>                             <tr>                                 <td style="padding:6px;text-align:center;" >                                     <asp:label id="lblpassword" width="30%" runat="server" text="password "></asp:label>                                 </td>                                 <td>                                     <asp:textbox id="password" width="70%" runat="server"></asp:textbox>                                 </td>                             </tr>                         </table>                     </layouttemplate>                 </asp:login> 

  #loginbox   {       position: absolute;       top: 16px;       right: 30px;       width: 180px;       height: 80px;       padding: 2px 2px 2px 2px;           font-size: 9px;       margin:0px;   } 

much appreciated

edit:

this code telling browser span should 70% smaller td. element telling td width should span, span wants 70% smaller td. td ends using text inside span tell how big should be.

then that’s different behavior example textboxes, since far understand argument, in above case span element ( ie text inside span ) rendered using default width, while td adapted width 70 % bigger span’s default width?! in case of textbox controls, width used textboxes controls wasn’t default width d, instead width reduced ( let’s call reduced textbox’s width w ), td wasn’t 70% bigger d, instead td 70% bigger w ( w < d )?! how did browser come width w?

now td on right wants 70% of width of row (tr) same width table. in case, td on left determines end size of table, since contents should make 30% of width of table.

why element on left determines size of table? don’t both left , right tds determine final size of table?

thanx mate

second edit:

a) understand 2 cells should have sizes relative each other, i’m not sure understand how 55px / 30% * 70% gives correct result? if anything, shouldn’t formula 55 * 100% / 30 % ( here 55px represents 30% of right cell’s width) or 55 * 100% / 70% ( here 55px represents 70% of left cell’s width) ?!

b) if span elements in these 2 cells didn’t have equal widths? how browser calculate width of 2 cells?

c) assume if table had width specified, widths of 2 cells wouldn’t relative each other, relative width of table?

thanx mate

third edit:

a) far understand explanation, browser calculates widths of 2 cells in following way:

• the left cell has width set 30% of value , formula55px * 100% / 30% = 183px* tells width of left cell ( 55px ) 30% of 183px.

• that means right cell has width equal 70% of 183px, 183 * 70% / 100% = 124px. widths of left , right columns 30% of 183px , 70% of 183px, respectively.

b) thought term used in explanation --> “widths of left , right cells should relative each other” <-- meant browser should compute widths in 1 of following 2 ways:

a) width of left cell should 30% of right cell’s width. since left cell has width of 55px, 55px represents 30% of right cell’s width, width of right cell 55px * 100% / 30% = 183 px

            or 

b) width of right cell should 70% of left cell’s width. since right cell has width of 55px, 55px represents 70% of left cell’s width, width of left cell 55px * 100% / 70% = 78px

when width set 70% on textbox, telling browser element should 70% of width of container - in case td. should instead set width of td 70%, textbox width 100%. this:

<td style="width: 70%;">     <asp:textbox id="username" width="100%" runat="server"></asp:textbox> </td> 

do labels too.

---

to answer comments:

consider order of events browser uses determine size of td. if have following:

<html> <body> <table border="1">     <tr>          <td><span style="width: 30%;">asdf</span></td>          <td><span style="width: 70%;">asdf</span></td>     </tr> <table> </body> </html> 

this code telling browser span should 70% smaller td. element telling td width should span, span wants 70% smaller td. td ends using text inside span tell how big should be.

switching this:

<html> <body> <table border="1">     <tr>          <td style="width: 30%;"><span>asdf</span></td>          <td style="width: 70%;"><span>asdf</span></td>     </tr> <table> </body> </html> 

now td on right wants 70% of width of row (tr) same width table. in case, td on left determines end size of table, since contents should make 30% of width of table.

---

edit 2

the browser try interpret html , display thinks html trying do, because html poorly formed. code makes no sense <td><span style="width: 70%;">asdf</span></td> since span says wants 70% smaller td, td has no specified size. because has no specified size gets size contents. in end, span's width value ignored. can see these things result in same output:

<td><span style="width: 1%;">asdf</span></td> <td><span style="width: 70%;">asdf</span></td> <td><span style="width: 200%;">asdf</span></td> 

here simplified version of browser doing this:

<td><span style="width: 70%;">asdf</span></td> 

• found td
• td has no width, tr , table have no width set either need determine width based on contents.
• contents span
• span has 70% width span should 70% of width of td (remember later)
• span contains plain text, draw text , measure width, let's comes out 55 pixels.
• tell span width should mimimum of 55 pixels (since overflow property not set).
• which value greater? 55 pixels or 70% of width of td? 55 pixels > undefined
• set span's width 55 pixels
• set td width 55 pixels

at point browser walk down html since parent width set, second pass @ figuring out size of elements.

• td has width of 55 pixels
• span has 70% width span should 70% of width of td
• which value greater? 55 pixels or 70% of width of td? 55 pixels > 39 pixels
• keep span's width @ 55 pixels
• check text's width, no changes
• check span's width, no changes
• check td's width, no chagnes

so @ point browser has walked down html , out td, made change, down , out again.

the same kind of process occurs when figuring out width of multiple cells in row. in example:

<tr> <td><span style="width: 30%;">asdf</span></td> <td><span style="width: 70%;">asdf</span></td> </tr> 

each td figures out width separately , result in 55px each because there nothing telling tds should have sizes relative each other.

switch following code , each td have width of 55px, style informs browser should relative each other. right column gets pixels , ends @ 55px / 30% * 70% = 128 pixels

<tr> <td style="width: 30%;"><span>asdf</span></td> <td style="width: 70%;"><span>asdf</span></td> </tr> 

why browser using left column determine size of right column? simple browsers calculate both ways , figure out way still adheres minimum width td specifying. calculation result in left column width smaller minimum width necessary contents: 55px / 70% * 30% = 24 pixels

---

to answer second edit, a/b - browser has calculate both ways determines way makes more sense given constraints. has complex algorithms determine if needs see if mean 30% constraint on left or 70% determining constraint on right. also, if multiply 100%, doesn't change since same multiplying 1. 55px * 100% / 30% (or 55 * 1 / 0.3) same 55px / 30% (or 55 / 0.3).

you should consider approaching these types of problems in different manner. after building html, need explicit in browser should size , spacing if default not want. if set 30%, aren't giving browser enough information make consistent choices. thought there html specification says should happen, isn't clear. , different browsers implement differently since there can 100s of steps browser goes through lay out page.

in original example, instance, label , textbox should have pixel widths fit in graphic design if default sizes not sufficient. doing else leaving browser figure out because html elements lack enough context consistent.

to play around browsers in different scenarios, try making little html page strips away not testing. adjust 1 thing after till makes sense, way learn complicated table layout in browser. if occurs opposite of think should happen, post example in new question on site , point html spec explains should happen. recommend site: http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables