Problem rendering a 100% width textbox on IE using XHTML 1.0 stand

G

Guest

Hello all,

I've created the following ASP.NET code sample which, when rendered,
displays a 100% textbox within a single cell table. The problem is that
Internet Explorer (6 or 7) truncates the right-hand edge of the textbox. The
textbox renders correctly on Firefox and Netscape.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb"
Inherits="Content_test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="frmMyForm" runat="server">
<table style="width: 100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<asp:TextBox ID="txtMyText" runat="server"
Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html>

However, if the following DOCTYPE tag is used instead of the XHTML one
above...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

.... then IE renders the textbox correctly also.

Can anyone tell me why this happens? Why is the textbox rendered
differently between the two standards and why does only IE have the problem?

XHTML 1.0 appears to be the default DOCTYPE tag added to all .aspx pages (in
VS 2005/.NET 2.0), so I assume this is the latest standard we should be using.

Is there anything that can be done to make XHTML 1.0 work with IE so that
the textbox will display how I expect it to?

Any help appreciated.

Thanks,
Wayne.
 
B

bruce barker

please read about w3c standards especially widths. setting xhtml set IE
in strict mode where it tries to follow the standards.

the main point to understand is when you set the width of an html
element, you are setting the width of the content. the border and margin
are outside the content.

in your case you are setting a textbox width to its parent width, but
the margin and border cause it to be offset. then the right hand side
overflows the parent. in strict mode IE truncates (overflow:hidden), in
non-strict it resizes the parent.

-- bruce (sqlwork.com)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,073
Latest member
DarinCeden

Latest Threads

Top