4 Replies Latest reply on Feb 15, 2010 10:50 AM by Nancy OShea

    Layers causing page shift

    Wauk1

      I am designing a web page and I am using layers to create the menu system. Everything is great with the page until I add the menu layer with rollover images. Once I view it in Internet Explorer and click on the rollover image the page shifts up and to the left. Has anyone else had an issue with layers causing your pages to shift?

       

      The page is left justified and the width is set to 100% and the margins are set to 0px.

        • 1. Re: Layers causing page shift
          Nancy OShea Adobe Community Professional & MVP

          Layers or APDivs are seldom the best choice for primary layouts.

          Here's why.

          Why  do APDivs move?
          http://forums.adobe.com/message/2181263#2181263

           

          Adobe Developer's Center - Learning to Work with CSS -
          http://www.adobe.com/devnet/dreamweaver/css.html

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          www.alt-web.com/
          www.twitter.com/altweb
          www.alt-web.blogspot.com

          • 2. Re: Layers causing page shift
            John Waller Adobe Community Professional & MVP

            Much better to upload the page and give us a link than to try and describe the symptoms (which may be caused by any number of issues in the code).

            • 3. Re: Layers causing page shift
              Wauk1 Level 1

              Thank you for the response, however I tried everything that the article suggested and I also looked into the IE box model bug hoping that was it because it previews fine in Firefox and Safari. I re-built the page and as soon as I add a rollover image into the AP div for the drop down menu the shift started happening. We are running IE7 & 8. I have attached the code hoping that will help.

               

               

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <!-- TemplateBeginEditable name="doctitle" -->
              <title>Continuous Improvement</title>
              <!-- TemplateEndEditable -->
              <style type="text/css">
              <!--
              body {
              margin-top: 2px;
              margin-left: 2px;
              background-color: #FFF;
              margin-right: 2px;
              margin-bottom: 2px;
              font-size: 12px;
              }
              .top_menu_bg {
              background-image: url(../assets/images/Top%20Menu%20Slice.png);
              background-repeat: repeat-x;
              }
              .deptmenu {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 11px;
              font-weight: bold;
              padding-left: 5px;
              color: #333;
              }
              .main_menu {
              background-image: url(../assets/images/Menu%20Background.png);
              background-repeat: repeat-x;
              }
              .table_subhead {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 12px;
              font-weight: bold;
              color: #FFF;
              background-color: #8BB1D8;
              }
              .photo_caption {font-family: Arial, Helvetica, sans-serif;
              font-size: 11px;
              font-weight: bold;
              padding: 5px;
              }
              .table_header {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 12px;
              font-weight: bold;
              color: #FFF;
              background-color: #336699;
              }
              .dropdown_menu {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 13px;
              font-weight: lighter;
              color: #FFF;
              padding: 10px;
              }
              .table_body {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 12px;
              padding-left: 10px;
              padding-top: 10px;
              }
              .vert_line {
              background-image: url(../assets/images/vert_line.jpg);
              background-repeat: repeat-y;
              background-position: center center;
              }
              .main_header {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 18px;
              font-weight: bold;
              color: #336699;
              padding-left: 10px;
              padding-top: 10px;
              }
              .copywrite {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 10px;
              color: #000;
              text-align: left;
              padding-left: 10px;
              }
              .next_event_copy {font-family: Arial, Helvetica, sans-serif;
              font-size: 12px;
              font-weight: normal;
              color: #000;
              }
              .dept_header {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 20px;
              font-weight: bold;
              color: #CFDFEF;
              padding-left: 5px;
              }
              #apDiv1 {
              position:absolute;
              left:506px;
              top:281px;
              width:179px;
              height:250px;
              z-index:1;
              background-color: #000000;
              visibility: visible;
              }
              #apDiv2 {
              position:absolute;
              left:0px;
              top:92px;
              width:145px;
              height:41px;
              z-index:2;
              }
              #main {
              position:absolute;
              left:2px;
              top:93px;
              width:850px;
              height:40px;
              z-index:1;
              visibility: visible;
              }
              #departments {
              position:absolute;
              left:30px;
              top:133px;
              width:180px;
              height:auto;
              z-index:3;
              visibility: hidden;
              }
              #hidedroppdown {
              position:absolute;
              left:25px;
              top:134px;
              width:227px;
              height:376px;
              z-index:2;
              visibility: hidden;
              }
              #resourcesddm {
              position:absolute;
              left:499px;
              top:133px;
              width:183px;
              height:auto;
              z-index:5;
              visibility: hidden;
              }
              #hidedropdown2 {
              position:absolute;
              left:481px;
              top:133px;
              width:213px;
              height:360px;
              z-index:4;
              visibility: hidden;
              }
              a:link {
              color: #336699;
              text-decoration: none;
              }
              a:visited {
              text-decoration: none;
              color: #336699;
              }
              a:hover {
              text-decoration: underline;
              color: #999999;
              }
              a:active {
              text-decoration: none;
              #apDiv3 {
              position:absolute;
              left:716px;
              top:239px;
              width:263px;
              height:184px;
              z-index:6;
              color: #336699;
              color: #336699;
              color: #336699;
              }
              #apDiv4 {
              position:absolute;
              left:679px;
              top:362px;
              width:88px;
              height:54px;
              z-index:6;
              }
              #apDiv5 {
              position:absolute;
              left:698px;
              top:305px;
              width:229px;
              height:174px;
              z-index:1;
              }
              #apDiv6 {
              position:absolute;
              left:813px;
              top:243px;
              width:263px;
              height:161px;
              z-index:7;
              }
              #apDiv7 {
              position:absolute;
              left:828px;
              top:251px;
              width:315px;
              height:145px;
              z-index:7;
              }
              -->
              </style>
              <script src="../Scripts/swfobject_modified.js" type="text/javascript"></script>
              <script type="text/javascript">
              <!--
              function MM_preloadImages() { //v3.0
                var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
              }
              function MM_swapImgRestore() { //v3.0
                var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
              }
              function MM_findObj(n, d) { //v4.01
                var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                if(!x && d.getElementById) x=d.getElementById(n); return x;
              }

              function MM_swapImage() { //v3.0
                var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
              }
              function MM_showHideLayers() { //v9.0
                var i,p,v,obj,args=MM_showHideLayers.arguments;
                for (i=0; i<(args.length-2); i+=3)
                with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
                  if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
                  obj.visibility=v; }
              }
              //-->
              </script>
              <!-- TemplateBeginEditable name="head" -->
              <!-- TemplateEndEditable -->
              </head>

              <body onLoad="MM_preloadImages('../assets/images/SPX Over.png','../assets/images/Waukesha Over.png','../assets/images/HVS Over.png','../assets/images/PSD Over.png','../assets/images/Departments Over.png','../assets/images/Waukesha News Over.png','../assets/images/Training Over.png','../assets/images/Resources Over.png','../assets/images/Media Over.png','../assets/images/ci_over_ddm.jpg','../assets/images/eng_over_ddm.jpg','../asse ts/images/fieldservice_over_ddm.jpg','../assets/images/finance_over_ddm.jpg','../assets/im ages/hr_over_ddm.jpg','../assets/images/indeng_over_ddm.jpg','../assets/images/is_over_ddm .jpg.LCK','../assets/images/maintenance_over_ddm.jpg','../assets/images/manft_over_ddm.jpg ','../assets/images/quality_over_ddm.jpg','../assets/images/safety_over_ddm.jpg','../asset s/images/supplychain_over_ddm.jpg','../departments/continuous_improvement/assets/images/we s_home_over.jpg','../assets/images/concur_over_ddm_02.jpg','../assets/images/cliqbooks_ove r_ddm_01.jpg','../assets/images/fidelity_over_ddm_03.jpg','../assets/images/myspx_over_ddm _04.jpg','../assets/images/perform_over_ddm_05.jpg','../assets/images/sap_over_ddm_06.jpg' ,'../assets/images/spxnews_over_ddm_08.jpg','../assets/images/travel_over_ddm_10.jpg','../ assets/images/spxbenefits_over_ddm_07.jpg','../assets/images/blogs_over_ddm_01.jpg','../as sets/images/gear_over_ddm_13.jpg','../assets/images/man_eng_over_ddm.jpg','../assets/image s/timelink_emp_over_ddm_10.jpg','../assets/images/timelink_sup_over_ddm_11.jpg')">
              <div id="main"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('dept','','../assets/images/Departments Over.png',1)"><img src="../assets/images/Departments.png" name="dept" width="150" height="40" border="0" id="dept" onClick="MM_showHideLayers('departments','','show','hidedroppdown','','show')" /></a><a href="../waukesha_news/waukesha_news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('wn','','../assets/images/Waukesha News Over.png',1)"><img src="../assets/images/Waukesha News.png" name="wn" width="150" height="40" border="0" id="wn" /></a><a href="../Training/training.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('training','','../assets/images/Training Over.png',1)"><img src="../assets/images/Training.png" name="training" width="150" height="40" border="0" id="training" /></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('resources','','../assets/images/Resources Over.png',1)"><img src="../assets/images/Resources.png" name="resources" width="150" height="40" border="0" id="resources" onClick="MM_showHideLayers('resourcesddm','','show','hidedropdown2','','show')" /></a><a href="../media/media.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('media','','../assets/images/Media Over.png',1)"><img src="../assets/images/Media.png" name="media" width="150" height="40" border="0" id="media" /></a></div>
              <div id="departments"><a href="../departments/continuous_improvement/continuous_improvement.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ci','','../assets/images/ci_over_ddm.jpg',1)"><img src="../assets/images/ci_ddm.jpg" name="ci" width="180" height="25" border="0" id="ci" /></a><a href="../departments/engineering/engineering.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('eng','','../assets/images/eng_over_ddm.jpg',1)"><img src="../assets/images/eng_ddm.jpg" name="eng" width="180" height="25" border="0" id="eng" /></a><a href="../departments/field_service/field_service.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('field service','','../assets/images/fieldservice_over_ddm.jpg',1)"><img src="../assets/images/fieldservice_ddm.jpg" name="field service" width="180" height="25" border="0" id="field service" /></a><a href="../departments/finance/finance.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('finance','','../assets/images/finance_over_ddm.jpg',1)"><img src="../assets/images/finance_ddm.jpg" name="finance" width="180" height="25" border="0" id="finance" /></a><a href="../departments/human_resources/human_resources.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('hr','','../assets/images/hr_over_ddm.jpg',1)"><img src="../assets/images/hr_ddm.jpg" name="hr" width="180" height="25" border="0" id="hr" /></a><a href="../departments/industrial_engineering/industrial_engineering.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ind eng','','../assets/images/indeng_over_ddm.jpg',1)"><img src="../assets/images/indeng_ddm.jpg" name="ind eng" width="180" height="25" border="0" id="ind eng" /></a><a href="../departments/information_systems/information_systems.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Information Systems','','../assets/images/is_over_ddm.jpg',0)"><img src="../assets/images/is_ddm.jpg" name="Information Systems" width="180" height="25" border="0" id="Information Systems" /></a><a href="../departments/maintenance/maintenance.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('main','','../assets/images/maintenance_over_ddm.jpg',1)"><img src="../assets/images/maintenance_ddm.jpg" name="main" width="180" height="25" border="0" id="main2" /></a><a href="../departments/manufacturing/manufacturing.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('man','','../assets/images/manft_over_ddm.jpg',1)"><img src="../assets/images/manft_ddm.jpg" name="man" width="180" height="25" border="0" id="man" /></a><a href="../departments/manufacturing_engineering/manufacturing_engineering.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('maneng','','../assets/images/man_eng_over_ddm.jpg',1)"><img src="../assets/images/man_eng_ddm.jpg" name="maneng" width="180" height="24" border="0" id="maneng" /></a><a href="../departments/marketing_sales/marketing_sales.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('marksale','','../assets/images/marksales_over_ddm.jpg',0)"><im g src="../assets/images/marksales_ddm.jpg" name="marksale" width="180" height="25" border="0" id="marksale" /></a><a href="../departments/quality/quality.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('quality','','../assets/images/quality_over_ddm.jpg',1)"><img src="../assets/images/quality_ddm.jpg" name="quality" width="180" height="25" border="0" id="quality" /></a><a href="../departments/safety/safety.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('safety','','../assets/images/safety_over_ddm.jpg',1)"><img src="../assets/images/safety_ddm.jpg" name="safety" width="180" height="25" border="0" id="safety" /></a><a href="../departments/supply_chain/supply_chain.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('supply chain','','../assets/images/supplychain_over_ddm.jpg',1)"><img src="../assets/images/supplychain_ddm.jpg" name="supply chain" width="180" height="25" border="0" id="supply chain" /></a></div>
              <div id="hidedroppdown"><img src="../assets/images/transparent.gif" width="225" height="373" onMouseOver="MM_showHideLayers('departments','','hide','hidedroppdown','','hide')" /></div>
              <div id="resourcesddm"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('blogs','','../assets/images/blogs_over_ddm_01.jpg',1)"><img src="../assets/images/blogs_ddm_01.jpg" name="blogs" width="180" height="25" border="0" id="blogs" /></a><a href="http://portal.travelleaderscorp.com/spx/" target="_blank" onMouseOver="MM_swapImage('cliqbooks','','../assets/images/cliqbooks_over_ddm_01.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/cliqbooks_ddm_01.jpg" name="cliqbooks" width="180" height="25" border="0" id="cliqbooks" /></a><a href="https://concurapp.spx.com/concur/expense" target="_blank" onMouseOver="MM_swapImage('concur','','../assets/images/concur_over_ddm_02.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/concur_ddm_02.jpg" name="concur" width="180" height="25" border="0" id="concur" /></a><a href="https://login.fidelity.com/ftgw/Fidelity/NBPart/Login/Init?AuthRedUrl=https://workplaceser vices400.fidelity.com/NBHome.html" target="_blank" onMouseOver="MM_swapImage('fidelity','','../assets/images/fidelity_over_ddm_03.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/fidelity_ddm_03.jpg" name="fidelity" width="180" height="25" border="0" id="fidelity" /></a><a href="http://my.spx.com/page/home" target="_blank" onMouseOver="MM_swapImage('myspx','','../assets/images/myspx_over_ddm_04.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/myspx_ddm_04.jpg" name="myspx" width="180" height="25" border="0" id="myspx" /></a><a href="http://experiencewaukeshatest/departments/human_resources/hr_forms.html" target="_blank" onMouseOver="MM_swapImage('perform','','../assets/images/perform_over_ddm_05.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/perform_ddm_05.jpg" name="perform" width="180" height="25" border="0" id="perform" /></a><a href="http://experiencewaukesha/transforming_media/sap_doc_vids.html" target="_blank" onMouseOver="MM_swapImage('sap','','../assets/images/sap_over_ddm_06.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/sap_ddm_06.jpg" name="sap" width="180" height="25" border="0" id="sap" /></a><a href="https://spx.ingplans.com/csportal/welcome.do" target="_blank" onMouseOver="MM_swapImage('benefitscenter','','../assets/images/spxbenefits_over_ddm_07.j pg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/spxbenefits_ddm_07.jpg" name="benefitscenter" width="180" height="25" border="0" id="benefitscenter" /></a><a href="http://my.spx.com/page/home" target="_blank" onMouseOver="MM_swapImage('spxnews','','../assets/images/spxnews_over_ddm_08.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/spxnews_ddm_08.jpg" name="spxnews" width="180" height="25" border="0" id="spxnews" /></a><a href="http://weswt-tla01:8001/timelink/tl6ess/ess" target="_blank" onMouseOver="MM_swapImage('timelink_emp','','../assets/images/timelink_emp_over_ddm_10.jp g',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/timelink_emp_ddm_10.jpg" name="timelink_emp" width="180" height="25" border="0" id="timelink_emp" /></a><a href="http://weswt-tla01:8001/timelink/login" target="_blank" onMouseOver="MM_swapImage('timelinksup','','../assets/images/timelink_sup_over_ddm_11.jpg ',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/timelink_sup_ddm_11.jpg" name="timelinksup" width="180" height="25" border="0" id="timelinksup" /></a><a href="http://experiencewaukesha/Departments/human_resources/local.html" target="_blank" onMouseOver="MM_swapImage('travel','','../assets/images/travel_over_ddm_10.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/travel_ddm_10.jpg" name="travel" width="180" height="25" border="0" id="travel" /></a><a href="../assets/downloads/Waukesha_Experience_Handout_Full.pdf" target="_blank" onMouseOver="MM_swapImage('waukeshaexp','','../assets/images/waukesha_exp_over_ddm_12.jpg ',0)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/waukesha_exp_ddm_12.jpg" name="waukeshaexp" width="180" height="25" border="0" id="waukeshaexp" /></a><a href="http://secure.wildimpact.com/Default.aspx?alias=secure.wildimpact.com/waukeshagear" target="_blank" onMouseOver="MM_swapImage('waukeshagear','','../assets/images/gear_over_ddm_13.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/gear_ddm_13.jpg" name="waukeshagear" width="180" height="25" border="0" id="waukeshagear" /></a></div>
              <div id="hidedropdown2"><img src="../assets/images/transparent.gif" width="210" height="360" onMouseOver="MM_showHideLayers('resourcesddm','','hide','hidedropdown2','','hide')" /></div>
              <div id="apDiv3"></div>
              <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="1583" height="50" align="left" valign="top" bgcolor="#FFFFFF"><img src="../assets/images/waukesha_brand_logo.jpg" width="199" height="52" /></td>
                  <td width="50" height="50" align="right" valign="top" bgcolor="#FFFFFF"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="50" height="50" id="FlashID" title="w">
                    <param name="movie" value="../assets/flash/spinning_w.swf" />
                    <param name="quality" value="high" />
                    <param name="wmode" value="opaque" />
                    <param name="swfversion" value="6.0.65.0" />
                    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
                    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="../assets/flash/spinning_w.swf" width="50" height="50">
                      <!--<![endif]-->
                      <param name="quality" value="high" />
                      <param name="wmode" value="opaque" />
                      <param name="swfversion" value="6.0.65.0" />
                      <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                      <div>
                        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                      </div>
                      <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                  </object></td>
                </tr>
                <tr>
                  <td height="40" colspan="2" align="left" valign="top" bgcolor="#000000" class="top_menu_bg"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="1387" height="41" align="left" valign="top" class="top_menu_bg"><a href="http://www.spx.com" target="_blank" onMouseOver="MM_swapImage('spx','','../assets/images/SPX Over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/SPX.png" alt="SPX" name="spx" width="151" height="31" border="0" align="left" id="spx" /></a><a href="http://waukeshaelectric.com" target="_blank" onMouseOver="MM_swapImage('Waukesha','','../assets/images/Waukesha Over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/Waukesha.png" alt="Waukesha" name="Waukesha" width="149" height="31" border="0" align="left" id="Waukesha" /></a><a href="http://www.highvoltagesupply.com/" target="_blank" onMouseOver="MM_swapImage('HVS','','../assets/images/HVS Over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/HVS.png" alt="HVS" name="HVS" width="149" height="31" border="0" align="left" id="HVS" /></a><a href="http://www.psdohio.com/" target="_blank" class="top_menu_bg" onMouseOver="MM_swapImage('PSD','','../assets/images/PSD Over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="../assets/images/PSD.png" alt="PSD" name="PSD" width="149" height="31" border="0" align="left" id="PSD" /></a></td>
                      <td width="250" align="right" valign="top"><object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="40">
                        <param name="movie" value="../assets/flash/clock.swf" />
                        <param name="quality" value="high" />
                        <param name="wmode" value="opaque" />
                        <param name="swfversion" value="6.0.65.0" />
                        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
                        <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
                        <!--[if !IE]>-->
                        <object type="application/x-shockwave-flash" data="../assets/flash/clock.swf" width="250" height="40">
                          <!--<![endif]-->
                          <param name="quality" value="high" />
                          <param name="wmode" value="opaque" />
                          <param name="swfversion" value="6.0.65.0" />
                          <param name="expressinstall" value="../Scripts/expressInstall.swf" />
                          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                          <div>
                            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
                          </div>
                          <!--[if !IE]>-->
                        </object>
                        <!--<![endif]-->
                      </object></td>
                    </tr>
                  </table></td>
                </tr>
                <tr class="main_menu">
                  <td height="40" colspan="2" valign="top" class="main_menu"> </td>
                </tr>
                <!-- TemplateBeginEditable name="EditRegion1" -->
                <tr>
                  <td height="52" colspan="2" valign="middle" bgcolor="#93B7DB"><span class="dept_header">Department - Page Title</span></td>
                </tr>
                <tr>
                  <td height="300" colspan="2" align="left" valign="top"><table border="0" align="left" cellpadding="0" cellspacing="0">
                    <tr>
                      <td width="162" height="301" valign="top" bgcolor="#cccccc"><p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WES Home21','','../departments/continuous_improvement/assets/images/wes_home_over.jpg',1)"><b r />
                      </a><span class="deptmenu">Waukesha Home</span></p>
                        <p class="deptmenu">Department Home</p>
                        <p class="deptmenu">Menu Item</p>
                        <p class="deptmenu">Menu Item</p>
                        <p class="deptmenu">Menu Item</p>
                        <p class="deptmenu">Men Item</p>
                        <p> </p></td>
                      <td width="814" align="left" valign="top" class="table_body"> </td>
                      </tr>
                  </table></td>
                </tr>
                <!-- TemplateEndEditable -->
                <tr>
                  <td height="40" colspan="2" align="center" valign="middle" bgcolor="#DDDDDD" class="copywrite">&copy; Waukesha Electric Systems 2009</td>
                </tr>
              </table>
              <script type="text/javascript">
              <!--
              swfobject.registerObject("FlashID");
              swfobject.registerObject("FlashID2");
              //-->
              </script>
              </body>
              </html>

              • 4. Re: Layers causing page shift
                Nancy OShea Adobe Community Professional & MVP

                We can't see your images.  Posting a URL to your live page would give us a better indication of what is happening.

                 

                Offhand, I'm not a big fan of Image Rollovers for navigation.  IMO, a CSS styled horizontal menu or even a Spry Horizontal menu would do everything you need with less code and be much simpler to edit later.

                 

                CSS Tab Designer creates 60+ CSS Styled Button and Tab Menus  (download)
                http://www.highdots.com/css-tab-designer/

                 

                List-O-Rama  (DW Extension)
                http://www.dmxzone.com/go?5618

                 

                CSS  Menu Maker (On-Line Menu Generator)
                http://www.cssmenumaker.com/

                 

                Nancy O.

                Alt-Web Design & Publishing

                Web | Graphics | Print | Media  Specialists
                www.alt-web.com/
                www.twitter.com/altweb
                www.alt-web.blogspot.com