White gaps dissapear or appear on different screen sizes when containing div elements in div elements

legendman 0
Viewed 36

* {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
}

#mainContainer {
    display: flex;
    justify-content: center;
}

#window {
    min-width: 600px;
    min-height: 850px;
    max-width: 600px;
    max-height: 850px;
    display: grid;
    border: 3px solid black;
    grid-template-rows: 1fr 0.5fr 0.2fr;
}

#window>div {
    border-bottom: 3px solid black;
}

#window div:nth-child(3) {
    border-bottom: none;
}

#image {
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: black;

}

#content {
    display: grid;
    grid-template-rows: 2fr 1fr;
}

#movieSelect {
    border-top: 3px solid black;
}

#movieDetails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    text-align: center;

}


#control {
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: rgba(153, 65, 65, 0.83);
}

#mainForm {
    align-self: center;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

#mainInput {
    padding: 8px;
    margin-right: 10px;
    font-size: 20px;
    border: 2px solid black;
}

#mainInput:focus {
    outline: none;
    background-color: rgba(0, 255, 242, 0.306);
}

/* //focus doesn't change specified background color */

#btn {
    padding: 12px 24px;
    border: 2px solid black;
}

#btn:active {
    background-color: rgb(109, 109, 109);
}

#movieSelect {
    display: flex;
    overflow-x: scroll;

}

#movieSelect>button {
    min-width: 118.8px;
    max-width: 118.8px
}

#movieSelect>button:focus {
    background-color: skyblue;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styling.css">
    <title>Document</title>
</head>

<body>
    <div id="mainContainer">
        <div id="window">
            <div id="image">
                <img id="mainImage" src="https://static.tvmaze.com/uploads/images/medium_portrait/333/834110.jpg"
                    alt="">
            </div>

            <div id="content">
                <div id="movieDetails">
                    <h3 class="h3Info" id="h3First">Name
                        <br> The Johnsons sdasd sad asdasasd as das as
                    </h3>
                    <h3 class="h3Info" id="h3Second">Rating:
                        <br> 89.92
                    </h3>
                    <h3 class="h3Info" id="h3Third">Release Date:
                        <br> 2012-12-02
                    </h3>
                    <h3 class="h3Info" id="h3Fourth">More Details:
                        <br> <a href="">https://www.tv-wot.com</a>
                    </h3>
                </div>

                <div id="movieSelect">
                    <button></button>
                    <button></button>
                    <button></button>
                    <button></button>
                    <button></button>
                </div>
            </div>

            <div id="control">
                <form id="mainForm" action="">
                    <input id="mainInput" type="text" name="movieSearch">
                    <button id="btn">Search</button>
                </form>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>

</html>

Hello! I am getting these ugly little white gaps when containing elements and they really just make everything very ugly and buggy looking. For example there's a random gap at the right of the black background where the image is which appears and disappears. There is another above the buttons. Also another css questions. Why is the input textarea so dark when focused even though I chose a very bright color. Thank you!

frontend css html
1 Answers

These are screen (not whole CSS) pixels sort of left behind when the system works out how to map part pixels (one CSS pixel on a modern screen can map to several screen pixels).

This snippet hacks round the problem by putting a pseudo before element on the image's containing div which has a black background and which is just slightly bigger than the element itself.

* {
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}

#mainContainer {
  display: flex;
  justify-content: center;
}

#window {
  min-width: 600px;
  min-height: 850px;
  max-width: 600px;
  max-height: 850px;
  display: grid;
  border: 3px solid black;
  grid-template-rows: 1fr 0.5fr 0.2fr;
}

#window>div {
  border-bottom: 3px solid black;
}

#window div:nth-child(3) {
  border-bottom: none;
}

#image {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: black;
  position: relative;
}

#image::before {
  content: '';
  background: black;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  position: absolute;
  z-index: -1;
}

#content {
  display: grid;
  grid-template-rows: 2fr 1fr;
}

#movieSelect {
  border-top: 3px solid black;
}

#movieDetails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  text-align: center;
}

#control {
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: rgba(153, 65, 65, 0.83);
}

#mainForm {
  align-self: center;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

#mainInput {
  padding: 8px;
  margin-right: 10px;
  font-size: 20px;
  border: 2px solid black;
}

#mainInput:focus {
  outline: none;
  background-color: rgba(0, 255, 242, 0.306);
}


/* //focus doesn't change specified background color */

#btn {
  padding: 12px 24px;
  border: 2px solid black;
}

#btn:active {
  background-color: rgb(109, 109, 109);
}

#movieSelect {
  display: flex;
  overflow-x: scroll;
}

#movieSelect>button {
  min-width: 118.8px;
  max-width: 118.8px
}

#movieSelect>button:focus {
  background-color: skyblue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styling.css">
  <title>Document</title>
</head>

<body>
  <div id="mainContainer">
    <div id="window">
      <div id="image">
        <img id="mainImage" src="https://static.tvmaze.com/uploads/images/medium_portrait/333/834110.jpg" alt="">
      </div>

      <div id="content">
        <div id="movieDetails">
          <h3 class="h3Info" id="h3First">Name
            <br> The Johnsons sdasd sad asdasasd as das as
          </h3>
          <h3 class="h3Info" id="h3Second">Rating:
            <br> 89.92
          </h3>
          <h3 class="h3Info" id="h3Third">Release Date:
            <br> 2012-12-02
          </h3>
          <h3 class="h3Info" id="h3Fourth">More Details:
            <br> <a href="">https://www.tv-wot.com</a>
          </h3>
        </div>

        <div id="movieSelect">
          <button></button>
          <button></button>
          <button></button>
          <button></button>
          <button></button>
        </div>
      </div>

      <div id="control">
        <form id="mainForm" action="">
          <input id="mainInput" type="text" name="movieSearch">
          <button id="btn">Search</button>
        </form>
      </div>
    </div>
  </div>
  <script src="app.js"></script>
</body>

</html>

A Haworth0
Related