We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 27210
    • 158 Posts
    [SOLVED] - removed comments above DOCTYPE statement - thanks to bennyb below!

    Evolution 1.0.2

    Using MuddyDogPaws example "CSSplay Menu - Flyout". The menu works fine in Firefox but it doesn’t work in IE.

    The most basic problem is that hover, and hence menu unfolding, doesn’t work in IE ( version 8 ).

    /* common styling */
    .menu {font-family: arial, sans-serif; width:253px; position:relative; margin:0; font-size:12px; margin:0;}
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:253px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#D4DEE9; line-height:22px; font-size:12px;}
    .menu ul {padding:0; margin:0;list-style-type: none; }
    .menu ul li {float:left; margin-right:1px; position:relative;}
    .menu ul li ul {display: none;}
    
    /* specific to non IE browsers */
    .menu ul li:hover a {color:#fff; background:#6A6F72;}
    .menu ul li:hover ul {display:block; position:absolute; top:0; left:254px; width:253px;}
    .menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
    .menu ul li:hover ul li:hover a.hide {width:253px;}
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {display:block; background:#B8B8B8; color:#000; width:253px;}
    .menu ul li:hover ul li a:hover {background:#A1A1A1; color:#fff;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:254px; top:0; color:#000;}
    .menu ul li:hover ul li:hover ul li a {display:block; width:250px; background:#dfc184; color:#000;}
    .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
    


    Thank you very much!
    Steve
      • 36926
      • 701 Posts
      Quote from: signcarver at Aug 12, 2010, 08:05 AM

      Evolution 1.0.2

      Using MuddyDogPaws example "CSSplay Menu - Flyout". The menu works fine in Firefox but it doesn’t work in IE.

      The most basic problem is that hover, and hence menu unfolding, doesn’t work in IE ( version 8 ).

      /* common styling */
      .menu {font-family: arial, sans-serif; width:253px; position:relative; margin:0; font-size:12px; margin:0;}
      .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:253px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#D4DEE9; line-height:22px; font-size:12px;}
      .menu ul {padding:0; margin:0;list-style-type: none; }
      .menu ul li {float:left; margin-right:1px; position:relative;}
      .menu ul li ul {display: none;}
      
      /* specific to non IE browsers */
      .menu ul li:hover a {color:#fff; background:#6A6F72;}
      .menu ul li:hover ul {display:block; position:absolute; top:0; left:254px; width:253px;}
      .menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
      .menu ul li:hover ul li:hover a.hide {width:253px;}
      .menu ul li:hover ul li ul {display: none;}
      .menu ul li:hover ul li a {display:block; background:#B8B8B8; color:#000; width:253px;}
      .menu ul li:hover ul li a:hover {background:#A1A1A1; color:#fff;}
      .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:254px; top:0; color:#000;}
      .menu ul li:hover ul li:hover ul li a {display:block; width:250px; background:#dfc184; color:#000;}
      .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
      


      Thank you very much!
      Steve

      Whats your HTML?
        • 27210
        • 158 Posts
        bennyb - below is the Wayfinder call. The site isn’t live so i can’t give you a link to the actual page.

         [!Wayfinder? &startId=`50`  &parentClass=`hide` &level=`0` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_flyout` !]


          • 36926
          • 701 Posts
          Quote from: signcarver at Aug 12, 2010, 08:48 AM

          bennyb - below is the Wayfinder call. The site isn’t live so i can’t give you a link to the actual page.

           [!Wayfinder? &startId=`50`  &parentClass=`hide` &level=`0` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_flyout` !]




          Can you view source on the page and paste in the html for the menu that’s be generated.
            • 27210
            • 158 Posts
            bennyb - thanks for your patience - here is the html code:
            <!-- start FloatStep Template-->
             
            <!-- start page-header -->
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <title>Atlantic Aluminum Marine | FloatStep® Home</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <meta name="keywords" content="floatstep, floatstep home, floatstep ladder, table of contents">
            <meta name="description" content="This page is the table of contents for the other floatstep pages">
            <link rel="stylesheet" href="assets/css/mainstyle.css" type="text/css" media="screen" />
            <base href="http://localhost/modx/atlalum/" />
            <script type="text/javascript"> 
            <!--
            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_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_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];}
            }
            //-->
            </script>
            	<script type="text/javascript" src="assets/snippets/ajaxSearch/js/ajaxSearch.js"></script>
            <!-- start AjaxSearch header -->
            <script type="text/javascript"> 
            //<![CDATA[
            as_version = '1.8.4';
            advSearch = 'oneword';
            subSearch = 5;
            ucfg = ' &extract=`0:content` &AS_landing=`8` &AS_showResults=`0` &showMoreResults=`1` &moreResultsPage=`8` &addJscript=`0`';
            //]]>
            </script>
            <!-- end AjaxSearch header -->
            <link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/flyout.css" />
            <!--[if lte IE 6]>
            <link rel="stylesheet" media="all" type="text/css" href="assets/snippets/wayfinder/examples/cssplay/flyout_ie.css" />
            <![endif]-->
            </head>
            <body onload="MM_preloadImages('assets/images/button-home-on.jpg','assets/images/button-products-on.jpg','assets/images/button-news-and-events-on.jpg','assets/images/button-about-us-on.jpg','assets/images/button-contact-us-on.jpg')">
            <!-- end page-header -->
             
              <!-- start top-banner -->
            <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
            <table align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top" width="300"><table id="logo-top-banner" width="300" height="290" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td valign="top" width="300"><table align="center" width="1000" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td colspan="2"><div style="padding: 0 20px 3px 0px; float:right;" class="maintext"> <a href="index.html" class="toplinks">Home</a> | <a href="contact-us.html" class="toplinks">Contact Us</a></div></td>
                          </tr>
                          <tr>
                            <td valign="top" width="300"><table id="logo-top-banner2" width="300" height="290" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                  <td valign="top" width="300"><a href="index.html"><img src="assets/images/logo-top-banner.jpg" width="300" height="290" border="0" alt="atlantic aluminum marine products logo" /></a></td>
                                </tr>
                              </table></td>
                            <td valign="top" width="700" height="290"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="700" height="290" id="FlashID" title="Atlantic Aluminum and Marine Flash Movie">
                              <param name="movie" value="assets/images/atlantic-aluminum-flash.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/images/atlantic-aluminum-flash.swf" width="700" height="290">
                                <!--<![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>
                        <a href="index.html"></a></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <!-- end top-banner --> 
            <script type="text/javascript"> 
            <!--
            swfobject.registerObject("FlashID");
            swfobject.registerObject("FlashID");
            //-->
            </script> 
             
              <!-- start main-nav-bar -->
            <table align="center" width="1000" height="41" background="assets/images/nav-bar-bg.gif" style="background-repeat:no-repeat" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','assets/images/button-home-on.jpg',1)"><img src="assets/images/button-home-off.jpg" alt="home button" name="Image11" width="73" height="41" border="0" id="Image11" /></a></td>
                <td valign="top"><a href="products-all.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','assets/images/button-products-on.jpg',1)"><img src="assets/images/button-products-off.jpg" alt="products button" name="Image6" width="89" height="41" border="0" id="Image6" /></a></td>
                <td valign="top"><a href="news-and-events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','assets/images/button-news-and-events-on.jpg',1)"><img src="assets/images/button-news-and-events-off.jpg" alt="news and events button" name="Image7" width="151" height="41" border="0" id="Image7" /></a><a href="blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','assets/images/button-blog-on.jpg',1)"><img src="assets/images/button-blog-off.jpg" alt="blog button" name="Image10" width="65" height="41" border="0" id="Image10" /></a></td>
                <td valign="top"><a href="about-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','assets/images/button-about-us-on.jpg',1)"><img src="assets/images/button-about-us-off.jpg" alt="about us button" name="Image8" width="92" height="41" border="0" id="Image8" /></a></td>
                <td valign="top"><a href="contact-us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','assets/images/button-contact-us-on.jpg',1)"><img src="assets/images/button-contact-us-off.jpg" alt="contact us button" name="Image9" width="102" height="41" border="0" id="Image9" /></a></td>
                <td valign="top" background="assets/images/main-nav-bar-right-filler.jpg" style="background-repeat:no-repeat" width="428" height="41"><!-- the search CSS stuff is defined in the assets/css/mainstyle.css file -->
                  <div align="left" class="maintext" id="search"> 
                    <!--search_terms--> 
                    <span> </span><a name="search"></a>
            <form id="ajaxSearch_form"  action="search-results.html" method="post">
                <fieldset>
                <input type="hidden" name="advSearch" value="oneword" />
                <label for="ajaxSearch_input">
                  <input id="ajaxSearch_input" class="cleardefault" type="text" name="search" value="Search here..." onfocus="this.value=(this.value=='Search here...')? '' : this.value ;" />
                </label>
                <label for="ajaxSearch_submit">
                  <input id="ajaxSearch_submit" type="submit" name="sub" value="Go!" />
                </label>
                </fieldset>
            </form>
             
             
             
            <div id="ajaxSearch_output"></div>
             
             </div></td>
              </tr>
            </table>
            <!-- end main-nav-bar --> 
             
            <table border="0" cellspacing="0" cellpadding="0" width="1000" align="center" bgcolor="#ffffff">
              <tbody>
                <tr>
                  <td><table border="0" cellspacing="0" cellpadding="0" width="960" align="center" bgcolor="#ffffff">
                      <tbody>
                        <tr valign="top">
                          <td width="253"><!-- Start left nav bar for products -->
            <table border="0" cellspacing="0" cellpadding="0" width="253">
              <tr>
                <td valign="top"><img src="assets/images/space.gif" width="253" height="25" alt="spacer graphic"></td>
              </tr>
              <tr>
                <td valign="top" background="assets/images/tab-ourproducts.gif" border="0" width="253" height="31"><div align="center" class="navheadertext" style="margin-top:5px;">Products</div></td>
              </tr>
              <tr>
                <td valign="top"><img src="assets/images/space.gif" width="253" height="10" alt="spacer graphic"></td>
              </tr>
              <!---  PRODUCT TABLE --->
              <tr>
                <td valign="top"><table border="0" cellspacing="0" cellpadding="0" width="253" align="center">
                    <tr>
                      <td valign="top" width="253"><div align="center"> <div align="left" width:253px;"  class="menu"  class="menu">
                <ul style="list-style-type:none;">
                    <li><a  class="hide active" href="/modx/atlalum/floatstep-home.html" title="FloatStep® Home">FloatStep® Home</a>
                <!--[if lte IE 6]>
                <a class="sub" href="/modx/atlalum/floatstep-home.html" title="FloatStep® Home">FloatStep® Home
                <table><tr><td>
                <![endif]-->
                <ul style="list-style-type:none;" class="menu">
              <li ><a href="/modx/atlalum/floatstep-why-floatstep.html" title="Why FloatStep®?"  class="menu">Why FloatStep®?</a> </li>
             
            <li ><a href="http://www.atlanticaluminummarine.com/assets/pdffiles/FSL_STD_INT0608.pdf" title="FloatStep® - Assembly Instructions" target="_blank" class="menu">FloatStep® - Assembly Instructions</a> </li>
             
            <li ><a href="http://www.atlanticaluminummarine.com/assets/pdffiles/The_Award_Winning_FLOATSTEP_II.pdf" title="FloatStep® - PDF Fly Sheet" target="_blank" class="menu">FloatStep® - PDF Fly Sheet</a> </li>
             
            <li ><a href="http://www.atlanticaluminummarine.com/assets/pdffiles/FloatStep-Warranty.pdf" title="FloatStep® - Warranty" target="_blank" class="menu">FloatStep® - Warranty</a> </li>
             
            <li ><a href="/modx/atlalum/floatstep-dealer-inquiries.html" title="FloatStep® - Dealer Inquiries"  class="menu">FloatStep® - Dealer Inquiries</a> </li>
             
            <li ><a href="/modx/atlalum/floatstep-how-to-measure.html" title="FloatStep® - How to Measure"  class="menu">FloatStep® - How to Measure</a> </li>
             
            <li ><a href="/modx/atlalum/floatstep-movie-clips.html" title="FloatStep® - Movie Clips"  class="menu">FloatStep® - Movie Clips</a> </li>
             
            <li ><a href="/modx/atlalum/floatstep-pricing.html" title="FloatStep® - Pricing"  class="menu">FloatStep® - Pricing</a> </li>
             
            <li ><a href="/modx/atlalum/floatstep-the-floatstep-difference.html" title="FloatStep® - The FloatStep® Difference"  class="menu">FloatStep® - The FloatStep® Difference</a> </li>
             
            <li ><a href="/modx/atlalum/floatstep-warranty-registration.html" title="FloatStep® - Warranty Registration"  class="menu">FloatStep® - Warranty Registration</a> </li>
             
            <li><a  class="last hide" href="/modx/atlalum/floatstep-gallery.html" title="FloatStep® - Gallery">FloatStep® - Gallery</a>
                <!--[if lte IE 6]>
                <a class="sub" href="/modx/atlalum/floatstep-gallery.html" title="FloatStep® - Gallery">FloatStep® - Gallery
                <table><tr><td>
                <![endif]-->
                <ul style="list-style-type:none;" class="menu">
              <li ><a href="/modx/atlalum/floatstep-gallery-competitors-issues.html" title="FloatStep® - Gallery - Competitors' Issues"  class="menu">FloatStep® - Gallery - Competitors' Issues</a> </li>
             
            <li  class="last"><a href="/modx/atlalum/floatstep-gallery-floatstep-in-action.html" title="FloatStep® - Gallery - FloatStep® in Action"  class="menu">FloatStep® - Gallery - FloatStep® in Action</a> </li>
             
             
            </ul>
             
                <!--[if lte IE 6]>
            	</td></tr></table>
                </a>
                <![endif]-->
            </li>
             
             
            </ul>
             
                <!--[if lte IE 6]>
            	</td></tr></table>
                </a>
                <![endif]-->
            </li>
             
            <li ><a href="/modx/atlalum/fixed-dock-ladders.html" title="Fixed Dock Ladders"  class="menu">Fixed Dock Ladders</a> </li>
             
            <li ><a href="/modx/atlalum/lift-retractable-dock-ladders.html" title="Lift / Retractable Dock Ladders"  class="menu">Lift / Retractable Dock Ladders</a> </li>
             
            <li ><a href="/modx/atlalum/custom-ladders.html" title="Custom Ladders"  class="menu">Custom Ladders</a> </li>
             
            <li ><a href="/modx/atlalum/defend-her-dock-fenders.html" title="Defend-HER Dock Fenders"  class="menu">Defend-HER Dock Fenders</a> </li>
             
            <li ><a href="/modx/atlalum/aluminum-fender-brackets.html" title="Aluminum Fender Brackets"  class="menu">Aluminum Fender Brackets</a> </li>
             
            <li ><a href="/modx/atlalum/tuna-tables.html" title="Tuna Tables"  class="menu">Tuna Tables</a> </li>
             
            <li ><a href="/modx/atlalum/pile-caps.html" title="Pile Caps"  class="menu">Pile Caps</a> </li>
             
            <li ><a href="/modx/atlalum/aluminum-s-cleats.html" title="Aluminum "S" Cleats"  class="menu">Aluminum "S" Cleats</a> </li>
             
            <li ><a href="/modx/atlalum/ramps-gangways.html" title="Ramps / Gangways"  class="menu">Ramps / Gangways</a> </li>
             
            <li ><a href="/modx/atlalum/railings.html" title="Railings"  class="menu">Railings</a> </li>
             
            <li ><a href="/modx/atlalum/kayak-shack-racks.html" title="Kayak Shack Racks"  class="menu">Kayak Shack Racks</a> </li>
             
            <li  class="last"><a href="/modx/atlalum/surf-shack-racks.html" title="Surf Shack Racks"  class="menu">Surf Shack Racks</a> </li>
             
             
                </ul>
            </div>
            </div>
                        <br /></td>
                    </tr>
                  </table></td>
              </tr>
              <!---  END PRODUCT TABLE --->
            </table>
            <!-- End left nav bar for Products --> 
             </td>
                          <td width="31"><img src="assets/images/space.gif" border="0" alt="" width="31" height="1" /></td>
                          <!-- start content area -->
                          <td><table border="0" cellspacing="0" cellpadding="0" width="676">
                              <tbody>
                                <tr valign="top">
                                  <td width="676"><table border="0" cellspacing="0" cellpadding="0" width="676" align="center">
                                      <tbody>
                                        <!--start Breadcrumb navigation-->
                                        <tr>
                                          <td><div style="margin:5px 0; width:666px;"><span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/modx/atlalum/products-all.html" title="Products-All">Products</a></span> » <span class="B_lastCrumb"><span class="B_currentCrumb">FloatStep® Home</span></span></span> </div></td>
                                        </tr>
                                        <!-- end Breadcrumb navigation -->
                                        <tr>
                                          <td width="676" height="31" background="assets/images/title-stripe.gif"><div align="center" style="width:676px;" class="pageheadertext">FloatStep® Home</div></td>
                                        </tr>
                                        <!-- start variable content for each product -->
                                        <tr>
                                          <td width="676"><table border="0" cellspacing="0" cellpadding="0" width="676" align="center">
                                              <tr>
                                                <td class="tagline" align="center"></td>
                                              </tr>
                                              <tr>
                                                <td class="itemName">FloatStep® Home</td>
                                              </tr>
                                              <tr>
                                                <td class="content-text"><!-- start FloatStep Home content -->
             
            <div class="content-page-picture-container" style="float:right;"><img src="assets/images/FS-(3).jpg" width="300" height="225" alt="picture of man looking at floatstep" /></div>
            <ul style="list-style-type:none;">
              <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-why-floatstep.html" class="floatsteplink1">Why FloatStep®?</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-assembly-instructions.html" class="floatsteplink1">FloatStep® - Assembly Instructions</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-dealer-inquiries.html" class="floatsteplink1">FloatStep® - Dealer Inquiries</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-gallery.html" class="floatsteplink1">FloatStep® - Gallery</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-gallery-competitors-issues.html" class="floatsteplink1">FloatStep® - Gallery - Competitors' Issues</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-gallery-floatstep-in-action.html" class="floatsteplink1">FloatStep® - Gallery - FloatStep® in Action</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-how-to-measure.html" class="floatsteplink1">FloatStep® - How to Measure</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-movie-clips.html" class="floatsteplink1">FloatStep® - Movie Clips</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="ds.html" class="floatsteplink1">FloatStep® - PDF Fly Sheet</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-pricing.html" class="floatsteplink1">FloatStep® - Pricing</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-the-floatstep-difference.html" class="floatsteplink1">FloatStep® - The FloatStep® Difference</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-warranty.html" class="floatsteplink1">FloatStep® - Warranty</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
            <li>
              <div align="left">
                  <table style="margin-top:5px;" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center"><div style="margin-top:5px;"><a href="floatstep-warranty-registration.html" class="floatsteplink1">FloatStep® - Warranty Registration</a></div></td>
                    </tr>
                  </table>
              </div>
            </li>
             
            </ul>
            <br style="clear: left"/>
             
            <!-- end FloatStep Ladder content --> 
            </td>
                                              </tr>
                                            </table></td>
                                        </tr>
                                        <!-- end variable content for each product -->
                                      </tbody>
                                    </table></td>
                                </tr>
                              </tbody>
                            </table></td>
                          <!-- end content area --> 
                        </tr>
                      </tbody>
                    </table></td>
                </tr>
              </tbody>
            </table>
            <!-- start bottom-nav-bar -->
            <table align="center" border="0" cellspacing="0" cellpadding="0" width="1000">
              <tr>
                <td valign="top" width="1000" height="25" background="assets/images/bottom-nav-bar-bg.gif" bgcolor="#FFFFFF"><table align="center" width="960" border="0" cellspacing="0" cellpadding="0" class="maintext">
                    <tr>
                      <td>© Copyright Atlantic Aluminum & Marine Products 2010</td>
                      <td> </td>
                      <td align="right"><a href="index.html" class="bottomlinks">Home</a> | <a href="products-all.html" class="bottomlinks">Products</a> | <a href="news-and-events.html" class="bottomlinks">News & Events</a> | <a href="blog.html" class="bottomlinks">Blog</a> | <a href="about-us.html" class="bottomlinks">About Us</a> | <a href="contact-us.html" class="bottomlinks">Contact Us</a> | <a href="sitemap.html" class="bottomlinks">Sitemap</a></td>
                    </tr>
                  </table></td>
              </tr>
            </table>
            <!-- end bottom-nav-bar --> 
             
              <!-- start my-footer -->
            <div style="padding-top:7px;">
              <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="bylink">
                <tr>
                  <td width="350" class="bylink"> </td>
                  <td width="650"><div align="right">Web Design by Racz's Handcarved Signs</div></td>
                  <td width="20"> </td>
                </tr>
              </table>
            </div>
            <!-- end my-footer -->
             
              <!-- start google-analytics -->
            <script type="text/javascript"> 
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
            </script>
            <script type="text/javascript">
            try {
            var pageTracker = _gat._getTracker("UA-8028266-6");
            pageTracker._trackPageview();
            } catch(err) {}</script>
            <!-- end google analytics -->
             
            </body></html><!-- end FloatStep Template-->
            
              • 36926
              • 701 Posts
              <!-- start FloatStep Template-->

              <!-- start page-header -->
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

              Try removing the comments above the doc type, the doc type should be the very first line in a html document. The chances are IE8 is see the document as not have a doc type set which will cause it to render the page differently.

              Also you should really try and avoid using tables for layout.

              Let me know if that solves the issue.

              Ben

                • 27210
                • 158 Posts
                Hey Ben,

                That did it! I can’t tell you how much i appreciate your help! I never would have thought of that. I was so sure it was a css issue.

                Your are so correct that i shouldn’t use tables for layouts. My first 2 years in the business my boss and mentor used ONLY tables. I’m slowly trying to migrate to css.

                Thank you! laugh
                Steve