CODEWITHSUNDEEP
htmlcssinternet-explorerscrolloverflow
Joie Kim
Joie Kim

Reputation: 37

Scrollbar create margin in internet explorer

So I've been working on a simple scroll in div with a code

overflow: auto;

However, I don't know why, but the scroll creates a margin on the right side when opened in internet explorer. It works fine on both chrome and safari.

This is the code I worked on: HTML

     <div class="drag" id="second">
    <div class="dragheader" id="headerTwo">
      <p>Pre-story</p><div><a id="secondX" href="#">B</a></div></div>
      <div class="window" id="windowTwo">
        <p>
          It was a huge project for the planet earth.
          Humanity's first attempt to actively reach out to outer-space<br><br>
          : A 10year-mission to connect with other life forms and return to earth.
          Many Astronauts were involved in this project and on this spaceship, our spaceman X was born.
        </p>
        <div class="smallImg"><img src="img/baby.gif"/></div>
        <p class="cursor">
          However, as I said, our story started after this one ended.
          Every astronaut was killed by an unfortunate incident leaving young X all alone.<br>
          At that moment, our story begins.
        </p>
      </div>
  </div>

CSS

    .drag {
  position: absolute;
  z-index: 100;
  -webkit-animation: imgShadow 1.6s infinite;
  -o-animation: imgShadow 1.6s infinite;
  animation: imgShadow 1.6s infinite;
  border: #a481f1 3px solid;
  background: #000051;
  width: auto;
  display: none;
}
.dragheader {
  width: auto;
  height: 20px;
  background: #a481f1;
  z-index: 100;
  cursor: grab;
}
.dragheader p{
  float: right;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 1%;
  font-size: 16px;
  color: #00008b;
  font-weight: bolder;
  -webkit-animation: darkTextShadow 1.6s infinite;
  -o-animation: darkTextShadow 1.6s infinite;
  animation: darkTextShadow 1.6s infinite;
}
.dragheader div{
  float: left;
  margin-left: 1.4%;
}
.dragheader div a{
  -webkit-animation: darkTextShadow 1.6s infinite;
  -o-animation: darkTextShadow 1.6s infinite;
  animation: darkTextShadow 1.6s infinite;
  font-family: 'Untitled1', sans-serif;
  color: #00008b;
  font-size: 18px;
  text-decoration: none;
}
.window {
  width: 500px;
  height: 300px;
  z-index: 100;
  padding: 3%;
}
.window p{
  -webkit-animation: smallTextShadow 1.6s infinite;
  -o-animation: smallTextShadow 1.6s infinite;
  animation: smallTextShadow 1.6s infinite;
  margin: 0;
}
#first{
  -webkit-transform: translate(10%, 45%);
  -moz-transform: translate(10%, 45%);
  -ms-transform: translate(10%, 45%);
  -o-transform: translate(10%, 45%);
  transform: translate(10%, 45%);
}
#first .cursor{
  position: absolute;
  top: 0;
  margin-top: 8%;
  margin-right: 5%;
}
#second{
  -webkit-transform: translate(150%, 15%);
  -moz-transform: translate(100%, 15%);
  -ms-transform: translate(100%, 15%);
  -o-transform: translate(100%, 15%);
  transform: translate(250%, 15%);
}
#headerTwo{
  width: auto;
}
#windowTwo{
  max-width: 350px;
  height: 500px;
  overflow: auto;
  scrollbar-face-color:#2fccad;
  scrollbar-arrow-color:#2fccad;
  scrollbar-track-color:transparent;
  scrollbar-shadow-color:#2fccad;
  scrollbar-highlight-color:#2fccad;
  scrollbar-3dlight-color:#2fccad;
  scrollbar-darkshadow-Color:#2fccad;

}

#windowTwo img{
  width: 50%;
  display: inline-block;
}
.smallImg{
  position: relative;
  text-align: center;
  margin-bottom: 2%;
}

And you can see the website here: http://joie1234.github.io

I've tried scroll-padding and changing the width parameters but nothing works...

Thank you for reading;)

Upvotes: 2

Views: 360

Answers (1)

Yaseer
Yaseer

Reputation: 518

Check below CSS (This will only apply for IE browser 10+),

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
#windowTwo {
   margin-right : -75px;
 }
}

Upvotes: 1

Related Questions