Microsoft KB Archive Search

Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

  1. Home
  2. BUG: When You Use the STYLE Tag to Change the Body Border, It Changes the Top Border of the Controls

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

View products that this article applies to.

This article was previously published under Q331959

↑ Back to the top

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.

↑ Back to the top

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>

↑ Back to the top

Status

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

↑ Back to the top

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.

↑ Back to the top

Keywords: KB331959, kbbug, kbcontrol, kbdesigner, kbhtml, kbwebforms, kblayout

↑ Back to the top

Article Info
Article ID : 331959
Revision : 5
Created on : 1/21/2004
Published on : 1/21/2004
Exists online : False
Views : 393