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

Recommended Answers

All 6 Replies

Try using it in a Table to make proper alingments in your designing page
i normally use Panel so that i can set the panel widht so that if i apply a table to it thn it get fixed in the panel area it wont extend

Try using it in a Table to make proper alingments in your designing page
i normally use Panel so that i can set the panel widht so that if i apply a table to it thn it get fixed in the panel area it wont extend

but i wanted to do in div tags?
is there any wrong in this code i have attached?

have u tried using align = center?

try padding-bottom = 0 on menu

set height % not pixle basis for your solution

set height % not pixle basis for your solution

this isn't working, when i add % all the labes and text boxes are not in the correct place

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.