While working on this particular site, I encountered an issue with the password being set as joint123. There was a map displayed with icons on the right side, and when hovering over the icons, the corresponding address would appear. However, the problem arose when hovering over the lower icons - the footer div would move down as well. Can anyone provide assistance in resolving this?
Below is the HTML and CSS code:
.cont-map {
background: url('http://beta.jointviews.com/wp-content/uploads/2015/01/map1.png')no-repeat;
width: 590px;
float: right;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6 {
display: none;
}
.img-1:hover .box1,
.img-2:hover .box2,
.img-3:hover .box3,
.img-4:hover .box4,
.img-5:hover .box5,
.img-6:hover .box6 {
display: block;
background: white;
border: 1px solid;
padding: 10px;
/*width:250px;*/
float: right;
}
.img-1,
.img-2,
.img-3,
.img-4,
.img-5,
.img-6 {
width: 300px;
}
.box1 p img,
.box2 p img,
.box3 p img,
.box4 p img,
.box5 p img,
.box6 p img {
width: 50px;
}
.p-1 {
height: 50px;
padding-top: 130px;
margin-left: 39.5%;
font-size: 4px;
line-height: 1px;
}
.p-2 {
height: 50px;
padding-top: 155px;
margin-left: 29.5%;
}
.p-3 {
height: 50px;
padding-top: 33px;
margin-left: 39.5%;
}
.p-4 {
height: 10px;
margin-left: 36.5%;
}
.p-5 {
margin-left: 36.5%;
}
.p-6 {
margin-top: -49px;
margin-left: 38.2%;
}<div class="cont-map">
<div class="p-1">
<div class="img-1">
<img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
<div class="box1">
<p>
<img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Regional Office: Noida B-81, Sector -65 Noida, UP – 201301 India
</p>
</div>
</div>
</div>
<div class="p-2">
<div class="img-2">
<img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
<div class="box2">
<p>
<img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Corporate Office: Pune 315 Aurora Tower Camp Pune-411001, Maharashtra India
</p>
</div>
</div>
</div>
<div class="p-3">
<div class="img-3">
<img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
<div class="box3">
<p>
<img style="float:left;" src="http://beta.jointviews.com/wp- content/uploads/2015/01/edsys-logo1.png">Marketing Office: Bangalore Caravel Tower #13/15/2, S.T. Bd Area Koramangala, Bengaluru India
</p>
</div>
</div>
</div>
<div class="p-4">
<div class="img-4">
<img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
<div class="box4">
<p>
<img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Associate office: Calicut M.S.S Complex Cherooty Road Kozhikode, India</p>
</div>
</div>
</div>
<div class="p-5">
<div class="img-5">
<img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
<div class="box5">
<p>
<img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Regional Office: Cochin Velayudhan vaidyans`s building, Padma Jn., M.G. Road Kochi – 682 035 India
</p>
</div>
</div>
</div>
<div class="p-6">
<div class="img-6">
<img src="http://beta.jointviews.com/wp-content/uploads/2015/01/mapicon.png">
<div class="box6">
<p>
<img style="float:left;" src="http://beta.jointviews.com/wp-content/uploads/2015/01/edsys-logo1.png">Regional Office: Trivandrum Edsys Towers, Kamaleswaram Thiruvananthapurum -695009 India
</p>
</div>
</div>
</div>
</div>