HTML text field size with IE11 on Windows 8.1

Question

I am porting a web application that currently runs in IE6 and IE8, to run in IE11 on Windows 8.1.

The most serious compatibility issue is regarding the size (ie. length) of text fields. These are typically appearing several mm longer than they do in the older browsers, which throws many page formats out - eg. a three-part date field will overflow onto the next line.

It appears to me that the problem lies with the use of SIZE=n to specify field length in characters. It seems that this is inconsistent between IE8 and IE9 onwards, and it would have been preferable to use STYLE="WIDTH:npx" . Link: http://msdn.microsoft.com/en-us/library/ie/ff986079(v=vs.85)

I am trying to find a solution that avoids having to apply this change to potentially hundreds of fields.

I have so far investigated two possible solutions: (1) Remove the "x" (clear button) that IE11 puts in text fields, in case this was causing the size increase. Unfortunately, the recommended solution for this (setting ms-clear) will not work as the browser must run in Compatibility Mode. (2) Increase the window size. This helps with some of the fields, but not many, and gives rise to other undesirable screen format issues.

An example of a set of affected fields in HTML, together with the related CSS class definition, is as follows:

HTML:

<TABLE WIDTH="625" BORDER="0">
<!-- Column 1 --><COL WIDTH="100">
<!-- Column 2 --><COL WIDTH="115">
<!-- Column 3 --><COL WIDTH="102">
<!-- Column 4 --><COL WIDTH="93">
<!-- Column 5 --><COL WIDTH="40">
<!-- Column 6 --><COL WIDTH="20">
<!-- Column 7 --><COL WIDTH="137">
<TR>
    <TD>Date of Birth:</TD>
    <TD><INPUT TYPE="hidden" ID="DateOfBirth" NAME="DateOfBirth" SIZE="10" CLASS="clsText" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()">
                <INPUT ID="DateOfBirthDay" NAME="DateOfBirthDay" SIZE="2" CLASS="clsText" ONKEYUP="autoDateTab(this);" MAXLENGTH="2" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"> /
                <INPUT ID="DateOfBirthMonth" NAME="DateOfBirthMonth" SIZE="3" CLASS="clsText" ONKEYUP="autoDateTab(this);" MAXLENGTH="3" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"> /
                <INPUT ID="DateOfBirthYear" NAME="DateOfBirthYear" SIZE="4" CLASS="clsText" ONBLUR="validateField();" MAXLENGTH="4" ONFOCUS="resetFldFocusFlag()"></TD>
    <TD>Age Estimated?
    <INPUT TYPE="checkbox" NAME="AgeEstimated" ID="AgeEstimated" ONCLICK="AgeEstimatedEffects()" SIZE="1" VALUE="Y" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"></TD>
    <TD>App. Age or From:</TD>
    <TD><INPUT ID="ApparentAge" NAME="ApparentAge" MAXLENGTH="3" SIZE="3" CLASS="clsText" ONBLUR="validateField(); MoveFocusToAgeTo()" ONFOCUS="resetFldFocusFlag()"></TD>
    <TD>To:</TD>
    <TD><INPUT CLASS="clsText" ID="AgeTo" NAME="AgeTo" SIZE="3" MAXLENGTH="3" ONBLUR="validateField()" ONFOCUS="resetFldFocusFlag()"></TD>
</TR>
</TABLE>

CSS:

.clsText
{
    COLOR: black;
    BACKGROUND-COLOR: white;
    FONT-SIZE: 11px;
    FONT-FAMILY: 'Microsoft Sans Serif';
    TEXT-ALIGN: left;
    TEXT-DECORATION: none
}

All of the above fields defined with CLASS="clsText" are affected by this issue.

Any thoughts would be appreciated.

Answer 1

1. Specify the width of the columns in percentage

2. change the text boxes size definition by defining its size in percentage instead of fixed length. This can be achived by using style attribute inside input tag eg. style = "width:20%" instead of specifying it in pixels like the size = "4"

I know this will take some time to implement but will be a long term solution and will help in case of window resizing as well.