We Keep Coding

How to make a div minimum width based on its content

I have a div with table inside. The div is full in width, but whenever I resized the screen, the div will reduce its size then its content will overlapped the div.
Now, I want the minimum width of the div based on the contents(table).
My main div is class="search".
Here is the link for my codes:
.search {
border: 2px solid #FDBF3B;
background-color: #FFEBC1;
padding: 10px;
margin: 5px 0;
}
.search table {
border: none;
}
.search .header {
margin-bottom: 5px;
border-bottom: 1px solid #FDBF3B;
padding-bottom: 2px;
color: #000F1F;
font-weight: bold;
overflow: hidden;
}
.search .buttons {
margin-top: 5px;
border-top: 1px solid #FDBF3B;
padding-top: 8px;
white-space: nowrap;
}
.inner {
padding: 7px;
min-height: 480px;
z-index: 1;
overflow: auto;
}
<DIV class=inner>
<DIV class=search sizset="false" sizcache017720493147691946="40 33 1">
<DIV class=header>Search Options </DIV>
<TABLE sizset="false" sizcache017720493147691946="40 33 1">
<TBODY sizset="false" sizcache017720493147691946="40 33 1">
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_NAME>Name:</SPAN>
</TD>
<TD>
<INPUT name=NAME style="BACKGROUND-COLOR: #ffffff" type=text size=15 maxLength=10 data-dpmaxz-eid="4">
</TD>
</TR>
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_ADDRESS>Address:</SPAN>
</TD>
<TD>
<INPUT name=ADDRESS style="BACKGROUND-COLOR: #ffffff" type=text size=40 maxLength=50 data-dpmaxz-eid="5"> </TD>
</TR>
</TBODY>
</TABLE>
<DIV class=buttons>
<INPUT name=SEARCH class=BUTTON type=button value=Search>
<INPUT name=SEARCH class=BUTTON type=button value=Clear>
<INPUT name=CREATE class=BUTTON type=button value=Create> </DIV>
</DIV>
</DIV>

apply min-width to parent div and manage overflow in body. Whenever you reduce widnow width lesser then search div's width, there will be a scroll in body.
.body{
overflow: scroll;
}
.search {
min-width:380px;
}

JQueryUI droppable hover class bug on scaled target

