0

Here I have a typical problem with "a top white line" on a page which I'm constructing and in this situation, a classic css reset is not working.

There is a tiny white line between the black border of the table and the black line from my browser.

enter image description here

Here is the skeleton of the page:

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body {
  font-family: "Lato", sans-serif;
}

#menu {
  width: 12%;
  height: 100%;
  float: left;
  position: relative;
  background-color: #ff0000;
}

#list {
  top: 140px;
  width: 100%;
  position: absolute;
}

#list a:hover {
  color: #a6a6a6;
}

ul {
  list-style: none;
  background-color: #ff0000;
}

li {
  width: 95%;
  padding: 12px 0px 12px 15px;
}

li a {
  font-size: 25px;
  color: #ffffff;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  transition: 1.0s;
}

#header {
  z-index: 1;
  height: 10%;
  width: 100%;
  position: relative;
  background-color: #0066ff;
}

table {
  width: 100%;
  height: 100%;
  position: absolute;
}

table,
td {
  border: 1px solid black;
}

td {
  color: #ffffff;
  text-align: center;
}

#title {
  font-size: 30px;
  width: 90%;
}

#logout {
  font-size: 20px;
  width: 10%;
}

img {
  float: right;
  width: 50%;
  height: 90%;
  margin: auto;
  opacity: 0.2;
}
<div id="menu">
  <div id="list">
    <ul>
      <li> </li>
      <li> <a href="#">Customers</a> </li>
      <li> <a href="#">Students</a> </li>
      <li> <a href="#">Teachers</a> </li>
      <li> <a href="#">Android</a> </li>
    </ul>
  </div>
</div>

<div id="header">
  <table>
    <tr>
      <td id="title">
        <p> Android Panel </p>
      </td>
      <td id="logout">
        <p> Logout </p>
      </td>
    </tr>
  </table>
</div>

<img src="https://image.freepik.com/free-vector/android-boot-logo_634639.jpg " />

As you can see, I'm applying a css reset, to every element from the page, as some questions on StackOveflow suggests.

I would like to understand, which configuration do I have in this css, which is presenting any resistance for the configuration of the css reset, or maybe, which configuration is missing here.

P.S: I'm using Google Chorme.

ivanleoncz
  • 9,070
  • 7
  • 57
  • 49

1 Answers1

1

One thing I would suggest doing is taking a look at the calculated box model for your page and the specific elements within it. This could help you locate what is causing what sounds like a 1px margin to me. Since you are using chrome, the dev tool shortcut is ctrl+shift+I.

I took a look at your page in both Firefox and Chrome and there doesn't seem to be a white line. It could possibly be the version of the browser you are using but this is likely not the case.

While looking at your screenshot I noticed the white line you may be talking about. This is just part of chromes browser interface. If you want to see your site without the interface just press f11 on your keyboard when in your browser. This puts you into fullscreen mode.

A custom theme for your browser could also be causing it to appear differently and look like it is a part of your webpage.

Jake Winters
  • 85
  • 7
  • Hey, Jake. If you want to add to your answer that "a custom theme for Chrome, could be the one who is putting this tiny white line, since that I'm applying a css reset to all elements", feel free. I removed the custom theme which I was using on my browser. F11 was a nice tip :). Thank you. – ivanleoncz Jun 29 '17 at 15:58