TAB CONTENT - TAB SIZE KEEPS CHANGING - PLEASE HELP

Orionsbelter · January 26, 2010

hi you can see the script in action at http://golden8ball.freehostia.com/?TI=2, in google chrome it seems ok the TABS size keep the same how ever in IE it make them larger which makes it look messy.

here is the code for the page

<?php
require_once("includes/tabs.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Golden 8 Ball - Amatuer Pool Tournament, Online Pool Community, Latest Pool & Snooker News</title>
<meta name="description" content="">
<meta name="keywords" content="Golden 8 Ball Pool Torunament, Golden 8 Ball, Online Pool Community, Pool News, Pool Suppiles, Pool & Snooker Cues, Pool and Snooker Cue Cases, Golden 8 Ball Cues, Online Pool & Snooker Forums, Pool and Snooker Shop">
<meta name="copyright" content="Copyright of Poolpockets.co.uk - 2010">
<meta name="author" content="Ben Griffiths">
<meta name="email" content="robpearce@hainsworth.co.uk">
<meta name="Distribution" content="Global">
<link href="CSS/main.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" type="text/css" href="CSS/yui/container.css">
<script type="text/javascript" src="includes/javascript/yahoo-dom-event.js"></script>
<script type="text/javascript" src="includes/javascript/yui/dragdrop-min.js"></script>
<script type="text/javascript" src="includes/javascript/yui/container-min.js"></script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<?php tabs_header(); ?>
<script type="text/javascript">
YAHOO.namespace('com.thecodecentral');
function init() {
YAHOO.com.thecodecentral.dialog = new YAHOO.widget.Dialog("myLightbox",
        { width : "604px",
   fixedcenter : true,
   visible : false,
   draggable: true,
   modal: true,
   close: true,
   constraintoviewport : true
} );

YAHOO.com.thecodecentral.dialog.render();

YAHOO.com.thecodecentral.dialog2 = new YAHOO.widget.Dialog("myLightbox2",
        { width : "604px",
   fixedcenter : true,
   visible : false,
   draggable: true,
   modal: true,
   close: true,
   constraintoviewport : true
} );

YAHOO.com.thecodecentral.dialog2.render();

YAHOO.com.thecodecentral.dialog3 = new YAHOO.widget.Dialog("myLightbox3",
        { width : "604px",
   fixedcenter : true,
   visible : false,
   draggable: true,
   modal: true,
   close: true,
   constraintoviewport : true
} );

YAHOO.com.thecodecentral.dialog3.render();
};

YAHOO.util.Event.addListener(window, "load", init); //create dialog after loading is completed
</script>

<style type="text/css">
.mask {
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
  background-color:#2f2f2f;
}
</style>
</head>

<body onload="MM_preloadImages('/images/decor/teamEntry-O.jpg','/images/decor/singlesEntry-O.jpg','/images/decor/doublesEntry-O.jpg')">

<div id="page-container">

<div id="top-area">
<div id="social-networks">
<a href="#"><img src="images/icons/twitter.jpg" alt="Follow Us On Twitter" width="20" height="20" border="0" style="vertical-align: bottom" title="Follow Us On Twitter" /></a>
<a href="#"><img src="images/icons/facebook.jpg" alt="Join Us On Facebook" width="20" height="20" border="0" style="vertical-align: bottom" title="Join Us On Facebook" /></a>
<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&username=blmg911"><img src="http://s7.addthis.com/static/btn/v2/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=blmg911"></script>
<!-- AddThis Button END -->
</div>
<div id="topnav">
<table width="405" cellspacing="0" cellpadding="0" class="topNavText">
  <tr>
    <td width="135" height="25"><a href="#">Login</a> / <a href="#">Sign Up</a></td>
    <td bgcolor="#9E9E9E" height="25" width="1"></td>
    <td width="95" height="25" ><a href="#">About Us</a></td>
    <td bgcolor="#9E9E9E" height="25" width="1"></td>
    <td width="109" height="25"><a href="#">Contact Us</a></td>
    <td bgcolor="#9E9E9E" height="25" width="1"></td>
    <td width="61" height="25"><a href="#">Shop</a></td>
  </tr>
</table>
</div>
</div>

<div id="top-bar"></div>
<div id="mid-bar">

<div id="space2"></div>
<!---- NEWS BOX ----->
<div id="newsBox">
<div id="latNews"><h1>THE LATEST NEWS</h1></div>
<div id="lineSpace2"></div>
<div id="newsLine"></div>
<div id="lineSpace1"></div>
<div id="newsTitle"><h2>Launch Of Golden 8 Ball</h2></div>
<div id="newsSpace2"></div>

<div id="newsTextBoxBG">
<div id="newsTBT"></div>
<div id="newsTBS2"></div>
<div id="newsTB"><p>Following the successes of the Lancashire pool squads in the past season we wish to announce that trials for new players will be held at the Swinton Leisure Pool Hall on Sunday 29th March at 1pm. 
All pool players are invited to compete for places in both the mens and ladies sections. <br />The number of squads maybe increased this year. Further information is available from Don Mills 0161 763 5249, Michael Giles 07590 650 813 or Ian Simpson 07745 700 141.<br />
All pool players are invited to compete for places in both the mens and ladies sections. The number of squads maybe increased this year. Further information is available from Don Mills 0161 763 5249, Michael Giles 07590 650 813 or Ian Simpson 07745 700 141.<br />All pool players are invited to compete for places in both the mens and ladies sections. The number of squads maybe increased this year. Further information is available from Don Mills 0161 763 5249, Michael Giles 07590 650 813 or Ian Simpson 07745 700 141.</p>...</div>
<div id="newsTBS1"></div>
<div id="newsTBB"><a href="#">READ ON>></a></div>
</div>

<div id="newsSpace1"></div>
<div id="newBotSpace"></div>
</div>
<!---- END NEWS BOX ----->
<div id="space2"></div>
<div id="tabBox">
<div id="tabTop"></div>
<div id="tabS2"></div>
<div id="tabMain">
<?php tabs_start(); ?>
<?php tab( "Tournament" ); ?>
This is the first tab.
<?php tab( "Register Team" ); ?>
This is the second tab.
<?php tab( "Entry Criteria" ); ?>
<img onclick="YAHOO.com.thecodecentral.dialog.show();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Team Entry Criteria','','/images/decor/teamEntry-O.jpg',1)" src="/images/decor/teamEntry.jpg" alt="Team Entry Criteria" name="Team Entry Criteria" border="0" id="Team Entry Criteria" />

<img onclick="YAHOO.com.thecodecentral.dialog2.show();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Singles Entry Criteria','','/images/decor/singlesEntry-O.jpg',1)" src="/images/decor/singlesEntry.jpg" alt="Singles Entry Criteria" name="Singles Entry Criteria" border="0" id="Singles Entry Criteria" />

<img onclick="YAHOO.com.thecodecentral.dialog3.show();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Doubles Entry Criteria','','/images/decor/doublesEntry-O.jpg',1)" src="/images/decor/doublesEntry.jpg" alt="Doubles Entry Criteria" name="Doubles Entry Criteria" border="0" id="Doubles Entry Criteria" />
<?php tab( "Directions" ); ?>
This is the second tab.
<?php tabs_end(); ?>
</div>
<div id="tabS1"></div>
<div id="tabBot"></div>
</div>
<div id="space1"></div>
<div id="belowSpace"></div>

<div id="space4"></div>

<!---- START OF TOOL BOX ---->
<div id="toolBox">
<div id="toolTop"></div>
<div id="toolSpace5"></div>

<div id="toolBoxLinks">
<div id="linksRight">
<a href="#">» Prize Fund</a><br />
<a href="#">» Sponsors</a><br />
<a href="#">» Forums</a><br />
<a href="#">» FAQ</a><br />
</div>
<div id="linksLeft">
<a href="#">» Accommodation</a><br />
<a href="#">» Food & Drinks Menu</a><br />
<a href="#">» Tournament Format</a><br />
<a href="#">» Tournament Rules</a><br />
<a href="#">» Requirements</a><br />
<a href="#">» Blackball Rules</a><br />
<a href="#">» Pay Team Deposit </a><br />
<a href="#">» Pervious Results</a><br />
<a href="#">» Registration Form</a><br />
<a href="#">» News Archive</a><br />
<a href="#">» Tournament Fixtures</a><br />
</div>
</div>
<div id="toolSpace4"></div>
<div id="toolLineBreak"></div>
<div id="toolSpace3"></div>
<div id="toolBoxPlay" align="center">
<table width="348" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="5" width="10"></td>
  </tr>
  <tr>
    <td width="6" height="180"></td>
    <td width="167" height="180"><form id="form1" name="form1" method="post" action="">
    <h3 align="center" class="forumTitle">FIND A PLAYER</h3>
      <p align="center">
        <label>
          <input type="text" name="textfield" id="textfield" class="findInputBox" value="Search For Player" onFocus="if (this.value == 'Search For Player') this.value = '';" />
        </label>      
      <p align="center">
        <label>
          <input type="submit" name="button" id="button" value="Find..." />
        </label><br />
      <div onclick="location.href='#';" style="cursor:pointer;" id="infoBox" align="left" class="playerLink">You too can also become a Golden 8 Ball player by simply signing up</div>
    </form></td>
    <td width="168" height="180">
    <h3 align="center" class="forumTitle">LAST ONLINE USERS</h3>
    <p align="center" class="onlinePlayers">Hello<br />tester<br />again<br />test<br />Golden 8 Ball<br />Cue King<br />Cue Tip</p>
</td>
    <td width="6" height="180"></td>
  </tr>
    <tr>
    <td height="5" width="10"></td>
  </tr>
</table>
</div>
<div id="toolSpace2"></div>
<div id="toolBoxForum" align="center">
<table width="180" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="3"></td>
    </tr>
    <tr>
      <td class="forumTitle" height="26">RECENT FORUM POSTS</td>
    </tr>
    <tr>
      <td height="1"></td>
    </tr>
    <tr>
      <td class="forumTable" height="20"><li><a href="#" class="bp">Tester</a></li></td>
    </tr>
    <tr>
      <td class="forumTable" height="20"><li><a href="#" class="bp">Tester</a></li></td>
    </tr>
    <tr>
      <td class="forumTable" height="20"><li><a href="#" class="bp">Tester</a></li></td>
    </tr>
    <tr>
      <td class="forumTable" height="20"><li><a href="#" class="bp">Tester</a></li></td>
    </tr>
    <tr>
      <td class="forumTable" height="20"><li><a href="#" class="bp">Tester</a></li></td>
    </tr>
    <tr>
      <td class="forumTable" height="20"><li><a href="#" class="bp">Tester</a></li></td>
    </tr>
    <tr>
      <td class="forumTable" height="20"><li><a href="#" class="bp">Tester</a></li></td>
    </tr>
  </table>
</div>
<div id="toolSpace1"></div>
<div id="toolBot"></div>
</div>
<!---- END OF TOOL BOX ---->
<div id="space3"></div>

<div id="adBar"></div>

</div>

<div id="bot-bar"></div>
<div id="bot-spacing"></div>
<div id="footer"></div>
<div id="end-spacing"></div>

</div>

<div id="myLightbox">
<div class="hd" style="background-image: url(../images/BGs/lightBoxTop.gif);">
  </div>
  <div class="bd" style="background-image: url(../images/BGs/lightBoxMain.gif);">
  <U><b>TEAM ENTRY CRITERIA</B></U>
<ol>
  <li>Teams are to consist of five players (teams can be mixed gender) with up to three reserved players.</li>
  <br />
  <br />
  <li>Teams can change their players and order of play between matches, utilising reserve players etc - an order of play sheet must be submitted before each match during the tournament.</li>
  <br />
  <br />
  <li>In urban areas, all team members must live within an 8 radius miles of their nominated pub/club. Areas are deemed urban if they have a population of more than 25,000.</li>
  <br />
  <br />
  <li>In rural areas, all team members must live within a 16 radius miles of their nominated pub/club.</li>
  <br />
  <br />
  <li>If any team member does not fall within this residential qualifications, please apply for an exception to the rule in full writing to : 'G8B Team Applications', UK Pub Pool Limited, Spring Valley Mills, Stanningley, West Yorkshire, LS28 6DW within 4 weeks of the tournament start date.</li>
  <br />
  <br />
  <li>No professional players are allowed entry or play in the tournament</li>
  <br />
  <br />
  <li>Only ONE adult male 'A' international player is allowed per team including reserves - no limit exsits to 'B' or 'C' team players, under 18's or ladies.</li>
  <br />
  <br />
  <li>Any player who has played for their country in the last two years will be deemed an international player.</li>
</ol>
  </div>
  <div class="ft" style="background-image: url(../images/BGs/lightBoxBot.gif); height:20px;">
  </div>
</div>
<!--------------------------------------------------------------------------------------------->
<div id="myLightbox2" class="hidden">
<div class="hd" style="background-image: url(../images/BGs/lightBoxTop.gif);">
  </div>
  <div class="bd" style="background-image: url(../images/BGs/lightBoxMain.gif);">
<u><b>Mens Singles</b></u>
<ol>
  <li>Mens singles is limited a certain players.</li><br>
  <li>No professional players may enter.</li>
  <br>
  <li>To secure a place in the mens singles, players must complete a singles entry form and register before the event. Entry fee is payable prior to the event and is non-refundable. Any spare places will be offered on a first come first served basis during the tournament<br>
    <br>
  </li>
  <li>Entry is £20 per player.</li>
</ol>
<u><b>Ladies Singles</b></u>
<ol>
  <li>Ladies is limited to 64 players. Places will be allocated on a first come, first served basis during the tournament<br>
    <br>
  </li>
  <li>Entry for ladies singles is £10</li>
</ol>

  </div>
  <div class="ft" style="background-image: url(../images/BGs/lightBoxBot.gif); height:20px;">
  </div>
</div>
<!--------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------->
<div id="myLightbox3" class="hidden">
<div class="hd" style="background-image: url(../images/BGs/lightBoxTop.gif);">
  </div>
  <div class="bd" style="background-image: url(../images/BGs/lightBoxMain.gif);">
  
  </div>
  <div class="ft" style="background-image: url(../images/BGs/lightBoxBot.gif); height:20px;">
  </div>
</div>
<!--------------------------------------------------------------------------------------------->
</body>
</html>

here is the tab.php

<?php
$tabs =array();

function tabs_header()
{
?>
<style type="text/css">
.tab {
    border-bottom: 1px solid #676767;
border-top: 1px solid #676767;
border-left: 1px solid #676767;
border-right: 1px solid #676767;
    text-align: center;
    font-family: arial, verdana;
background:#CCC;
height:24px;
  }
.tab-active {
    border-left: 1px solid #676767;
    border-top: 1px solid #676767;
    border-right: 1px solid #676767;
    text-align: center;
    font-family: arial, verdana;
    font-weight: bold;
background:#FFF;
  }
.tab-content {
    padding: 5px;
height:258px;
    border-left: 1px solid #676767;
    border-right: 1px solid #676767;
    border-bottom: 1px solid #676767;
background:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
color:#333;
overflow:hidden;
  }
.tab a{font-family:Calibri; font-size:22px; color:#666666; text-decoration:none;}
.tab a:link{font-family:Calibri; font-size:22px; color:#666666; text-decoration:none;}
.tab a:visited{font-family:Calibri; font-size:22px; color:#666666; text-decoration:none;}
.tab a:hover{font-family:Calibri; font-size:22px; color:#666666; text-decoration:underline;}
.tab a:active{font-family:Calibri;  font-size:22px; color:#666666; text-decoration:none;}

.tab-active a{font-family:Calibri; font-size:22px; color:#0052A4; text-decoration:none;}
.tab-active a:link{font-family:Calibri; font-size:22px; color:#0052A4; text-decoration:none;}
.tab-active a:visited{font-family:Calibri; font-size:22px; color:#0052A4; text-decoration:none;}
.tab-active a:hover{font-family:Calibri; font-size:22px; color:#0052A4; text-decoration:none;}
.tab-active a:active{font-family:Calibri;  font-size:22px; color:#0052A4; text-decoration:none;}

</style>
<?php
}

function tabs_start()
{
  ob_start();
}

function endtab()
{
  global $tabs;

  $text = ob_get_clean();
  $tabs[ count( $tabs ) - 1 ][ 'text' ] = $text;

  ob_start();
}

function tab( $title )
{
  global $tabs;

  if ( count( $tabs ) > 0 )
    endtab();

  $tabs []= array(
    title => $title,
    text => ""
  );
}

function tabs_end()
{
  global $tabs;

  endtab();
  ob_end_clean();

  $index = 0;
  if ( $_GET['TI'] )
    $index = $_GET['TI'];

?>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<?php
  $baseuri = $_SERVER['REQUEST_URI'];
  $baseuri = preg_replace( "/\?.*$/", "", $baseuri );

  $curindex = 0;
  foreach( $tabs as $tab )
  {
    $class = "tab";
    if ( $index == $curindex )
      $class ="tab-active";
?>
<td height="24" class="<?php echo($class); ?>">
<a href="<?php echo( $baseuri."?TI=".$curindex ); ?>">
<?php echo( $tab['title'] ); ?>
</a>
</td>
<?php
    $curindex += 1;
  }
?>
</tr>
<tr><td class="tab-content" colspan="<?php echo( count( $tabs ) + 1 ); ?>">
<?php echo( $tabs[$index ]['text'] ); ?>
</td></tr>
</table>
<?php
}
?>

PLEASE DO GIVE ANY ADVICE I NEED ALL THE HELP I CAN GET THANK YOU.

Bottyz · January 26, 2010

.tab-active {}

is missing height: 24px;

might be your problem. Its only when you click on the entry criteria tab.

Orionsbelter · January 26, 2010

Thanks for your quick reply, i've tried that but still no luck. I believe it too be the images, if i remove them and only put text in the box it seems fine.

Bottyz · January 26, 2010

have you tried setting the image heights?

if that doesnt work:

It may be that if you reduce your 'Entry Criteria' wording it probably won't make the tab expand. You may have to reduce the font on the tab slightly? If this works then you know its a problem in the code with padding/margin/tab size etc..

Orionsbelter · January 26, 2010

I change the font size and now it seems to work fine, thanks a lot for all your help i can now stop stressing lol

Sign In

TAB CONTENT - TAB SIZE KEEPS CHANGING - PLEASE HELP

Recommended Posts

Orionsbelter

Link to comment

Share on other sites

Bottyz

Link to comment

Share on other sites

Orionsbelter

Link to comment

Share on other sites

Bottyz

Link to comment

Share on other sites

Orionsbelter

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information