When droppable element is scaled, JQueryUI incorrectly adds/remove hover class to the elements: two 'tr' elements of scaled table get this class at once.
Is there any way to avoid this?
PS
bug ticket here
dirty fix here(codepen)
or here(github)
$('div').draggable();
$('tr').droppable({hoverClass:"highlight"});
div {
display:inline-block;
padding:3px;
border:1px solid rgba(200,0,0,.6);
}
table {
transform:scale(0.5);
border:1px solid gray;
padding:0;
border-collapse: collapse;
}
td {
padding:5px;
background: rgba(0,0,150,0.3);
}
tr.highlight td {
background: rgba(150,0,0,0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</table>

Actually transform:scale() change the element pixel ratio not its actual pixel on DOM
so why not just reduce the font-size and padding of td instead of using transform
Stack Snippet
$('div').draggable();
$('tr').droppable({
hoverClass: "highlight"
});
div {
display: inline-block;
padding: 3px;
border: 1px solid rgba(200, 0, 0, .6);
}
table {
border: 1px solid gray;
padding: 0;
border-collapse: collapse;
}
td {
padding: 2px;
background: rgba(0, 0, 150, 0.3);
font-size: 10px;
}
tr.highlight td {
background: rgba(150, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>grab me and drag over the table</div>
<table>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
<tr>
<td>11111111111111111111111</td>
</tr>
<tr>
<td>222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333</td>
</tr>
</table>

CSS issue, need help in correcting this issue

I have 12 squares in which number 6 has scrollable content. but will not align up properly in the square, its all over the place. Adjusting the screen size creates other issues. This text shows differently in chrome and IE. I need help in aligning the text in square 6 and keeping it there no matter the screen size or browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<META HTTP-EQUIV=Refresh CONTENT='300; URL=pWebMonitor.html'>
<title>Web-Monitor</title>
<link rel="stylesheet" href="webMonitor.css">
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var pausecontent=new Array()
pausecontent[0]='<li><span class="statusGreen">-000-</span> ....Trying to Load collected Data....</li>'
pausecontent[1]='<li><span class="statusGreen">-000-</span> ....Trying to Load collected Data....</li>'
pausecontent[2]='<li><span class="statusGreen">-000-</span> ....Trying to Load collected Data....</li>'
var pausecontent2=new Array()
</script>
<script type="text/javascript">
/***********************************************
* Pausing up-down scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative;overflow: hidden"><div class="innerDiv" style="position: absolute; width: auto;" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: auto; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}
// -------------------------------------------------------------------
// animateup()- Move the two inner divs of the scroller up and in sync
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}
// -------------------------------------------------------------------
// swapdivs()- Swap between which is the visible and which is the hidden div
// -------------------------------------------------------------------
pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}
pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}
// -------------------------------------------------------------------
// setmessage()- Populate the hidden div with the next message before it's visible
// -------------------------------------------------------------------
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
</script>
</head>
<body>
<div id="squareBox">
<p id="lastRun">Management Dashboard<span style="font-size: small;">©™ (v1.14)<Strong> <a href="../WebMon/WebMonitorHelp.html" target="_blank" >☂</a></Strong></span><br/>
</p>
<div id="square1" class="squared">
<span class="sqHeader"> 1 Monitor</span>
<table id="tb_1">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data1"></tbody>
</table>
</div>
<div id="square2" class="squared">
<span class="sqHeader">2 Monitor</span>
<table id="tb_2">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data2"></tbody>
</table>
</div>
<div id="square3" class="squared">
<span class="sqHeader">3 Monitor</span>
<table id="tb_3">
<th>Type</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data3"></tbody>
</table>
</div>
<div id="square4" class="squared">
<span class="sqHeader" id="Kaiser">4 Monitor</span>
<table id="tb_4">
<th>Type</th>
<th>UnTouched Ticket</th>
<th>Status</th>
<th>#</th>
<tbody id="data4"></tbody>
</table>
</div>
<div id="square5" class="squared">
<span class="sqHeader">5 Monitor</span>
<table id="tb_5">
<th>Minutes</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data5"></tbody>
</table>
</div>
<div id="square6" class="squared">
<span class="sqHeader">6 Monitor</span>
<table id="tb_6">
<tbody id="pscroller1"></tbody>
</table>
</div>
<div id="square7" class="squared">
<span class="sqHeader">7 Monitor</span>
<table id="tb_7">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data7"></tbody>
</table>
</div>
<div id="square8" class="squared">
<span class="sqHeader">8 Monitor</span>
<table id="tb_8">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data8"></tbody>
</table>
</div>
<div id="square9" class="squared">
<span class="sqHeader">9 Monitor</span>
<table id="tb_9">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data9"></tbody>
</table>
</div>
<div id="square10" class="squared">
<span class="sqHeader">#10 Monitor</span>
<table id="tb_10">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data10"></tbody>
</table>
</div>
<div id="square11" class="squared">
<span class="sqHeader">#11 Monitor</span>
<table id="tb_11">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data11"></tbody>
</table>
</div>
<div id="square12" class="squared">
<span class="sqHeader">#12 Monitor</span>
<table id="tb_12">
<th>Response</th>
<th>Longest-Queued</th>
<th>Status</th>
<th>#</th>
<tbody id="data12"></tbody>
</table>
</div>
</div>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent, "pscroller1", "someclass", 5000)
document.write("<br />")
//new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)
</script>
</body>
</html>
//CSS
body {
background: #d0e4fe;
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
}
p#lastRun{
font-family: Garamond, 'Times New Roman', Georgia, serif;
font-variant: small-caps;
//font-weight: bold;
font-size:1.5em;
text-align:center;
background: black;
color: white;
}
h1 {
color: orange;
text-align: center;
}
a {color:#7FFFD4;
}
#mHeader, #mHeader2{
text-align: center;
font: Georgia, Times, serif;
font-size: small;
//font-weight: bold;
}
/* squares configuration */
#squareBox {
margin-left: auto;
margin-right: auto;
width: 1568px;
height: 700px;
//border: 2px solid #73AD21;
//border-radius: 10px;
//background: url(paper.gif);
background: tan;
}
.squared {
position: relative;
float: left;
background: WhiteSmoke;
width: 386px;
height: 203px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
margin-left: 5px;
margin-top: 5px;
text-align: center;
}
#square1{
margin-top: -18px;
}
#square2{
margin-top: -18px;
}
#square3{
margin-top: -18px;
}
#square4{
margin-top: -18px;
}
#square5{
}
#square6{
}
#square7{
}
#square8{
}
#square9{
}
#square10{
}
#square11{
}
#square12{
}
.sqHeader{
font-weight: bold;
font-variant: small-caps;
text-align: center;
}
/* Table configuration */
th{
font-size: small;
font-variant:small-caps;
background: Wheat;
}
table, td, th{
margin: 1em; border-collapse: collapse;
border: 1px solid black;
padding: .15em;
margin-top: 2px;
font-size: 100%;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
td {
font-size:87%;
}
td #pscroller1 {
//font-size: 87%;
}
tbody tr:nth-child(even) {
background: #F8F8F8 ;
}
tbody tr:nth-child(odd) {
background: #99FFCC;
}
tbody tr:hover {
background: #c9f;
}
#dataContainter, #rightNavBar, #leftNavBar{
height: 580px;
outline-style: solid;
outline-width: 1px;
outline-color: green;
}
#leftNavBar , #rightNavBar {
width: 146px;
background: light-gray;
font-size: 74%;
}
#leftNavBar {
float: left;
}
#rightNavBar {
float: right;
}
#filterButton{
margin-left: auto;
margin-right: auto;
}
.statusGray {
background: gray;
}
.statusRed {
background: red;
color: white;
font-weight: bold;
text-decoration: blink;
}
.statusYellow{
background: yellow;
color: black;
font-weight: bold;
}
.statusGreen{
background: green;
color: white;
font-weight: bold;
}
.statusBlue{
background: blue;
color: white;
font-weight: bold;
}
.regionRed {
background: #FF6600;
}
#displayResults tr:hover {
background: #FFFF00;
}
#customers tr.alt td {
color: #EAF2D3;
background: #000000;
};
input:focus {
background: yellow;
}
button:hover {
background: blue;
color: white
}
.dEntry:focus, .qSearch:focus {
background: #99FFFF;
}
.dEntry, .data {
font-family: 'HP Simplified', Arial, Verdana, Helvetica, Sans-serif;
//font-weight: bold;
//font-size: 80%;
//color: blue;
}
/*****************************************************
* generic styling for ALS elements: outer container
******************************************************/
/*Example CSS for the two demo scrollers*/
div#pscroller1 {
position: absolute;
width: 340px;
height: 160px;
bottom: 405px;
padding: 5px;
left: 465px;
//border: 1px solid black;
}
#pscroller2{
width: 700px;
height: 20px;
border: 1px solid black;
padding: 3px;
}
#pscroller1 li, #pscroller1 a{
text-decoration: none;
font-size: 89%;
font-variant:small-caps;
font-weight: bold;
color: black;
}
.someclass{ //class to apply to your scroller(s) if desired
}

