CODEWITHSUNDEEP
asp.nethtmlcss
kmarks2
kmarks2

Reputation: 4875

HTML <td> tag's style attribute is not respecting the setting of width

In the following snippet of code, the width percentage attribute of the td tag seems to be ignored in Firefox/IE, etc. So both "Password" and the textbox get half the row, which is a waste of space. Is there something flagrantly wrong with the below snippet:

<table align="center" width="80%" cellpadding="0" cellspacing="0" class="loginBg">
  <asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;">
    <tr>
       <td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%">Username</td>
       <td style="padding-right:0px;width:70%" align="left"><asp:TextBox id="txtUsername" runat="server" Width="90px" /></td>
       <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />
    </tr>
  </asp:Panel>
</table>

Also, I'm doing styles in line because this is a very bare page that is only used to populate an iframe in another web application.

Thanks in advance for any tips.

EDIT: Added some code to clarify context.

EDIT 2: I removed the asp:Panel and the width proportioning seems to work now...but only when the iframe or browser window is 300+ pixels wide. In really small browser windows/frames, it forces both s to be 50%. Truly bizaree.

Upvotes: 2

Views: 10789

Answers (4)

B H
B H

Reputation: 1878

I was having big problems with this in ASP.NET. Using a colgroup tag in the table resulted in a page source back from IIS WITHOUT that group. As you may guess the table just did what it wanted at that point. After figuring out the problem may have been needing the runat='server' attribute on colgroup as it was on the parent table, I encountered a no compile situation. What finally worked for me was a typical kludge of putting the desired cell widths on the tags of the first row. PROBLEM: The first real row of the table had cells that spanned columns so a dummy row was required. Now, how to hide that?

Set the table to have fixed width and layout style:

style="width: 800px; table-layout: fixed"

Then use a first row something like this for the least amount of code that seems to work (use widths that add up to your table width):

<tr id="DummyTableRow" style="line-height: 0px" runat="server">
  <td style="width: 200px; border: none">&nbsp;</td>
  <td style="width: 200px; border: none">&nbsp;</td>
  <td style="width: 400px; border: none">&nbsp;</td>
</tr>

So others don't bother trying them, a list of failed attempts:

This won't work or any combination of trying to do it with the td tags:

<tr runat="server" style="display: none">

This won't work or any combination of trying to do it with the td tags:

<tr runat="server"  visible="false">

This sort of worked, but left a blank row:

<tr runat="server" style="visibility: hidden">

Upvotes: 0

Nicholas Murray
Nicholas Murray

Reputation: 13533

It seems that ie and table widths don't play nicely together.

What you can do to enforce a minimum width for your table is to add an extra row to your table which spans all columns which has a width of the minimum size that you desire. This will then enforce your td percentages when the broswer is resized or your iframe is small.

Like so:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style>
    .min500
    {
        width: 500px;
        height: 1px;
    }
</style>
</head>
<body>
<form id="form1" runat="server">
    <table align="center" border="1" cellpadding="0" cellspacing="0" class="loginBg">   
        <asp:Panel runat="server" ID="pnlLoginIn" style="width:100%;">     
            <tr>     
                <td colspan="2">
                    <div class="min500"></div>
                </td>  
            </tr>
            <tr> 
                <td style="padding-left:0px;font-family:Verdana;font-size:70%;width:30%;">
                    Username
                </td>        
                <td style="padding-right:0px;width:70%;" align="left">&nbsp;
                <asp:TextBox id="txtUsername" runat="server" Width="90px" /></td>        
                <asp:RequiredFieldValidator ID="rfvUserName" runat="server" ErrorMessage="*" ControlToValidate="txtUsername" ValidationGroup="credentials" Display="Dynamic" />     
            </tr>   
        </asp:Panel> 
    </table> 
</form>

Upvotes: 3

codeulike
codeulike

Reputation: 23064

Shouldn't the <asp:RequiredFieldValidator> be inside one of the <td>s?

edit: And the <asp:Panel> between the <table> and the <tr> probably isn't helping. That is, you shouldn't have extra controls/tags in your table that arent supposed to be there. Something like an <asp:Panel> should either wrap the whole table or be inside one of the <td>s.

edit: in short, the tags as arranged will generate invalid html and so all styling bets are off.

Upvotes: 2

Chains
Chains

Reputation: 13157

For one thing, put your validator inside a <td>.

Secondly -- check for width settings in other rows' <td> styles -- you might have conflicts.

Does it happen if you take the textbox out?

Upvotes: 2

Related Questions