Microsoft KB Archive/331959

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

Article ID: 331959

Article Last Modified on 1/21/2004

-

APPLIES TO


 * Microsoft ASP.NET 1.1
 * Microsoft ASP.NET 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:  BODY { MARGIN-TOP: 10px } 

Use the topmargin property of the following BODY tag: 



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



Steps to Reproduce the Behavior
 Create a new ASP.NET Web Application by using Visual Basic .NET or Visual C# .NET. By default, WebForm1.aspx is created. In Design view, right-click WebForm1, and then click View HTML Source.  Delete the code in the HTML view, and then paste the following code: <%@ Page Language=&quot;vb&quot; AutoEventWireup=&quot;false&quot; Codebehind=&quot;WebForm1.aspx.vb&quot; Inherits=&quot;Braghetto.WebForm1&quot;%> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>   WebForm1 <meta content=&quot;Microsoft Visual Studio.NET 7.0&quot; name=&quot;GENERATOR&quot;> <meta content=&quot;Visual Basic 7.0&quot; name=&quot;CODE_LANGUAGE&quot;> <meta content=&quot;JavaScript&quot; name=&quot;vs_defaultClientScript&quot;> <meta content=&quot;http://schemas.microsoft.com/intellisense/ie5&quot; name=&quot;vs_targetSchema&quot;>  BODY { MARGIN-TOP: 1px } </STYLE> </HEAD> <body MS_POSITIONING=&quot;GridLayout&quot;> <form id=&quot;Form1&quot; method=&quot;post&quot; runat=&quot;server&quot;> <asp:TextBox id=&quot;TextBox1&quot; runat=&quot;server&quot; style=&quot;Z-INDEX: 101; LEFT: 28px; POSITION: absolute; TOP: 31px&quot; Height=&quot;26px&quot; Width=&quot;201px&quot;></asp:TextBox> </HTML> </li> Right-click HTML View, and then click View Design to switch back to Design view. Notice that the control appears as expected.</li> Switch back to HTML view, and then change the MARGIN-TOP property from 1 to 100.</li> Switch back to Design view. Notice that the top border of the control is unexpectedly large.</li> In Design view, try to resize the edge of the control. The size of the control suddenly increases by 100 pixels.</li></ol>

Keywords: kbbug kbwebforms kbdesigner kbhtml kblayout kbcontrol KB331959

-

[mailto:TECHNET@MICROSOFT.COM Send feedback to Microsoft]

© Microsoft Corporation. All rights reserved.