Hi guys,
The tabbed menus work, but not in MS IE and I don't know why.
The tabs appear, but the content of the tabs just sits all in one panel.
Clicking the second tab does not activate the second content panel.
My code is a bit messy but I would be very thankful of any help.
This page works in FF but not in IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="SHORTCUT ICON" href=
"http://www.superdial.com/favicon.ico" />
<title>
Superdial - Low Call Rates - High Quality Lines
</title>
<script src="http://www.superdial.co.uk/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="http://www.superdial.co.uk/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
</head>
<body style="block-align:center; width:100%; margin-left:auto; margin-right:auto; text-align: center;">
<div style="width:650px; margin:auto; block-align:center; text-align: center;">
<div class="nav" style="float:left; margin-top:21px; width:190px; text-align:left; color:black; font-weight:bold;">
› <a href="#" onclick="TabbedPanels1.showPanel(1); return false;">Pre-Pay Call Credit</a><br>
› <a href="#" onclick="TabbedPanels1.showPanel(0); return false;">Instant Access Numbers</a>
</div>
<div id="whitebackground" style="background-color:transparent; layer-color:transparent; top-margin:25px; float:left;">
<div id="TabbedPanels1" class="TabbedPanels" style="background-color:transparent; layer-color:transparent;">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a href="#Content1" onclick="return false">Instant Access Numbers for Landline Users</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a href="#Content2" onclick="return false">Pre-Pay Call Credit for Mobile Users</a></li>
</ul>
<div class="TabbedPanelsContentGroup" style="background-color:white; layer-color:white;">
<div class="TabbedPanelsContent" style="width:445px; background-color:white; layer-color:white; margin:auto; align:center; text-align:left;">
<a href="#null" name="Content1" id="Content1"></a><p style="margin-top:5px;">Left content
</p>
<p align=center>
Left content
</p>
</div>
<div class="TabbedPanelsContent" style="width:445px; background-color:white; layer-color:white; margin:auto; align:center; text-align:left;">
<a href="#null" name="Content2" id="Content2"></a>
<p style="margin-top:5px;">
Right content</p>
<p>
Right content</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab:params.tab?params.tab:0});
//-->
</script>
</body>
</html>