Text misaligns in IE

Posted by kingrichard2005 on Stack Overflow See other posts from Stack Overflow or by kingrichard2005
Published on 2011-02-07T22:48:20Z Indexed on 2011/02/07 23:25 UTC
Read the original article Hit count: 224

Filed under:
|
|
|

I have a ASP.net web page I'm working with, I didn't create it myself, with the following HTML code:

<DIV style="POSITION: absolute; TEXT-ALIGN: center; WIDTH: 1400px; TOP: 60px; LEFT: 125px">
<SPAN style="TEXT-ALIGN: center; FONT-SIZE: xx-large" id=labelInstructions>Some Text: <BR><BR></SPAN>
<TABLE style="WIDTH: 1200px" border=1 align=center>
    <TBODY>
        <TR>
            <TD><LABEL style="FONT-SIZE: x-large" for=FileUpload1>ENTER Path: </LABEL><INPUT id=FileUpload1 size=70 type=file name=FileUpload1></TD>
        </TR>
        <TR>
            <TD><SPAN style="COLOR: red; FONT-SIZE: medium" id=fileUploadError><BR><BR></SPAN></TD>
        </TR>
        <TR>
            <TD>
                <TABLE style="WIDTH: 1200px" border=1>
                    <TBODY>
                        <TR>
                            <TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT INSTRUCTIONS:</TD>
                            <TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>INSTRUCTION 1<BR>INSTRUCTION 2<BR></TD></TR>
                        <TR><TD></TD></TR>
                        <TR>
                            <TD style="WIDTH: 400px; FONT-SIZE: x-large" vAlign=top align=right>FILE CONTENT EXAMPLE:</TD>
                            <TD style="WIDTH: 850px; FONT-SIZE: x-large" vAlign=top align=left>EXAMPLE 1<BR>EXAMPLE 2<BR><BR></TD>
                        </TR>
                    </TBODY>
                </TABLE>
            </TD>
        </TR>
    </TBODY>
</TABLE>
</DIV>

When this html is displayed in IE, I notice that the alignment of the text in the cells in the inner table, i.e. the table that is in the third cell of the outer table, is distorted when zooming in and out on it. I have a fixed table setting in pixels instead of percentages, so I don't understand why this is an issue. I want the text in the cells to stay in the same position when zooming. The code must be manipulated from the code behind, so I cannot create a separate CSS file. Any help is appreciated.

Here are two examples to illustrate what I'm talking about:

Normal zoom at 100%:

enter image description here

Zoom at 75%:

enter image description here

Notice in the second image the two table cells at the bottom are slightly offset to the left.

UPDATE:

Yes, I understand, we will be implementing a new system in the near future. Obviously this is old and very non-standard, this was dropped in my lap when I started working with it. And we're coming up with plans for a new system to replace it, in the meantime, this is what I have to deal with.

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about html