What is causing, and how do I get rid of this wierd white line on my web page?

Question

I am having trouble getting rid of this white space on a webpage I am building. It occurs between my Header and Navbar divs. I made another ASP.NET website and had the same exact thing happen. Please tell me what is causing this white space and how I can remove it.

Thanks!

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MainSite.Master.cs" Inherits="EndophthalmitisDatabase.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Endophthalmitis Database</title>
    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>
    <style>
        html,body {
            margin: 0px;
            padding: 0px;
        }

        div#header {
            background: #e00;
            height: 50px;
            width: auto;
            border-bottom: solid;
            border-bottom-color: #b00;
            font-family: Arial;
            font-size: 50px;
            color: #eee;
            padding: 25px;
            overflow: auto;
            margin: 0px;
        }

        div#navBar {
            background: #ddd;
            height: 35px;
            width: auto;
            border-bottom: solid;
            border-bottom-color: #ccc;
            font-family: Arial;
            font-size: 16px;
            margin: 0px;
        }

        div#navBar ul {
            list-style: none;
            list-style-type: none;
            background-color: #ddd;
        }

        div#navBar ul li {
            display:inline;
        }

        div#navBar ul li a {
            padding:.3em;
            text-decoration: none;
            color: #900;
        }

        div#navBar ul li a:hover{
            background-color: #e00;
            color: #fff;
        }

        div#contentDiv {
            overflow:auto;
            width: 1000px;
            height: auto;
            background-color: #eee;
            border-left: 2px;
            border-left-color: #000;
            border-right: 2px;
            border-right-color: #000;
            border-bottom: 2px;
            border-bottom-color: #000;
        }
    </style>
</head>
<body>
    <div id="header">
        Endophthalmitis Database
    </div>
    <div id ="navBar">
        <ul>
            <li><a href ="Default.aspx">Home</a></li>
            <li><a href ="DataEntry.aspx">Enter Data</a></li>
            <li><a href ="Reports.aspx">Reports</a></li>
            <li><a href ="Contact.aspx">Contact</a></li>
        </ul>
    </div>
    <div id ="contentDiv">
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="mainContent" runat="server">

            </asp:ContentPlaceHolder>
        </div>
        </form>
    </div>
</body>
</html>

Image:

Answer 1

Your ul item is adding a margin to the top.

ul {margin-top:-10px }

(or what ever amount to pull up the ul by...

Answer 2

You need to remove the padding and the margin on the UL. These settings are adding by the browser and if you are not using any CSS reset, you need to manually remove them.

In your CSS I added

margin: 0;
padding: 0;

to the div#navBar ul rule

This will cause other minor styling issues with your layout, that you can easily fix, but this addresses your exact question.

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Endophthalmitis Database</title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <style> html,body { margin: 0px; padding: 0px; } div#header { background: #e00; height: 50px; width: auto; border-bottom: solid; border-bottom-color: #b00; font-family: Arial; font-size: 50px; color: #eee; padding: 25px; overflow: auto; margin: 0px; } div#navBar { background: #ddd; height: 35px; width: auto; border-bottom: solid; border-bottom-color: #ccc; font-family: Arial; font-size: 16px; margin: 0px; } div#navBar ul { margin: 0; padding:0; list-style: none; list-style-type: none; background-color: #ddd; } div#navBar ul li { display:inline; } div#navBar ul li a { padding:.3em; text-decoration: none; color: #900; } div#navBar ul li a:hover{ background-color: #e00; color: #fff; } div#contentDiv { overflow:auto; width: 1000px; height: auto; background-color: #eee; border-left: 2px; border-left-color: #000; border-right: 2px; border-right-color: #000; border-bottom: 2px; border-bottom-color: #000; } </style> </head> <body> <div id="header"> Endophthalmitis Database </div> <div id ="navBar"> <ul> <li><a href ="Default.aspx">Home</a></li> <li><a href ="DataEntry.aspx">Enter Data</a></li> <li><a href ="Reports.aspx">Reports</a></li> <li><a href ="Contact.aspx">Contact</a></li> </ul> </div> <div id ="contentDiv"> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder ID="mainContent" runat="server"> </asp:ContentPlaceHolder> </div> </form> </div> </body> </html>

What is causing, and how do I get rid of this wierd white line on my web page?

Question

2 answers

solution1
1 ACCPTED 2016-07-15 23:10:10

solution2
1 2016-07-15 23:10:19

What is causing, and how do I get rid of this wierd white line on my web page?

Question

2 answers

solution1 1 ACCPTED 2016-07-15 23:10:10

solution2 1 2016-07-15 23:10:19

solution1
1 ACCPTED 2016-07-15 23:10:10

solution2
1 2016-07-15 23:10:19