Why is there a border at the top of my html page

Question

I am very new to HTML, having picked it up to work with electron. I have created my initial screen however I cannot figure out why there is a bar at the top of the screen, i.e. the title & selection are not at the top.

    .menu-selector ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 25%;
     height: 100%;
     background-color: #c4c4c4;
     text-align:center;
     position: fixed;
     overflow: auto;
    }


    #myList a{
      display: block;
      color: #000;
      padding-bottom: 0;
      text-decoration: none;
      padding-top: 20%;
      padding-bottom: 20%;
    }

    #myList : last-child {
     border-bottom: none;
    }


    #myList a:hover:not(.active) {
     background-color: #555;
     color: white;
    }

    #myList a.active {
      background-color: #4CAF50;
      color: white;
    }

    body {background-color: #828c9b;}

    .title {
     width = 40%;
     height = 40%;
     padding-left: 38%;
     background-color: #254982;
     display: block;
     border-color: #254982;
    }


    h1 {
      text-align: center;
    }

<!DOCTYPE html>
 <html>
  <head>
   <link class="menu-bar" rel="stylesheet" href="../css/index.css">
   <link class="container" rel="stylesheet" href="../css/menu.css">
   <meta charset="utf-8">
   <title>Cipher Program</title>
    <style>
     body {margin: 0; padding-top: 0; border-top: 0}

    </style>
  </head>

  <body>
   <div class="menu-selector">
   <ul>
     <li id="myList"><a class="active" href="index.html"> Menu </a></li>
     <li id="myList"><a href="ceaser.html">Ceaser Cipher</a></li>
     <li id="myList"><a href="vernam.html">Vernam Cipher </a></li>
     <li id="myList"><a href="frequency.html">Frequency Analysis</a></li>
   </ul>
   </div>


   <!-- Page Content -->
   <div class="title">
    <h1> Welcome to Cipher Program </h1>

   </div>

   <div class="ceaser">
    <h2>Menu </h2>
    
   </div>
  </body>
 </html>

Thanks for your time.

h1 tag is having default margin added by browsers by default. add margin:0 to h1 element. that should fix the issue. :D — Chandra Shekhar, Dec 17 '18 at 14:15

kev · Accepted Answer · 2018-12-17T14:18:43.690

1

Change your h1 CSS as follows:

h1 {
     text-align: center;
     margin-top: 0;
}

The problem is with the user agent stylesheet that automatically assigns some margin to your h1.

What you should do in your CSS files is to have a boilerplate so-called CSS Reset at the beginning of you CSS file to make sure that your html looks the same across all browsers and then style the margin etc. as needed.

edited Dec 17 '18 at 14:18

answered Dec 17 '18 at 14:15

kev

1,011
8
15

score 0 · Answer 2 · answered Dec 17 '18 at 14:18

0

Your h1 has a margin. Remove it by setting margin: 0;.

answered Dec 17 '18 at 14:18

Mike

184
9

score 0 · Answer 3 · answered Dec 17 '18 at 14:19

0

Your <h> tags have margin as deafult.

for solve

h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

and I suggest you investigate 'reset css'

answered Dec 17 '18 at 14:19

gungor

114
1
6

score 0 · Answer 4 · answered Dec 17 '18 at 14:20

When you are using position absolute or fixed, you must define a top attribute . please define "top" on ".menu-selector ul" like this :

.menu-selector ul {
    top: 0;


    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    height: 100%;
    background-color: #c4c4c4;
    text-align:center;
    position: fixed;
    overflow: auto;
}

Why is there a border at the top of my html page

4 Answers4