0

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>

Edited by caps_lock: n/a

1
Contributor
1
Reply
2
Views
7 Years
Discussion Span
Last Post by caps_lock
0

I've cut the code down in the above, full version is obviously available in the source of the link

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.