I have a tabbed container on this page: http://www.jamball.com/2012/09/test_5.html that acts funny in old IE. A lot of our customers seem to be unwilling or unable to update their browsers, so is there a way to fix it?
The tabs all spread across and to the right, instead of falling squarely behind one another as the respective tab is chosen. I've added my code below, if that helps. I've tried encasing the container in a fixed table as well as aligning it all to the left. I'm not sure about the floating aspects, and it might even be the position elements.
Any assistance would be awesome. Thanks!
<style type="text/css">
/********
Author: John Leondus
Copyright eLIONweb 2011
Website: http://www.elionweb.com
envato profile: http://www.codecanyon.com/user/eLION
Unless you have bought an exclusive license do not delete the author info
*************/
/****** IMPORTANT! Please review ie.css and compare to this stylesheet before making changes that will effect IE ********/
/****** This imports other stylesheets so you don't have to call them in an html file *****/
@import url('../../reset.css');
/*****************************************************
The simplified 960 grid
*******************************************************/
/*
Forces backgrounds to span full width,
even if there is horizontal scrolling.
Increase this if your layout is wider.
Note: IE6 works fine without this fix.
*/
body {
font-size:13px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
p, .tab1-content li, h1, h2, h3{ /* This insures that there's enough space between your paragraphs, headings, etc */
margin-bottom: 10px;
}
a{
text-decoration:none;
color:#4072CF;
}
a:hover{
color:#0072CF;
}
.tab1-container h3{ /* Effects only the h3 headings inside the tabs */
font-size:147%; text-transform:uppercase;
}
/* `Containers
----------------------------------------------------------------------------------------------------*/
#container1{ /* Use this to position the entire tab module */
margin:0 auto;
width:820px;
margin-top:4%;
}
/* `Common Styles
----------------------------------------------------------------------------------------------------*/
/* Tabs */
.tab1-container {
position: relative; /* It's important to keep this position relative and the absolute positions in this file the same */
width: 100%;
z-index:0;
}
.tab1-container > div {
display: inline;
}
.tab1-container > div > a {
position: relative !important; /* Keeps the tabs in line with each other */
text-decoration: none;
color: #E7E7E7;
display: inline-block;
padding: 4px 14px;
font-size:16px;
margin:2px;
background: #0E1777; /* old browsers */
background: -moz-linear-gradient(top, #0072CF 50%, #0E1777 100%); /* firefox */
background: linear-gradient(top, #0072CF 1%, #0E1777 100%); /* future browsers */
-pie-background: linear-gradient(top, #0072CF 1%, #0E1777 100%); /* pie for ie */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#0072CF), color-stop(100%,#0E1777)); /* webkit */
border:solid 2px #fff;
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 1px rgba(0, 0, 0, .8);
padding: 4px 14px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
text-shadow: 0 -1px 0 #0E1777;
}
.tab1-container > div:not(:target) > a {
}
.tab1-container > div:target > a {
background:#0072CF;
}
.tab1-container > div > div { /* This is the container which holds the tab content */
background:#F2F2F2;
background: -moz-linear-gradient(top, #F2F2F2 37%, #CCCCCC 100%); /* firefox */
background: linear-gradient(top, #F2F2F2 37%, #CCCCCC 100%); /* future browsers */
-pie-background: linear-gradient(top, #F2F2F2 37%, #CCCCCC 100%); /* pie for IE */
background: -webkit-gradient(linear, left top, left bottom, color-stop(37%,#F2F2F2), color-stop(100%,#CCCCCC)); /* webkit */
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
box-shadow: 0 1px 1px 0 #A7A7A7;
-webkit-box-shadow: 0 1px 1px 0 #A7A7A7;
-moz-box-shadow: 0 1px 1px 0 #A7A7A7;
z-index: -2;
top: 50px;
padding: 20px;
border: 1px solid #CCCCCC;
min-height:250px; /* Change this value if you need more or less content space */
position:absolute; /* Fixes IE 7 & 8 */
}
.tab1-container > div:not(:target) > div {
position: absolute; /* This keeps the tab module contained */
}
.tab1-container > div:target > div {
position: absolute;
z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */
}
.tab1-container > div.tab1-content{ /* Styles the inner content of the tabs */
padding-bottom: 70px;
padding-left: 20px;
padding-right: 20px;
}
.tab1-content img{
margin:0 auto;
display:block;
padding-bottom: 20px;
padding-top: 10px;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/*
The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
zoom: 1;
}
</style>
<!--[if lt IE 9]>
<link rel="stylesheet" href="styles/ie.css" media="screen" />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<div align="center">
<table><tr><td valign=top height=530>
<!-- Start Tab Area. Use the container for positioning and to increase the tab content width !-->
<div id="container1">
<!-- Start Tabs !-->
<div class="tab1-container">
<!-- Use c + the tab number or any other identifier you'd like when creating a new tab, just keep them in order. You can have an unlimited number of tabs !-->
<div id="c6"></div>
<div id="c1">
<a href="#c1" title="New">Are You New?</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab1-content"> <!-- tab1-container > div > div in the CSS !-->
<table width=800 height=380><tr><td valign="top"><h3>J.A.M., in a nutshell...</h3><div align="justify">J.A.M. is a league that runs twice a year - Spring and Fall. For each league (3rd grade thru Varsity), every team gets 8 games plus a post-season tournament. We are the largest league in Colorado with approximately 800 teams every year. As a team, you may register one at a time or as a group. At least one player must be paid for as the coach or team admin officially registers the team. As an individual, you may enter our free agency to find a team that meets your needs. All players needing jerseys may purchase them at our pre-season League Night or at a listed Sunday location the first few weeks of the season for $55 extra. Our pre-season League Night also give customers a chance to pay in-person and with cash. Please keep an eye on the calendar section towards the bottom of every page of this site for those details and more, and be sure to signup for our mailing list to best stay in the loop. J.A.M. also has summer camps and clinics, and runs tournaments throughout the year in association with other organizations.</div><ul><li>For a more detailed guide to J.A.M. Basketball - <a href="#">click here</a></li></ul></td></tr><tr><td align=right height=50><a href="#c6">Return Home</a></td></tr></table> </div>
</div>
<div id="c2">
<a href="#c2" title="Teams">Teams / Coaches</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab1-content"> <!-- tab1-container > div > div in the CSS !-->
<table width=800 height=380><tr><td valign="top"><h3>Steps to Registering your Team</h3><ul><li>Pay for at least one player now to set your team's preferences - <a href="#">click here</a></li><li>Add your team to our club teams page - <a href="#">click here</a></li><li>Pay for 9 or more player to receive a discount, or have them pay on their own. Inform them that prices will rise the longer they wait.</li><li>If you have less than 8 players, use our community forum to find extra players - <a href="#">click here</a></li><li>Once you've registered at least one player, check out our Free Agents list - <a href="#">click here</a></li><li>Pick up uniforms (if needed) at our preseason League Night or at a Uniform Pickup location - see the calendar below</li></ul></td></tr><tr><td align=right height=50><a href="#c6">Return Home</a></td></tr></table> </div>
</div>
<div id="c3">
<a href="#c3" title="Teammates">Teammates</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab1-content"> <!-- tab1-container > div > div in the CSS !-->
<table width=800 height=380><tr><td valign="top"><h3>Steps to Registering a Teammate</h3><ul><li>Make sure your team is registered, and that you are not yet paid for (ask your coach). Your coach (or a designated player) must officially register the team to have your game preferences set. </li><li>Register to pay your portion online - <a href="#">click here</a></li><li>Stay in contact with your coach for schedule information</li><li>Sign up for our Email List to stay updated yourself - <a href="#">click here</a></li><li>Note that prices will rise the later your register.</li></ul></td></tr><tr><td align=right height=50><a href="#c6">Return Home</a></td></tr></table> </div>
</div>
<div id="c4">
<a href="#c4" title="Free Agents">Free Agents</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab1-content"> <!-- tab1-container > div > div in the CSS !-->
<table width=800 height=380><tr><td valign="top"><h3>Steps to Finding a Team</h3><ul><li>Sign up for the official free agency list that will be sent out to all registering coaches - <a href="#">click here</a></li><li>Once signed up, you'll receive a list of crucial questions to ask teams that may contact you.</li><li>Check our community forum for teams that need players - <a href="#">click here</a></li><li>Post that you need a team in our community forum - <a href="#">click here</a></li><li>Check out our club teams page for teams in your area - <a href="#">click here</a></li><li>Once you've found a team, register as a teammate - <a href="#">click here</a></li><li>Note that prices will rise the later you register, so don't be too picky :-)</li></ul></td></tr><tr><td align=right height=50><a href="#c6">Return Home</a></td></tr></table>
</div>
</div>
<div id="c5">
<a href="#c5" title="FAQs">F.A.Q.'s</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab1-content"> <!-- tab1-container > div > div in the CSS !-->
<table width=800 height=380><tr><td valign="top"><h3>Frequently Asked Questions... <i>Answered!</i></h3><ul><li><b>What days will the league run?</b> - The league starts on March 20th and ends April 30th.</li><li><b>When and where will my games be?</b> - Register now to set your preferences - <i>You tell us!</i> And if you're already on a team, ask your coach where/when they've selected.</li><li><b>Who's paid on my team, and where's my roster?</b> - Your players can pay anytime. We will ask you to fill out a final roster at your first game. Note that registration prices rise the later you register, and that rosters will never be posted online to protect all kids involved.</li><li><b>Why doesn't J.A.M. just place me on a team?</b> - We allow teams and players to find one another to avoid forcing anyone to be on a team that isn't perfect for them.<li><b>Why are only the first one or two games scheduled first, followed by the entire schedule the following week?</b> - History has taught us that many people forget to tell us scheduling information, and sometimes we forget some things as well. So instead of putting out a full schedule then taking it back to alter, we do things this way.<li><b>For other popular FAQ's</b>, <a href="#">click here</a></li></ul></td></tr><tr><td align=right height=50><a href="#c6">Return Home</a></td></tr></table> </div>
</div>
<div id="c6">
<div class="tab1-content"> <!-- Having a hidden or opening tab is ideal when you don't want last tab to always show first when loading the page !-->
<table width=800 height=380><tr><td valign="top"><h3>J.A.M. Spring League Registration</h3>Choose a Tab Above to Get Started<ul><li>Games: March 1st - April 30th | Registration Deadline: March 1st</li><li>Schedules Posted: March 24th (first week only), March 29th (Full schedule).</li><li><a href="#c1">Are You New?</a> - Here's some basic information to get you started.</li><li><a href="#c2">TEAMS / COACHES</a> - For those registering a team, you MUST start here.</li><li><a href="#c3">TEAMMATES</a> - Those already on a registered team who need to pay their portion.</li><li><a href="#c4">FREE AGENTS</a> - Players <b><u>not</u></b> currently on a team who would like to be.</li><li><a href="#c5">F.A.Q.'s</a> - Check out our most popular questions... <i>Answered!</i></li><li><a href="#c4">Downloadable Forms</a> - For those who wish to mail-in instead of pay online.</li><li>Look at the chart below for prices, and note that prices will rise the later your register.</li></ul></td></tr></table> </div>
</div>
</div><!-- Tab Container !-->
</div><!-- Container !-->
<!-- End Tab Area !-->
</td></tr><tr><td>
<script type="text/javascript" defer=defer>
// Andrew Urquhart : CountDown Timer : http://andrewu.co.uk/clj/countdown/
function CD_T(id,e){var n=new Date();CD_D(+n,id,e);setTimeout("if(typeof CD_T=='function'){CD_T('"+id+"',"+e+")}",1100-n.getMilliseconds())};function CD_D(n,id,e){var ms=e-n;if(ms<=0) ms*=-1;var d=Math.floor(ms/864E5);ms-=d*864E5;var h=Math.floor(ms/36E5);ms-=h*36E5;var m=Math.floor(ms/6E4);ms-=m*6E4;var s=Math.floor(ms/1E3);if(CD_OBJS[id]){CD_OBJS[id].innerHTML=d+" day"+(d==1?" ":"s ")+CD_ZP(h)+"h "+CD_ZP(m)+"m "+CD_ZP(s)+"s"}};function CD_ZP(i){return(i<10?"0"+i:i)};function CD_Init(){var pref="countdown";var objH=1;if(document.getElementById||document.all){for(var i=1;objH;++i){var id=pref+i;objH=document.getElementById?document.getElementById(id):document.all[id];if(objH&&(typeof objH.innerHTML)!='undefined'){var s=objH.innerHTML;var dt=CD_Parse(s);if(!isNaN(dt)){CD_OBJS[id]=objH;CD_T(id,dt.valueOf());if(objH.style){objH.style.visibility="visible"}}else {objH.innerHTML=s+"<a href=\"http://andrewu.co.uk/clj/countdown/\" title=\"Countdown Error:Invalid date format used,check documentation (see link)\">*</a>"}}}}};function CD_Parse(strDate){var objReDte=/(\d{4})\-(\d{1,2})\-(\d{1,2})\s+(\d{1,2}):(\d{1,2}):(\d{0,2})\s+GMT([+\-])(\d{1,2}):?(\d{1,2})?/;if(strDate.match(objReDte)){var d=new Date(0);d.setUTCFullYear(+RegExp.$1,+RegExp.$2-1,+RegExp.$3);d.setUTCHours(+RegExp.$4,+RegExp.$5,+RegExp.$6);var tzs=(RegExp.$7=="-"?-1:1);var tzh=+RegExp.$8;var tzm=+RegExp.$9;if(tzh){d.setUTCHours(d.getUTCHours()-tzh*tzs)}if(tzm){d.setUTCMinutes(d.getUTCMinutes()-tzm*tzs)};return d}else {return NaN}};var CD_OBJS=new Object();if(window.attachEvent){window.attachEvent('onload',CD_Init)}else if(window.addEventListener){window.addEventListener("load",CD_Init,false)}else {window.onload=CD_Init};
</script>
<center><table width=900 cellpadding=5><tr><td>
<table width=100% border=1 bordercolor=#000000 cellspacing=1 cellpadding=5 style="font-weight:bold; text-align:center">
<tr><td colspan=3 bgcolor="#cccccc">
<b><font size=3 color="#000000">There are currently </font><font size=3 color="#660000"><span id="countdown1">2012-9-09 09:00:00 GMT-06:00</span></font> left until <font style="background-color:#fff000;">GAMES BEGIN</font>.</b></td></tr>
<tr style="background-color:#000000; color:#ffffff; font-weight:bold"><td width=30% align="center">
PERIOD</td><td width=20% align="center">COST</td><td width=50% align="center">TIME FRAME</td></tr>
<tr><td>Early Registration</td><td>$100</td><td>July 15th - July 31st</td></tr>
<tr><td>Official Registration</td><td>$110</td><td>August 1st - August 19th</td></tr>
<tr><td>Late Registration</td><td>$120</td><td>August 20th - August 31st</td></tr>
<tr bgcolor="#fff000"><td>In-Season Registration</td><td>$130</td><td>September 1st - October 4th</td></tr>
</table>
</td></tr></table></center>
</td></tr></table></div>
