I have encountered a perplexing issue that has left me stumped. I recently added tabs using a jQuery plugin [Tabulous] and am in the process of transferring existing content into these tabs. However, I stumbled upon a strange problem while attempting to position an image next to a block quote of text.
As seen in the image below, the image and text are displaying correctly outside of the 'tab'. But when the same code and styling are placed inside the tab, it results in the following issue. Upon inspecting the element, I found that the image div is positioned correctly, but it seems to be hidden behind another element.
https://i.sstatic.net/LuTm1.png
Below is the relevant HTML code - there are multiple tabs within the tabs_container div:
<div id="tabs_container">
<div id="tabs-1">
jdlfgbkfdjgn
<div class="trainer-container">
<div id="Adrienne"></div>
<div class="h3light">Adrienne Michowski</div>
<div class="post-thumb"><img src="images/person3.jpg" width="200" height="200"></div>
<blockquote class="trainer">
An English mathematician and writer, chiefly known for her work on Charles Babbage's early mechanical general-purpose computer, the Analytical Engine. Her notes on the engine include what is recognised as the first algorithm intended to be carried out by a machine. Because of this, she is often regarded as the first computer programmer. She trains clients in programming and longevity.
</blockquote>
</div>
</div>
Here is the relevant CSS used:
#tabs_container {
padding: 40px;
overflow: hidden;
position: relative;
background: white;
border-right: 5px solid #861b3f;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 16px;
margin:0 auto;
z-index:0;
align: left;
/*width: 100%;*/}
.trainer-container {
overflow:hidden;
padding-bottom: 30px;}
h3 {
font-family: Tahoma,Verdana,Segoe,sans-serif;
padding: 1px 0 14px 0;
margin-bottom: 5px;
font-size: 20px;}
.h3light {
font-family: Tahoma, Verdana, Segoe, sans-serif;
padding-top: 8px;
padding-bottom: 14px;
padding-left: 20px;
font-size: 20px;
color: #000;
background: rgba(255, 255, 255, 0.4);
padding: 0.3em;
margin-bottom: 15px;
text-indent: 20px;
/* Box Shadow */
-moz-box-shadow: 2px 2px 15px #D53369;
-webkit-box-shadow: 2px 2px 15px #D53369;
/*box-shadow: 2px 2px 15px #FFF;*/}
.post-thumb {
display: block;
max-width: 200px;
max-height: 200px;
float: left;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
margin: 1px 1px 1px 1px;
z-index: 1;
clear: both;
background: none;}
/* Blockquotes */
blockquote {
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 20px 20px 20px;
height: auto;
font-family: Georgia,serif;
font-size: 16px;
line-height: 1.2;
color: #000;
text-align: justify;
border-left: 20px solid #861b3f;
border-right: 5px solid #861b3f;
/* Box Shadow */
-moz-box-shadow: 2px 2px 15px #861b3f;
-webkit-box-shadow: 2px 2px 15px #861b3f;
box-shadow: 2px 2px 15px #861b3f;
/*opacity: 0.5;*/
background: rgba(255,255,255,0.8);}
blockquote::before {
font-family: Georgia,serif;
font-size: 60px;
font-weight: 700;
color: #999;
position: absolute;
left: 10px;
top: 5px;}
blockquote::after {
content: "";}
blockquote.trainer {
min-height: 170px;
margin: 0 0 0 220px;}
Despite trying clear: both and z-index adjustments, I'm unable to get the image to display properly to the user. Any assistance would be greatly appreciated. Thank you.