I assumed by "scrollable content" you mean automatically moving across the screen. What about using a marquee library?
Here's a fiddle I put together on your grid: https://jsfiddle.net/7gz5x1mk/1/
using the jquery marquee plugin http://aamirafridi.com/jquery/jquery-marquee-plugin#examples
HTML
<div id="square6" class="squared" style="border: 1px solid red;">
<span class="sqHeader">6 Monitor</span>
<div class="marquee">jQuery marquee is the best <b>marquee</b> plugin in the world</div>
</div>
HTML for vertical scrolling
<div class="marquee ver" data-direction='up' data-duration='1000' data-pauseOnHover="true">
jQuery marquee is the best marquee plugin in the world. jQuery marquee is the best marquee plugin in the world <b>end</b>
</div>
Javascript
$('.marquee').marquee();
CSS
.marquee {
width: 300px;
overflow: hidden;
border: 1px solid #ccc;
background: #ccc;
}

Get image to overlay on top of table

I have a table of basketball stats and I have an image of a basketball court that will later contain a shot chart. It is initially hidden. I want the image to only appear when the user clicks a button. And the image should appear on top of the of table. (Most of the table will be behind the image)
I can't seem to manipulate the CSS or Jquery position to allow that to happen. Part of the problem is that I want the table itself to be centered (margin: 0px auto;)
I started a JSFiddle here: https://jsfiddle.net/Thread7/f7g9dtxt/ to work it out. If you click "Show Court" you will see what happens now. The image is at the bottom and to the left. Instead of the top and middle.
Code Below:
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th> </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>
CSS:
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
margin: 0px auto;
}
JQuery:
$("#showimg").click(function(e) {
$("#court").show();
});

