Member Avatar for caps_lock

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=
    "" /> 
    <title> 
      Superdial - Low Call Rates - High Quality Lines
    </title> 
    <script src="http://www.superdial.co.uk/SpryTabbedPanels.js" type="text/javascript"></script> 
    <link href="" 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 because: n/a
  • 1 Contributor
  • 1 Reply
  • 264 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by caps_lock

Dani AI

Generated

— concise troubleshooting and a few concrete fixes that commonly explain the “tabs visible but all panels shown” symptom in IE.

Most often this means Spry’s JavaScript never finished initializing in Internet Explorer (so the show/hide behavior never runs). The usual culprits are a script error or markup that IE handles differently (missing/misaligned fragment IDs, inline handlers that interfere, or a quirks-mode DOCTYPE).

  • Open IE Developer Tools (F12). Check the Console for JS errors and the Network tab for 404s on any Spry files (missing script/CSS will stop Spry).
  • Temporarily remove or comment out auxiliary scripts (for example SpryURLUtils.js) to see if a load/parse error disappears.
  • Avoid having the fragment ID on an inner <a> inside the content panel. Give the content DIV the ID that the tab href targets, and remove onclick="return false" from tab anchors so Spry can attach handlers cleanly.
  • Ensure the widget is instantiated after the markup (either place the init script after the HTML or run on window.onload). Also switch to a standards DOCTYPE if the page is in quirks mode (for modern simplicity use <!DOCTYPE html>).

A minimal, safe structure:

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab"><a href="#panel1">Tab 1</a></li>
    <li class="TabbedPanelsTab"><a href="#panel2">Tab 2</a></li>
  </ul>

  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent" id="panel1">Content 1</div>
    <div class="TabbedPanelsContent" id="panel2">Content 2</div>
  </div>
</div>

If the Console shows no errors but the problem persists, isolate the tab markup in a bare test page (only Spry JS/CSS + the markup). That usually reveals whether a path/404, a stray syntax error, or conflicting markup/CSS is the root cause.

Member Avatar for caps_lock

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.