Search code examples
htmldebuggingsasspixel

Div/button LOOKS wider than it should be by 1 pixel

As you can see on the image below, the dropdown div is a pixel wider than it should have been. The strangest thing is that on hover it only changes its color (line 22 of SCSS fiddle) and it's wider no more! Apparently, its width is equal to its parent, but as you can see, it's not. Maybe it's tied with button hover somehow?

Could somebody explain me the thing with this situation?

enter image description here

enter image description here

enter image description here

The code is like this. https://jsfiddle.net/can528p2/12/

<div class="home">
    <div class="submit">
      <button class="btn-search">
        Search Items
      </button>
      <div class="menu">
        <ul role="menu">
          <li>
            <button>
              Items1
            </button>
          </li>
          <li>
            <button>
              Items2
            </button>
          </li>
        </ul>     
      </div>  <!-- /.menu -->   
    </div> <!-- /.submit -->
</div> <!-- /.home -->

SCSS

.home {
  height: 200px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  button {
    height: 40px;
    line-height: 40px;
    width: 100%;
  }
  .submit { 
    width: 20%; 
    position: relative;
    .btn-search { 
      background: #ff530d;
      color: #fff;
      outline: none;
      border: none;
      &:hover,
      &:focus,
      &:active {
        background-color: #f26202;
        outline: none;
      }
    } //.btn-search
    .menu {
      position: absolute;
      width: 100%;
      border-radius: 0;
      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        background-color: transparent;
        button {
          background: #fff;
          border: none;
          outline: none;
          &:hover,
          &:focus,
          &:active {
            background: #ff530d;
            border: none;
            outline: none;
          }
        }
      } 
    } //.menu
  } //.submit
}
Solution

  • It's an optical illusion. It's tricking your brain because the dividing edges of the pixels on your monitor are dark and your brain contrasts them with a dark background. Try changing the whole background color to be a lighter shade and the effect diminishes:

    enter image description here

    .home {
  height: 200px;
  padding: 20px;
  background-color: rgba(250, 250, 250, 0.7); <--
  button {
    height: 40px;
    line-height: 40px;
    width: 100%;
  }

    https://jsfiddle.net/can528p2/13/