Question

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%:

Zoom at 75%:

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.

Answer 1

(1) There’s a problem with your nested table…

                    <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>

The format of this inner table is:

Row 1: Two cells.
Row 2: One cell.
Row 3: Two cells.

You need to have an extra td in row #2. (I’d say use colspan, but I’m not sure if IE does that correctly either.)

(2) I don’t know how to fix that, but my guess would be that it will require javascript or disabling of the zoom feature (last I heard, the latter is not possible, though. I could be wrong there.) I haven’t read the entire thing, but this MSDN article seems like a great place to start. It looks like you can detect the browser’s zoom factor. If it’s not equal to 1.0, you could try to get javascript to resize things in order to get the td’s to their intended location.

(3) It isn’t recommended that you use tables for content alignment. (I suppose this would be a good reason why.)