BUG: When You Use the STYLE Tag to Change the Body Border, It Changes the Top Border of the Controls (331959)


The information in this article applies to:

  • Microsoft ASP.NET (included with the .NET Framework 1.1)
  • Microsoft ASP.NET (included with the .NET Framework) 1.0
This article was previously published under Q331959

SYMPTOMS

When you try to change the margins of the body of an ASP.NET page by using a STYLE tag or a style sheet (.css), the border size of the server side controls changes. As a result, when you view the ASP.NET page in your browser, the relative position between HTML controls and server side controls changes. Also, when you try to resize the control in Design view, the size of the control increases unexpectedly. However, this behavior does not occur for HTML controls.

WORKAROUND

To work around this problem, use the properties of the BODY tag (such as topmargin and leftmargin), instead of using the style sheet to change the margins of the body. For example, to create a top margin of 10 pixels (px) in an ASP.NET page, do not use the following STYLE tag: 
<STYLE TYPE="text/css"> BODY { MARGIN-TOP: 10px } </STYLE>

Use the topmargin property of the following BODY tag:
<BODY topmargin= 10>

STATUS

Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

MORE INFORMATION

Steps to Reproduce the Behavior

  1. Create a new ASP.NET Web Application by using Visual Basic .NET or Visual C# .NET. By default, WebForm1.aspx is created.
  2. In Design view, right-click WebForm1, and then click View HTML Source.
  3. Delete the code in the HTML view, and then paste the following code:
    <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="Braghetto.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
		<meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
		<STYLE TYPE="text/css"> BODY { MARGIN-TOP: 1px } </STYLE>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<asp:TextBox id="TextBox1" runat="server" style="Z-INDEX: 101; LEFT: 28px; POSITION: absolute; TOP: 31px" Height="26px" Width="201px"></asp:TextBox>
		</form>
	</body>
</HTML>
  4. Right-click HTML View, and then click View Design to switch back to Design view. Notice that the control appears as expected.
  5. Switch back to HTML view, and then change the MARGIN-TOP property from 1 to 100.
  6. Switch back to Design view. Notice that the top border of the control is unexpectedly large.
  7. In Design view, try to resize the edge of the control. The size of the control suddenly increases by 100 pixels.
Modification Type:MajorLast Reviewed:1/21/2004
Keywords:kblayout kbWebForms kbhtml kbDesigner kbControl kbbug KB331959 kbAudDeveloper
©2004 Microsoft Corporation. All rights reserved.