CODEWITHSUNDEEP
c#htmlasp.netcss
Brian Hooper
Brian Hooper

Reputation: 22064

Spurious space created after TextBox

I am creating some TextBox controls on my ASP.Net page in the code-behind, and I am finding that spurious space is appearing after the controls in the result. The ASP.Net looks like this:-

<asp:Table runat="server" id="ControlsTable" BackColor="Orange"></asp:Table>

(I have set the colours to something garish to show the results more clearly.) The code that creates them is as follows:-

TableRow  table_row  = new TableRow();
TableCell table_cell = new TableCell();
Label     new_label  = new Label(); 
new_label.Text       = //Some text
table_cell.Controls.Add(new_label);
table_row.Controls.Add(table_cell);
table_cell           = new TableCell();
TextBox text_box     = new TextBox();
text_box.ID          = //Give it an ID
text_box.CssClass    = "textInput";
text_box.MaxLength   = 10;
text_box.Attributes.Add("onkeyup", "validate_everything()");
text_box.Attributes.Add("autocomplete", "off");
text_box.BackColor   = OK_COLOUR;
table_cell.Controls.Add(text_box);
table_row.Controls.Add(table_cell);
ControlsTable.Controls.Add(table_row);

iterated a number of times. The CSS class for this text control looks like this:-

.textInput
{
    font-family:Times New Roman;
    font-size:medium;
    max-width:100px;
}

The resulting display shows about half-an-inch of fresh air is being added to the right of the text box:-

Table with space on the right of textboxes

The HTML as created looks like this:-

<table id="ControlsTable" style="background-color:Orange;">
  <tr><td>
    <span>AlSol</span>
  </td><td>
    <input name="Text_AlSol"
           type="text"
           value="0"
           maxlength="10"
           id="Created_ID"
           class="textInput"
           onkeyup="validate_everything()"
           autocomplete="off"
           style="background-color:White;" />
  </td></tr>

Does anyone know what is causing this, and what I can do about it? I have found that fiddling with the width of the text box in the CSS allows me to widen and shrink the textbox, but the width of the orange bit remains the same (the text box cannot be made any wider than this).

Edit This is using Internet Explorer 8 running on Windows XP.

Upvotes: 0

Views: 204

Answers (1)

xec
xec

Reputation: 18024

It seems IE8 has issues with max-width on the <input>.

If you change it to width instead, the extra spacing disappears.

.textInput {
    font-family: "Times New Roman";
    font-size: medium;
    width: 100px;
}

Looks like a IE8 quirk to me. http://jsfiddle.net/nRrsA/6/show

Upvotes: 1

Related Questions