hi i created a master page and i formatted it for the height and with, it is displayed correctly in the asp.net design page, but when i view it in the internet explorar i get a white space in between the menu and the body part.
i can't find the reason why it is not formatting properly
i have attached the master page code below
<head runat="server">
<title></title>
<link href="../../Content/StyleSheet.css" rel="Stylesheet" type="text/css" media="screen" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="MaterForm">
<div id="MaterHeader">
<div id="MaterHeaderL">
<asp:Image ID="Image1" runat="server" Height="71px" ImageAlign="Right" ImageUrl="~/Content/Images/EPIR logo.jpg"
Width="111px" />
</div>
<div id="MaterHeaderR">
<h2 class="style">
EPIR Technologies<br />
Online Purchase Order Application</h2>
</div>
</div>
<div id="MasterMenu">
<div class="MasterMenuButton" style="float: right;">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/View/Account/Login.aspx">Login</asp:HyperLink>
</div>
</div>
<div id="MasterBody">
<div id="MasterBodyContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="MaterFooter">
<div id="MaterFooterL">
</div>
<div id="MaterFooterR">
<div style="float: left; width: 790px; height: 60px;">
<p>
EPIR Technologies Inc
<br />
590 Territorial Drive, Unit B, Bloingbrook, IL 60440
<br />
1-630-771-0203
</p>
</div>
<div style="float: right; width: 10px; height: 60px;">
</div>
</div>
</div>
</div>
</form>
</body>
and below is the css file code
body
{
font-style:normal;
font-family:Times New Roman;
color:Blue;
}
#MaterForm
{
margin-left: auto;
margin-right: auto;
width: 900px;
height: 835px;
color: black;
}
#MaterHeader
{
margin-left: auto;
margin-right: auto;
width: 900px;
height: 90px;
background-color:#787878;
}
#MaterHeaderL
{
float: left;
width: 150px;
height: 90px;
}
#MaterHeaderR
{
float:right;
width:750px;
height:90px;
}
#MasterMenu
{
margin-left: auto;
margin-right: auto;
width: 900px;
height: 22px;
background-color:Aqua;
}
.MasterMenuButton
{
float:right;
width: 70px;
height: 22px;
background-color:#A3A3A3;
}
#MasterBody
{
margin-left: auto;
margin-right: auto;
width: 900px;
height: 663px;
background-color:#C9C9C9;
}
#MasterBodyContent
{
margin-left: auto;
margin-right: auto;
width: 700px;
height: 655px;
background-color:#E8E8E8;
}
#MaterFooter
{
margin-left: auto;
margin-right: auto;
width: 900px;
height: 60px;
background-color:#787878;
}
#MaterFooterL
{
width: 100px;
height: 60px;
float:left;
}
#MaterFooterR
{
width: 800px;
height: 60px;
font-family:Times New Roman;
font-size:small;
text-align:right;
float:right;
}
please someone help me out with this formatting