CODEWITHSUNDEEP
asp.netcss
333Mhz
333Mhz

Reputation: 909

CSS Margin & Page Width Problem

Here is my ASP.NET Master Page:

The problem is, that when I set the margin to zero, my page overflows and I get a scrollbar at the bottom of the page. Any ideas?

The reason I am setting the margin to zero is because I want the content to fill the page completely, so that my ASP:Menu spans the whole page.

<body style="padding:0; margin:0;">
<div>
    <form id="frmMaster" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManagerID" EnablePageMethods="true" ScriptMode="Release"></asp:ScriptManager>

        <div id="header">
            <div id="headerTop">
                <div id="headerLeft">
                    <asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/Company_Logo.jpg" Height="80px" AlternateText="Logo" />
                </div>
                <div id="headerRight">
                    <asp:Menu ID="mnuMain" runat="server" OnMenuItemClick="mnuMain_MenuItemClick" Orientation="Horizontal" 
                        StaticDisplayLevels="1" MaximumDynamicDisplayLevels="3" SkinID="UserBar" >
                        <Items>
                            <asp:MenuItem Text="About" Value="About;list"></asp:MenuItem>
                            <asp:MenuItem Text="Config" Selectable="false">
                                <asp:MenuItem Text="Change Password" Value="ChangePassword;edit"></asp:MenuItem>
                                <asp:MenuItem Text="Customer Ranks" Value="ConfigCustomersRank;list"></asp:MenuItem>
                                <asp:MenuItem Text="Registration" Value="RegistrationInfo;list"></asp:MenuItem>                                
                            </asp:MenuItem>
                            <asp:MenuItem Text="Logout" Value="Logon;logout"></asp:MenuItem>
                        </Items>
                    </asp:Menu>
                    <asp:Label ID="lblMasterError" runat="server" ForeColor="Red" Text="Error" Visible="False"></asp:Label>
                    <asp:Label ID="lblUser" runat="server" ForeColor="Black" Text="User: " ></asp:Label>
                </div>
            </div>
        </div>

        <div id="menu" class="clear hideSkipLink">
            <asp:Menu ID="mnuModule" runat="server" OnMenuItemClick="mnuModule_MenuItemClick"
                Orientation="Horizontal" SkinID="Navigation" >
                <Items>
                    <asp:MenuItem Text="Home" Value="Home;list"></asp:MenuItem>
                    <asp:MenuItem Text="Calendar" Value="Calendar;month"></asp:MenuItem>
                    <asp:MenuItem Text="Customers" Value="Customers;list">
                        <asp:MenuItem Text="Create Customer" Value="Customers;create;0;;0;"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Communications" Selectable="false">
                        <asp:MenuItem Text="Activities" Value="Activities;list">
                            <asp:MenuItem Text="Create Activity" Value="Activities;create"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Emails" Value="Emails;list">
                            <asp:MenuItem Text="Create Email" Value="Emails;create"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Meetings" Value="Meetings;list">
                            <asp:MenuItem Text="Create Meeting" Value="Meetings;create"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Phone Communication" Value="PhoneComms;list">
                            <asp:MenuItem Text="Schedule Phone" Value="PhoneComms;create"></asp:MenuItem>
                        </asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Transactions" Selectable="false">
                        <asp:MenuItem Text="Invoices" Value="Invoices;list"></asp:MenuItem>
                        <asp:MenuItem Text="Leads" Value="Leads;list">
                            <asp:MenuItem Text="Create Lead" Value="Leads;create"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Opportunities" Value="Opportunities;list">
                            <asp:MenuItem Text="Create Opportunity" Value="Opportunities;create"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Quotes" Value="Quotes;list">
                            <asp:MenuItem Text="Create Quote" Value="Quotes;create"></asp:MenuItem>
                        </asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Reports" Selectable="false">
                        <asp:MenuItem Text="Contracts For Renewal" Value="CTRTContractsForRenewal;list"></asp:MenuItem>
                    </asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>

        <asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>

    </form>
</div>

Upvotes: 0

Views: 2341

Answers (1)

333Mhz
333Mhz

Reputation: 909

The problem was that in the Content page (not master), there was the following code:

<asp:Panel ID="pnlHeader" runat="server" SkinID="None" CssClass="Panel_Page_Header" >
    <asp:Label ID="lblHome" runat="server" Text="Home" SkinID="None" CssClass="Label_Page_Header" ></asp:Label>
</asp:Panel>

And the Label_Page_Header class had the following properties

padding: 5px;
width: 100%;

With the padding, the width:100% was stretching the label out over the edge of the page.

Upvotes: 1

Related Questions