You should wrap your table in element with relative position, than place the image (also in container with absolute position). That way you have better control over those elements. Check it out:
$("#showimg").click(function(e) {
$(".myimg").toggle();
});
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.table_container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show/Hide Court
</button>
<div class="table_container">
<table class='mytable'>
<tr>
<td>Michael</td>
<td>Jordan</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>LeBron</td>
<td>James</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>Kobe</td>
<td>Bryant</td>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>Magic</td>
<td>Johnson</td>
<td>6</td>
<td>11</td>
</tr>
</table>
<div class="myimg">
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
</div>
</div>
Also at updated fiddle

Try this: https://jsfiddle.net/f7g9dtxt/3/
$('.yourImage').toggle();
$("#showimg").click(function(e) {
$('.yourImage').toggle();
});
.mytable td {
text-align: left;
border: solid;
padding: 2px;
margin: 0px;
}
.mytable {
position: absolute;
z-index: 0;
}
.yourImage {
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
Put an img tag here!
</span>

Internet Explorer CSS display block issue

I'm trying to create a simple tab menu using a table and div blocks.
When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.
Here is the page:
Tab Example
function tabClick(tab, bodyId) {
// tabs and bodyes arrays
var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];
for (var i = 0; i < tabCol.length; i++) {
// find the tab that was clicke and
// set it's status to selected. set
// the others to unselected
if (tab === tabCol[i]) {
tabCol[i].className = 'tabSel';
} else {
tabCol[i].className = 'tabUnsel';
}
// show the body related to the selected
// tab and hide the others
if (bodyCol[i].id == bodyId) {
bodyCol[i].style.display = 'block';
} else {
bodyCol[i].style.display = 'none';
}
}
}
.tabUnsel:hover {
text-decoration: underline;
}
.tabUnsel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
cursor: pointer;
background-color: #f0f0f0;
border: #898c95 solid 1px;
border-radius: 5px 5px 0px 0px;
}
.tabSel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
background-color: #ffffff;
border: #898c95 solid 1px;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
}
<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
<tr>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
<td style="width: 100%; border-bottom: #898c95 solid 1px;"> </td>
</tr>
<tr>
<td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
<div id="body1" style="width:100%; min-height: 300px;">
Tab 1 content
</div>
<div id="body2" style="width:100%; min-height: 300px; display: none;">
Tab 2 content
<br/>
<img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
<img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
</div>
<div id="body3" style="width:100%; min-height: 300px; display: none;">
Tab 3 content
</div>
</td>
</tr>
</table>

try to add this to your empty tap style for example
empty-tap{
min-height: 500px;
height:auto !important;
height: 500px;
}
the source here