We Keep Coding

Child div background-color does not fit parent div when zooming

Depending on the zoom-level of the browser, the background color of the child div has a strange behavior. Some white spaces appears.
See these examples:
Zoom 125%:
Zoom 150%:
Zoom 175%:
Zoom 200%:
Here is my code:
(JSFiddle: https://jsfiddle.net/3L4wfvyg/)
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.HeaderContainer3:hover {
color: white !important;
background-color: blue;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
Why is this happening and how can I solve the problem?
When i remove the border from Container3 it seems like the problem does not occur anymore, but I do not know if this is because it gets hard to see if the problem is still there due to the white color.

There can be a sort of edge effect on zoom brought about by one CSS pixel not being just one screen pixel but 2 or more on high def/modern screens. If the system is trying to map several screen pixels to one CSS one and is asked to do a fraction it can sometimes 'leave behind' a screen pixel. Hence the white on occasion, and the variation at different zoom levels.
In the case in the question maybe doing a simple hack, making the parent element have background blue on hover, would be sufficient?
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
background-color: blue;
}

Inspired by A Haworth's answer: coloring the parent element instead is indeed less prone to rendering artifacts when dealing with different zoomlevels/screen densities. You could remove the background from the child element, and add a new :hover selector for the parent that only activates when it is not in the .clicked state.
.HeaderContainer3:hover {
color: white !important;
/** Background removed here **/
}
/** New block with a :not selector **/
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
Full working code example:
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
.HeaderContainer3:hover {
color: white !important;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>

Here's a fix. It's similar to what someone else suggested, but takes into account the .clicked state.
Fix boils down to setting the background-color property on the container with border and border-radius properties instead of on the nested container. It achieves this by replacing .HeaderContainer3:hover selector with .Container3:not(.clicked):hover.
.Container3:not(.clicked):hover {
color: white !important;
background-color: blue;
}
Working fiddle: https://jsfiddle.net/2eqLb6go/
As for why this happens, I don't have a technical answer, but it does appear to have something to do with fractional pixel rendering with nested containers when parent has a border. Here's a demonstration of the same problem in a simplified form:
https://jsfiddle.net/0vje6k5w/
It seems like a rendering issue due to a rounding error with border. It appears that the clipping area and the border widths are calculated differently resulting in an inconsistent gap of transparent pixels which can be rounded to either 0 or 1. The background of the container with the border property is respected (hence the above-described fix), but anything nested inside of it will be clipped, and there doesn't appear to be any way to stop that from happening. E.g. the problem persists even if the child elements are absolutely positioned inside of it.
Honestly, I'd call this a buggy implementation of the box-model with regard to page zoom. It's odd that all major browsers in 2021 suffer from the same behavior.

I changed border size to 0.0125em. (It's weird but worked!).
.Container1 .Container3 {
border: 0.0125em solid black;
}

jQuery click event is not working

I have a menu on the left where all the elements have the same class. I've added the event $('.menuitem').click and also tried several other options, even calling the event based on the div id but without success.
As there aren't any error messages on the browser console, I'm kinda lost on the search for the error. I appreciate if you could help me figure out what the problem is.
Here is the Fiddle
HTML:
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
DOM:
$(document).ready(function(){
console.log("loaded");
$('.menuitem').click(function(){
console.log("CLICKED 1");
});
$('#entity').click(function(){
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function(){
console.log('CLICKED 3');
});
});
As you can see, I tried adding the click event through several methods and I'm not getting it. Thanks a ton for your help.

Negative z-index will not let event to dispatch on elements.
$(document).ready(function() {
console.log("loaded");
$('.menuitem').click(function() {
console.log("CLICKED 1");
});
$('#entity').click(function() {
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function() {
console.log('CLICKED 3');
});
});
.header {
position: absolute;
background-color: #525252;
height: 5%;
width: 100%;
min-height: 30px;
display: block;
margin: 0;
z-index: 0;
font-weight: 700;
line-height: 175%;
font-size: 1.4em;
text-align: center;
color: #FFFFFF;
display: inline-block
}
.mainwindow .menupane {
position: relative;
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
//z-index: -1;
padding-top: 40px;
}
.mainwindow .contentpane {
position: relative;
display: inline-block;
width: 100%;
background-color: #FFFFFF;
margin: 0;
//z-index: -2;
padding-top: 40px;
}
.menuitem {
background-color: #525252;
position: relative;
width: 75%;
height: 1.5em;
min-height: 10px;
border-radius: 0.65em;
margin: 7.5%;
color: lightgray;
/*font-size: 0.8vw;*/
/*line-height: 1.5em;*/
padding-left: 10%;
border: 0.05em solid lightgray;
/*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
transform: rotate(90deg);
transition: transform 180ms ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='header'>SISTEMA CONTROLE DE CURSOS</div>
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>ENTITIES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>COURSES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>STUDENTS</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>CLASSES</p>
</div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
Fiddle Demo

Your z-index CSS was causing issues. Here is an updated example without those so you can fix from there: https://jsfiddle.net/zxgkprw9/1/

your issue is not the binding of the event but the class .mainwindow .menupane having this property position: relative;
the events is added properly but due to this class the actual position of the element is different . Remove this property and all work fine
jsfiddle : https://jsfiddle.net/zxgkprw9/3/
.mainwindow .menupane{
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
z-index: -1;
padding-top: 40px;
}

Loading an Image in `<div>` overrides html text

I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}

Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.

No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/

Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/

Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.

How to divide 1 div into 3 sections

All i want to do is to make a footer, that stretches across the whole page. And is split in 3 sections/buttons (with the width of each button 33.333%).
I've tried so many combinations of code trying to get it to work, however failed every time. So the code below is not very necessary, just how I tried to go by making this footer. (which failed miserably)
.footerMain {
width: 100%;
background-color: green;
clear: both;
padding: 20px 0px;
border: solid 2px;
display: block;
}
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
}
.footerMain div a{
display: inline-block;
background-color: red;
text-align: center;
height:100%;
}
footer p {
text-align: center;
clear: both;
background-color: darkgreen;
}
Html:
<footer>
<div class="footerMain">
<div id="facebook-div">
Facebook
</div>
<div id="youtube-div">
Youtube
</div>
<div id="instagram-div">
Instagram
</div>
</div>
<p>&copyExample.com</p>
</div>
</footer>
PLEASE HELP! This is driving me insane.
Thanks in advance :)

You just need to set the width of the inner DIVs:
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
width: 33.33%;
}
DEMO

The html given by you is not valid
</div>
</footer>
(the second last line: the div is not needed/invalid).
I made a fiddle, with 33% width for divs. Does this do what you want?
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
width: 33%;
}
http://jsfiddle.net/4u6rftrL/

.footerMain > div {
width: 33%;
float: left;
}
That would be the most basic way, based on the markup you provided.

UPDATED
Make it like this http://jsfiddle.net/detezp42/2/
The CSS
*{
margin: 0px;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.footerMain {
width: 100%;
background-color: green;
clear: both;
border: solid 2px;
display: block;
overflow: hidden;
}
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
width: 33.33%;
}
.footerMain div a {
display: inline-block;
background-color: red;
text-align: center;
width:100%;
padding: 20px 0px;
}
footer p {
text-align: center;
clear: both;
background-color: darkgreen;
}

Problems with positioning and z-index

I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});

use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position

The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/

Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"