Having troubles setting the appearance of a web control

Question

hi

I'm trying to set the appearance of a Login web control, but I'm having quite a few problems. As far as I can tell, I've set everything correctly, but for some reason control still isn't displayed correctly:

a) The width of the two TextBox controls ( with IDs UserName and Password ) should be equal to 70% of table's width, but it isn't, even though I've set their width attributes. Any idea why that is?

b) If table cells containing lblPassword and lblPassword controls have their text-align property set to center, then lblPassword and lblPassword overflow. Why is 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 is telling the browser that the span should be 70% smaller than the TD. The only element telling the TD what width it should be is a span, that span wants to be 70% smaller than the TD. So the TD just ends up using the text inside the span to tell how big it should be.

Then that’s different behavior than my example with textboxes, since as far as I understand your argument, in the above case the span element ( ie text inside a span ) was rendered using its default width, while TD adapted its width to be 70 % bigger than span’s default width?! But in case of TextBox controls, the width used for TextBoxes controls wasn’t their default width D, but instead their width was also reduced ( let’s call this reduced TextBox’s width W ), so TD wasn’t 70% bigger than D, but instead TD was 70% bigger than W ( where W < D )?! But how did browser come up with width W?

Now the TD on the right wants to be 70% of the width of the row (TR) which is the same width as the TABLE. In this case, the TD on the left determines the end size of the table, since its contents should make up 30% of the width of the table.

Why do you say the element on the left determines the size of the table? Don’t both the left and the right TDs determine the final size of a table?

thanx mate

SECOND EDIT:

a) I understand that the two cells should have sizes relative to each other, but I’m not sure I understand how 55px / 30% * 70% gives us the correct result? If anything, shouldn’t formula be 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) What if the span elements in these two cells didn’t have equal widths? How would browser then calculate the width of the two cells?

c) I assume that if table had a width specified, then the widths of two cells wouldn’t be relative to each other, but relative to the width of the table?

Thanx mate

THIRD EDIT:

A) As far as I understand your explanation, the browser calculates the widths of the two cells in the following way:

• The left cell has its width set to 30% of some value and formula55px * 100% / 30% = 183px* tells us that the width of a left cell ( which is 55px ) is 30% of 183px.

• That also means that right cell has width equal to 70% of 183px, which is 183 * 70% / 100% = 124px. Thus the widths of left and right columns are 30% of 183px and 70% of 183px, respectively.

B) But I thought that the term you used in your explanation --> “widths of left and right cells should be relative to each other” <-- meant that browser should compute the widths in one of the following two ways:

a) the width of left cell should be 30% of right cell’s width. Since left cell has a width of 55px, where 55px represents 30% of right cell’s width, then the width of right cell would be 55px * 100% / 30% = 183 px

            OR

b) the width of right cell should be 70% of left cell’s width. Since right cell has a width of 55px, where 55px represents 70% of left cell’s width, then the width of left cell would be 55px * 100% / 70% = 78px

Answer 1

When the width is set to 70% on the textbox, it is telling the browser that element should be 70% of the width of its container - in this case the TD. What you should do instead is set the width of the TD to 70%, then the textbox width to 100%. Like this:

<td style="width: 70%;">
    <asp:TextBox ID="UserName" Width="100%" runat="server"></asp:TextBox>
</td>

Do that for the labels too.

---

To answer the comments:

Consider the order of events that the browser uses to determine the size of the TD. If you have the 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 is telling the browser that the span should be 70% smaller than the TD. The only element telling the TD what width it should be is a span, that span wants to be 70% smaller than the TD. So the TD just ends up using the text inside the span to tell how big it should be.

Switching to 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 the TD on the right wants to be 70% of the width of the row (TR) which is the same width as the TABLE. In this case, the TD on the left determines the end size of the table, since its contents should make up 30% of the width of the table.

---

Edit 2

The browser will try to interpret the HTML and display what it thinks the HTML is trying to do, this is because so frequently HTML is poorly formed. Code like this makes no sense <td><span style="width: 70%;">ASDF</span></td> since the span says it wants to be 70% smaller than the TD, but the TD has no specified size. Because it has no specified size it gets its size from its contents. In the end, the span's width value is ignored. You can see that all these things result in the 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 is a simplified version of what the browser is doing for this:

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

• Found a TD
• TD has no width, its TR and TABLE have no width set either so need to determine width based on contents.
• Contents is SPAN
• SPAN has 70% width so the SPAN should be 70% of the width of the TD (remember this for later)
• SPAN contains plain text, draw text and measure width, let's say it comes out to 55 pixels.
• Tell SPAN its width should be a mimimum of 55 pixels (since overflow property is not set).
• Which value is greater? 55 pixels or 70% of the width of the TD? 55 pixels > undefined
• Set SPAN's width to 55 pixels
• Set TD width to 55 pixels

At this point the browser will walk back down the HTML since a parent width was set, this would be the second pass at figuring out the size of elements.

• TD has a width of 55 pixels
• SPAN has 70% width so the SPAN should be 70% of the width of the TD
• Which value is greater? 55 pixels or 70% of the width of the TD? 55 pixels > 39 pixels
• Keep SPAN's width at 55 pixels
• Check text's width, no changes
• Check SPAN's width, no changes
• Check TD's width, no chagnes

So at this point the browser has walked down the HTML and then back out to the TD, made a change, then back down and out again.

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

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

Each TD figures out its width separately and result in 55px each because there is nothing telling the TDs that they should have sizes relative to each other.

Switch to the following code and suddenly each TD will have a width of 55px, but then the style informs the browser that they should be relative to each other. So the right column gets some extra pixels and ends up at 55px / 30% * 70% = 128 pixels

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

Why is the browser using the left column to determine the size of the right column? Simple browsers would calculate it both ways and figure out which way still adheres to the minimum width the TD is specifying. This calculation would result in a left column width that is smaller than the minimum width necessary for its contents: 55px / 70% * 30% = 24 pixels

---

To answer your second edit, a/b - the browser usually has to calculate it both ways then determines which way makes more sense given the constraints. It likely has complex algorithms to determine if it really needs to see if you mean 30% is the constraint on the left or is 70% is the determining constraint on the right. Also, if you multiply something by 100%, it doesn't change since it is the same as multiplying something by 1. So 55px * 100% / 30% (or 55 * 1 / 0.3) is the same as 55px / 30% (or 55 / 0.3).

You should consider approaching these types of problems in a different manner. After building your HTML, you need to be explicit in what the browser should do with size and spacing if the default is not what you want. If you just set something to 30%, you likely aren't giving the browser enough information to make consistent choices. Even thought there is an HTML specification that says what should happen, it isn't always clear. And different browsers implement it differently since there can be 100s of steps the browser goes through to lay out a page.

In your original example, for instance, the label and textbox should have pixel widths to fit properly in your graphic design if the default sizes are not sufficient. Doing anything else is leaving it up to the browser to figure it out because the html elements lack enough context to be consistent.

To play around with what browsers do in different scenarios, just try making a little html page that strips away everything you are not testing. Then adjust one thing after another till it makes sense, that is the only way to learn something as complicated as table layout in a browser. If something occurs that is opposite of what you think should happen, post the example in a new question on this site and someone will point you to the HTML spec that explains what should happen. I recommend this site: http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables