bootstrap thumbnail and horizontal scroll bar in firefox and IE - html

Question

I have an issue with bootstrap thumbnail and horizontal scrollbar in IE and Firefox but not chrome nor mobile browsers.
So basically, in firefox and IE the modals look strange and there is a horizontal scroll bar, however this issue does not appear in chrome or mobile phone browsers. as you see in the image, this is the issue
and this is how modals look like in firefox
and this is how it should look like without any issue as in chrome
and for the modal code here:
<div class="container" id="portfolio" >
<hr>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"><strong>Text 101</strong></h3>
<span class="modal-button" >
<img src="images/unity1.png" style="height:30px; width:30px;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
<span class="modal-button" style="left:145px">
<img src="images/webdev.png" style="height:30px; width:auto;" > </span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="#"> <img src="images/card3.jpg" alt="..." class="image">
<div class="imgDescription">
<h3 class="img-content"></h3>
<span class="modal-button"></span>
</div>
</a>
</div>
</div>
</div> <!-- portfolio end here -->
and the css used here:
.thumbnail {
position: relative;
display: inline-block;
}
.thumbnail .imgDescription {
position: absolute;
top: 4px;
left: 4px;
width: 98%;
height: 96%;
display: none;
color: #FFF;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
.thumbnail:hover .imgDescription {
display: block;
background: rgba(0, 0, 0, .6);
}
.thumbnail .imgDescription .img-content {
position: absolute;
top: 25%;
left:35%;
color:white;
}
.thumbnail .imgDescription .modal-button {
position: absolute;
top: 55%;
left:43%;
}
I just couldn't figure where the issue is I mean it runs noraml in chrome and phone browsers. any help with be much appreciated.

Answer 1

Your tags are out of place. Notice how you open an <a> tag then a <div> and a <span> but you close the </a> before the </span> and </div>. HTML requires proper nesting so before you close the </a> you need to close every tag under it. Try using this code for the portfolio HTML:
<div class="container" id="portfolio">
<hr>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="Text 101 WebBuild V1/Text 101 WebBuild V1.html" target="_blank"> <img src="images/text101.png" class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content"><strong>Text 101</strong></h3>
<span class="modal-button">
<img src="images/unity1.png" style="height:30px; width:30px;">
</span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="landingPage.html" target="_blank"> <img src="images/myweb-app.png" alt="..." class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content" style="left:95px;"><strong>MyWebsite App</strong></h3>
<span class="modal-button" style="left:145px">
<img src="images/webdev.png" style="height:30px; width:auto;">
</span>
</div>
</a>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<a href="#"> <img src="images/card3.jpg" alt="..." class="image" width="100%">
<div class="imgDescription">
<h3 class="img-content"></h3>
<span class="modal-button"></span>
</div>
</a>
</div>
</div>
</div>
</div>
Update: I also added width="100%" to the images for IE.