Adnan Ahmed Adnan Ahmed - 4 months ago 9
CSS Question

Unpredicted space at left of the div tag

i face a small glitch. There's a space at left of div tag. I don't know why. In the attached picture, you can observe that this problem is with two div's. One at the top as header and one at bottom as footer. I already tried setting margin and padding to 0 but it doesn't help.
Sorry for my bad writing skills. http://i.stack.imgur.com/vHat5.png



.body {
height: 740px;
background-color: #fff;
background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
background-attachment: fixed;
}

.nav_bar {
width: 100%;
background-color: #595959;
box-shadow: 0px 3px 20px 2px #666666;
position: fixed;
top: 0;
margin: 0;
padding: 0;
}

.footer {
width: 100%;
background-color: #595959;
box-shadow: 0px -3px 20px 2px #666666;
position: fixed;
bottom: 0;
font-size: 14px;
font-family: 'Segoe UI';
text-align: center;
color: #FFF;
margin: 0;
padding: 0;
}

<body class="body">
<form id="form1" runat="server">
<div>
<div id="nav_bar" class="nav_bar">
<asp:Menu ID="dynmenu" runat="server" Orientation="Horizontal" CssClass="menu">
<StaticMenuItemStyle CssClass="menuitem" />
</asp:Menu>
</div>
<div id="site_content" class="">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="footer" class="footer">
Designed & Developed by Adnan Ahmed - <a href="mailto:adnanahmed008@gmail.com" target="_top" title="GMail">Send Mail</a> - Contact# 0312-5944404
</div>
</div>
</form>
</body>




Answer

The browser adding margin: 8px default. So you have to overwrite it to get the alignment you want.

Add margin:0;

to

.body{}

.body {
            height: 740px;
            background-color: #fff;
            background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .1em, transparent .1em);
            background-size: 100% 1.2em;
            background-attachment: fixed;
            margin: 0;
        }

        .nav_bar {
            width: 100%;
            background-color: #595959;
            box-shadow: 0px 3px 20px 2px #666666;
            position: fixed;
            top: 0;
            margin: 0;
            padding: 0;
        }

        .footer {
            width: 100%;
            background-color: #595959;
            box-shadow: 0px -3px 20px 2px #666666;
            position: fixed;
            bottom: 0;
            font-size: 14px;
            font-family: 'Segoe UI';
            text-align: center;
            color: #FFF;
            margin: 0;
            padding: 0;
        }
<body class="body">
    <form id="form1" runat="server">
        <div>
            <div id="nav_bar" class="nav_bar">
                <asp:Menu ID="dynmenu" runat="server" Orientation="Horizontal" CssClass="menu">
                    <StaticMenuItemStyle CssClass="menuitem" />
                </asp:Menu>
            </div>
            <div id="site_content" class="">
                <div>
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div id="footer" class="footer">
                Designed & Developed by Adnan Ahmed - <a href="mailto:adnanahmed008@gmail.com" target="_top" title="GMail">Send Mail</a> - Contact# 0312-5944404
            </div>
        </div>
    </form>
</body>

Comments