I have a website which contains both static elements, as well as tabbed content (on a few pages) for the content. All the pages with static elements display my menu bars perfectly across all browsers. However, when I switch the content to a dynamic, tabbed content area, in \[code\]IE\[/code\] (all versions), the menu bar's \[code\]css\[/code\] breaks and deformats the top section, while the tabbed content still works. However, this is causing issues for production and I am unable to identify the issues alone. Therefore, I am seeking some guidance from more experienced developers. I apologize beforehand, I have cut the code down as much as possible to give a good overview of what is going on.The structure is as follows:\[code\] 1. ----BANNER WITH LOGO---- 2. ----MENU BAR 1 ---- 3. ----MENU BAR 2 ---- 4. ---- CONTENT ---- 5. ---- FOOTER ----\[/code\]On some pages, the content contains a few standard elements such as pictures, text, etc., which displays perfectly in all browsers. But as mentioned, when I add dynamic tabs with content to be switched using a basic javascript function, all my menus break.Because the menu does not break upon static content, I am not including the css files, which would only irritate reviewers 
(If requested, I will post) For reference, the menu is based off a css3menu.com design, and their standard css templates are used.In summary, in any version of \[code\]IE\[/code\], the menu bar #1 and #2 break upon populating the content. Tabbed Content Code:\[code\] <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Example</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/15580751/app_style.css" type="text/css" /> <style>._css3m{display:none}</style> <link rel="stylesheet" href="http://stackoverflow.com/questions/15580751/css/jquery-ui.css" /> <script type="text/javascript" src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"> </script> <script type="text/javascript" src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"> </script> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> <!--IE SPECIFIC HTML5 IMPLEMENTOR--> <script> 'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)}) </script> <script type="text/javascript"> function destroy_session() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { window.open("https://creditlegend.com/",'_self',false); } } xmlhttp.open("GET","session_destroy.php",true); xmlhttp.send(); } </script> <SCRIPT type="text/javascript"> window.history.forward(); function noBack() { window.history.forward(); } </SCRIPT> <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> </head> <body id="TotalBodyId" style="margin: 0px 0pt 0pt; background-position: 0pt 0pt;" onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload=""> <div class="new-wrapper"> <div class="new-container"> <!---START TOPHEADER------> <div class="new-topheader"> <div class="new-logo"><img src="http://stackoverflow.com/questions/15580751/images/logosmall.png" /></div> <div class="new-message-logout"> <div class="new-message">Welcome!</div> </div> </div> <!---END TOPHEADER------> <!----START TOP MENU-----------> <div class="menutop"> <nav id="access-top" role="navigation-top" class="clearfix"> <ul> <li><a href="http://stackoverflow.com/questions/15580751/#">Sample 1</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#">Sample 2</a></li> <ul> <li><a href="http://stackoverflow.com/questions/15580751/#">Drop Down 1</a> <ul> <li><a href="http://stackoverflow.com/questions/15580751/#">Drop 1</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#">Drop 2</a></li> </ul> </li> </ul> </ul> </nav> </div> <!----END TOP MENU-------------> <!----START BOTTOM MENU--------> <div class="menubtm"> <nav id="access-btm" role="navigation-btm" class="clearfix"> <ul> <li><a class="n-home" href="http://stackoverflow.com/questions/15580751/#" title="Section_1">Section 1</a> <ul> <li class="ns-sub1"><a href="http://stackoverflow.com/questions/15580751/#" title="sub1">S1: Sub Section 1</a></li> <li class="ns-sub2"><a href="http://stackoverflow.com/questions/15580751/#" title="sub2">S1: Sub Section 2</a></li> </ul> </li> <li><a class="n-nothome" href="http://stackoverflow.com/questions/15580751/#" title="Section_2">Section 2</a> <ul> <li class="ns-ssub1"><a href="http://stackoverflow.com/questions/15580751/#" title="ssub1">S2: Sub Section 1</a></li> <li class="ns-ssub2"><a href="http://stackoverflow.com/questions/15580751/#" title="ssub2">S2: Sub Section 2</a></li> </ul> </li> <li><a class="n-section3" href="http://stackoverflow.com/questions/15580751/sss1" title="Extras">Section 3</a></li> </ul> </nav> </div> <!----END BOTTOM MENU--------> <!----START id#APP--------> <div id="app"> <div class="titlebox"><h3>HUGE PROBLEM HEADER</h3></div> <div class="clear"></div> <div id="tabbed_box1" class="tabbed_box"> <!--BEGIN SELECTORS & POINT HOLDER--> <ul class="tabs"> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_a" class="tab active">Start Tab</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_b" class="tab">Second tab</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_c" class="tab">Third Tab</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_d" class="tab">Fourth tab</a></li> </ul> <div class="ddetails"> <!--BEGIN First Tab--> <section id="content_a" class="contentWborder"> <h3>Tab 1</h3> <div class="dumbborderbox">Welcome to the Start Of All The Problems</div> </section> <!--END First Tab--> <!--BEGIN Second Tab--> <section id="content_b" class="contentWborder" > <h3><span style="display: inline-block;">Second Problem Tab</span></h3> <div class="dumbborderbox">Welcome to the Second Tab</div> </section> <!--END Second Tab--> <!--BEGIN Third tab--> <section id="content_c" class="contentWborder" > <h3><span style="display: inline-block;">Second Problem Tab</span></h3> <div class="dumbborderbox">Welcome to the Third Tab</div> </section> <!--END Third Tab--> <!--BEGIN Fourth Tab--> <section id="content_d" class="contentWborder" > <h3><span style="display: inline-block;">Second Problem Tab</span></h3> <div class="dumbborderbox">Welcome to the Second Tab</div> </section> <!--END fourth tab--> </div> </div> </div><!---END id#app-----> </div><!---END new-container---> </div><!---END new-wrapper---> <div class="footercontainer"> <div class="footerpic"></div> <div class="footertext"> Copyright 2012 - All Rights Reserved </div> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ function doTab() { $(".active").removeClass("active"); $(this).addClass("active"); $(".contentWborder").slideUp(); var content_show = $(this).attr("title"); $("#"+content_show).slideDown(); } // When a link is clicked $("a.tab").click(doTab); // For Direct access through GET HTML: i.e. www.abc.com/example.php#!content_a if (window.location.hash) { $('a[title="' + window.location.hash.substring(2) + '"]').click(); } }); </script>\[/code\]
(If requested, I will post) For reference, the menu is based off a css3menu.com design, and their standard css templates are used.In summary, in any version of \[code\]IE\[/code\], the menu bar #1 and #2 break upon populating the content. Tabbed Content Code:\[code\] <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Example</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/15580751/app_style.css" type="text/css" /> <style>._css3m{display:none}</style> <link rel="stylesheet" href="http://stackoverflow.com/questions/15580751/css/jquery-ui.css" /> <script type="text/javascript" src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"> </script> <script type="text/javascript" src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> </script> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"> </script> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> <!--IE SPECIFIC HTML5 IMPLEMENTOR--> <script> 'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)}) </script> <script type="text/javascript"> function destroy_session() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { window.open("https://creditlegend.com/",'_self',false); } } xmlhttp.open("GET","session_destroy.php",true); xmlhttp.send(); } </script> <SCRIPT type="text/javascript"> window.history.forward(); function noBack() { window.history.forward(); } </SCRIPT> <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> </head> <body id="TotalBodyId" style="margin: 0px 0pt 0pt; background-position: 0pt 0pt;" onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload=""> <div class="new-wrapper"> <div class="new-container"> <!---START TOPHEADER------> <div class="new-topheader"> <div class="new-logo"><img src="http://stackoverflow.com/questions/15580751/images/logosmall.png" /></div> <div class="new-message-logout"> <div class="new-message">Welcome!</div> </div> </div> <!---END TOPHEADER------> <!----START TOP MENU-----------> <div class="menutop"> <nav id="access-top" role="navigation-top" class="clearfix"> <ul> <li><a href="http://stackoverflow.com/questions/15580751/#">Sample 1</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#">Sample 2</a></li> <ul> <li><a href="http://stackoverflow.com/questions/15580751/#">Drop Down 1</a> <ul> <li><a href="http://stackoverflow.com/questions/15580751/#">Drop 1</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#">Drop 2</a></li> </ul> </li> </ul> </ul> </nav> </div> <!----END TOP MENU-------------> <!----START BOTTOM MENU--------> <div class="menubtm"> <nav id="access-btm" role="navigation-btm" class="clearfix"> <ul> <li><a class="n-home" href="http://stackoverflow.com/questions/15580751/#" title="Section_1">Section 1</a> <ul> <li class="ns-sub1"><a href="http://stackoverflow.com/questions/15580751/#" title="sub1">S1: Sub Section 1</a></li> <li class="ns-sub2"><a href="http://stackoverflow.com/questions/15580751/#" title="sub2">S1: Sub Section 2</a></li> </ul> </li> <li><a class="n-nothome" href="http://stackoverflow.com/questions/15580751/#" title="Section_2">Section 2</a> <ul> <li class="ns-ssub1"><a href="http://stackoverflow.com/questions/15580751/#" title="ssub1">S2: Sub Section 1</a></li> <li class="ns-ssub2"><a href="http://stackoverflow.com/questions/15580751/#" title="ssub2">S2: Sub Section 2</a></li> </ul> </li> <li><a class="n-section3" href="http://stackoverflow.com/questions/15580751/sss1" title="Extras">Section 3</a></li> </ul> </nav> </div> <!----END BOTTOM MENU--------> <!----START id#APP--------> <div id="app"> <div class="titlebox"><h3>HUGE PROBLEM HEADER</h3></div> <div class="clear"></div> <div id="tabbed_box1" class="tabbed_box"> <!--BEGIN SELECTORS & POINT HOLDER--> <ul class="tabs"> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_a" class="tab active">Start Tab</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_b" class="tab">Second tab</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_c" class="tab">Third Tab</a></li> <li><a href="http://stackoverflow.com/questions/15580751/#" title="content_d" class="tab">Fourth tab</a></li> </ul> <div class="ddetails"> <!--BEGIN First Tab--> <section id="content_a" class="contentWborder"> <h3>Tab 1</h3> <div class="dumbborderbox">Welcome to the Start Of All The Problems</div> </section> <!--END First Tab--> <!--BEGIN Second Tab--> <section id="content_b" class="contentWborder" > <h3><span style="display: inline-block;">Second Problem Tab</span></h3> <div class="dumbborderbox">Welcome to the Second Tab</div> </section> <!--END Second Tab--> <!--BEGIN Third tab--> <section id="content_c" class="contentWborder" > <h3><span style="display: inline-block;">Second Problem Tab</span></h3> <div class="dumbborderbox">Welcome to the Third Tab</div> </section> <!--END Third Tab--> <!--BEGIN Fourth Tab--> <section id="content_d" class="contentWborder" > <h3><span style="display: inline-block;">Second Problem Tab</span></h3> <div class="dumbborderbox">Welcome to the Second Tab</div> </section> <!--END fourth tab--> </div> </div> </div><!---END id#app-----> </div><!---END new-container---> </div><!---END new-wrapper---> <div class="footercontainer"> <div class="footerpic"></div> <div class="footertext"> Copyright 2012 - All Rights Reserved </div> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ function doTab() { $(".active").removeClass("active"); $(this).addClass("active"); $(".contentWborder").slideUp(); var content_show = $(this).attr("title"); $("#"+content_show).slideDown(); } // When a link is clicked $("a.tab").click(doTab); // For Direct access through GET HTML: i.e. www.abc.com/example.php#!content_a if (window.location.hash) { $('a[title="' + window.location.hash.substring(2) + '"]').click(); } }); </script>\[/code\]