0

I just created this div (for a floating viewport), in which I also have a header div. As you can see in the image below, the black background (from the main frame) is showing around the yellow header. How can I NOT see a black line around the header. I want the yellow of the header background to bleed into the yellow of the frame border.

Here is my css code for both div:

#mydiv {
  position: absolute;
  z-index: 0;
  width: 250px;
  height: 250px;
  top: 300px;
  left: 100px;
  background-color: black;
  border: 2px solid #e8ff26;
  text-align: center;
  box-shadow: 2px 2px 4px #888888;
}

#mydivheader {
  padding: 3px;
  cursor: move;
  z-index: 0;
  /* border: 2px solid #e8ff26; */
  background-color: #e8ff26;
  /* color: #e8ff26; */
}
<div class="desktop">
  <div id="mydiv">
    <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
    <div id="mydivheader">iris - virtual learning device</div>
    <br><br>
    <video width="247" autoplay loop muted>
                                <source src="./videos/SCI6477_IRIS.mp4" type="video/mp4">
                            </video>
    <!-- <p>Move This DIV</p> -->
  </div>

other css div:

/* if desktop */
.mobile_device_380px {
    display: none;
}
.mobile_device_480px {
    display: none;
}


/* if mobile device max width 380px */
@media only screen and (max-device-width: 380px) {
    .mobile_device_380px{display: block;}       
    .desktop {display: none;}
} 

/* if mobile device max width 480px */
@media only screen and (max-device-width: 480px) {
   .mobile_device_480px{display: block;}
   .desktop {display: none;}
}

This is the issue ->

current rendering of div

This is what it should look like -> I am getting this when I drag the frame around, some places it shows the correct one, other places shows the wrong one. enter image description here

ibib
  • 109
  • 5
  • 2
    Could you add all your code please, ? including html... – MarioG8 Dec 30 '21 at 09:02
  • I tried your example but it is actually doing the same what you have written, the main div has yellow border inside the div you are adding one more div which doesn't have any margin so it is coming just next to the yellow border so if you want to show the black line around the mydivheader then add some margin in mydivheader (margin: 1px;) or add padding in the mydiv (padding: 2px;) – Sakshi Garg Dec 30 '21 at 09:16
  • I can't see image – Sreehari Avikkal Dec 30 '21 at 09:31
  • I added the image again and the html code. – ibib Dec 30 '21 at 09:45
  • Also, I don't want to see the black line around the yellow header. I want only yellow there. – ibib Dec 30 '21 at 09:45
  • could you put css for desctop class as well. When I try your code, it works as you want it to. It could be that the problem is somewhere in the code that you didn't share here. – Lazar Nikolic Dec 30 '21 at 09:50
  • Or create codepen or codesendbox and share the link here with us. – Lazar Nikolic Dec 30 '21 at 09:51
  • I just posted above some new observations and code. You can also check it at ibrahimibrahim.works (wip) I will create codepen / codesendbox and share the codes. – ibib Dec 30 '21 at 09:56
  • @ibib I opened your website on IE, Edge, Firefox and Chrome and didn't observe any black border in the header. I suspect that your zoom is not set to 100%. [This answer](https://stackoverflow.com/a/14242055/16688813) might be an explanation of the problem you face. – Tom Dec 30 '21 at 10:14
  • Thanks @Tom. This explains it well. Thanks for the help again. – ibib Dec 31 '21 at 00:05

1 Answers1

-1

MY BROTHER YOU CAN ADD border: 2px solid #e8ff26; in mydivheader #mydivheader { border: 2px solid #e8ff26;

}

SAAD
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 30 '21 at 10:30