27 Replies Latest reply: Feb 7, 2012 8:44 AM by JeffInPoulsbo2 RSS

    Why everything pushes to the right after spry menu?

    guy from NM Community Member

      it doesn't show up this way on when I publish to the webb and view it in chrome, but in lilve preview the main part of the page pushes way right after a spry menu.  how do I fix this?

       

      Capture.GIF

        • 1. Re: Why everything pushes to the right after spry menu?
          Curtis_E_Flush Community Member

          CODE... We need to see CODE. Screenshots only show what the problm looks like. Without knowing what causes it, we're guessing, and not helping.

          • 2. Re: Why everything pushes to the right after spry menu?
            osgood_ CommunityMVP

            guy from NM wrote:

             

            it doesn't show up this way on when I publish to the webb and view it in chrome, but in lilve preview the main part of the page pushes way right after a spry menu.  how do I fix this?

             

            Capture.GIF

             

            Can't tell for sure without seeing code but I bet you have not cleared the floated <li> tags that are in the spry menu.

             

            add - clear: both; - to the containers css which follows the spry menu <div>

            • 3. Re: Why everything pushes to the right after spry menu?
              guy from NM Community Member

              sorry; i am a new at this.  Here is the code for the main page. note this is a template with an editable region

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

              <html xmlns="http://www.w3.org/1999/xhtml">

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

              <!-- TemplateBeginEditable name="doctitle" -->

              <title>Untitled Document</title>

              <!-- TemplateEndEditable -->

              <!-- TemplateBeginEditable name="head" -->

              <!-- TemplateEndEditable -->

              <style type="text/css">

              body,td,th {

                        font-family: Arial, Helvetica, sans-serif;

              }

              </style>

              <link href="../lessons.css" rel="stylesheet" type="text/css" />

              <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

              <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

              </head>

               

               

              <body>

               

               

               </p>

              <ul id="Menu" class="MenuBarHorizontal">

                <li><a href="http://www.joshhunt.com">Home</a>  </li>

                <li><a href="#" class="MenuBarItemSubmenu">Conferences</a>

                  <ul>

                    <li><a href="http://www.joshhunt.com/conference2.htm">Host a conference</a></li>

                    <li><a href="http://www.joshhunt.com/contact/">Attend a conference</a></li></ul></li>

                <li><a href="http://www.joshhunt.com/sunday-school.htm" class="MenuBarItemSubmenu">Lessons</a>

                  <ul>

                    <li><a href="http://www.joshhunt.com/Ephesians2010Index.html">Free Samples</a></li>

                    <li><a href="http://www.joshhunt.com/bible.htm">Explore the Bible</a></li>

                    <li><a href="http://www.joshhunt.com/MasterWorks.htm">Masterwork</a></li>

                    <li><a href="http://www.joshhunt.com/Standard.htm">International Standard</a></li>

                    <li><a href="http://www.joshhunt.com/different.htm">How these lessons are different</a></li>

                    <li><a href="http://www.youcandouble.com/apps/webstore/products/category/594859">Signup / Price</a></li>

                  </ul>

                </li>

                <li><a href="http://www.joshhunt.com/contact/">Contact</a></li>

              </ul>

               

               

              <p></p>

               

               

              <!-- TemplateBeginEditable name="EditRegion1" -->

               

               

              <p> </p>

              <p> </p>

              <p>  </p>

              <p>   </p>

              <!-- TemplateEndEditable -->

              <table border="0" width="100%" id="table2">

                <tr>

                  <td valign="top"><table style="width: 80%" align="center" cellpadding="10">

                    <tr>

                      <td valign="top" style="font-family: Arial, Helvetica, sans-serif"><p style="text-align: center"><img src="../images/All-Star-Sunday-School-Indian-Trail-333.jpg" alt="temp" width="333" height="515" /></p></td>

                      <td valign="top"><h2 style="text-align: center" class="body">Steve Parr, author of <em>Sunday School that Works</em></h2>

                        <h2 style="text-align: center" class="body">Allan Taylor, author of <em>Sunday School in HD</em></h2>

                        <h2 style="text-align: center" class="body">Josh Hunt, author of <em>You Can Double Your Class in Two Years or Less</em></h2>

                        <h2 style="text-align: center" class="body">February 17 - 18</h2>

                        <h2 style="text-align: center" class="body">First Baptist Indian Trail<br />

                          Charlotte area, NC</h2>

                        <h2 style="text-align: center" class="body"> <a href="http://allstarsundayschool.com/">http://allstarsundayschool.com/</a></h2>

                        <p> </p></td>

                      <td valign="top"> </td>

                    </tr>

                  </table>

                    <span class="style3"> </span></td>

                  <td class="style3"> </td>

                </tr>

              </table>

              <p> </p>

              <script type="text/javascript">

              var MenuBar1 = new Spry.Widget.MenuBar("Menu", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

              </script>

              </body>

              </html>

              • 4. Re: Why everything pushes to the right after spry menu?
                MurraySummers CommunityMVP

                We will need to see the CSS as well, particularly "lessons.css".

                 

                Template editable regions have nothing to do with layout.  It's the stuff you put into them that do, though....

                • 5. Re: Why everything pushes to the right after spry menu?
                  guy from NM Community Member

                  lesson css:

                   

                  h2 {

                            font-family: Arial, Helvetica, sans-serif;

                  }

                  h3 {

                            font-family: Arial, Helvetica, sans-serif;

                  }

                  a {

                            font-weight: bold;

                  }

                  li  {

                            font-family: Arial, Helvetica, sans-serif;

                            margin-bottom: 1.1em;

                  }

                  body {

                            margin-right: 4%;

                            margin-left: 4%;

                            font-family: Arial, Helvetica, sans-serif;

                            float: clear both;

                  }

                  p {

                            font-family: Arial, Helvetica, sans-serif;

                            text-align: left;

                  }

                  .Line {

                            color: #000000;

                            text-align: left;

                            border-right-width: 77%;

                            width: 22%;

                  }

                  .noborder {

                            border-color: #FFFFFF;

                            border-width: 0px;

                  }

                  • 6. Re: Why everything pushes to the right after spry menu?
                    guy from NM Community Member

                    spry css

                     

                    @charset "UTF-8";

                     

                     

                    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

                     

                     

                    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

                     

                     

                    /*******************************************************************************

                     

                     

                    LAYOUT INFORMATION: describes box model, positioning, z-order

                     

                     

                    *******************************************************************************/

                     

                     

                    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */

                    ul.MenuBarHorizontal

                    {

                              padding: 0;

                              list-style-type: none;

                              font-size: medium;

                              cursor: default;

                              font-family: Arial, Helvetica, sans-serif;

                              width: 700px;

                              margin: auto;

                    }

                    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

                    ul.MenuBarActive

                    {

                              z-index: 1000;

                              background-color: #000;

                    }

                    /* Menu item containers, position children relative to this container and are a fixed width */

                    ul.MenuBarHorizontal li

                    {

                              margin: 0;

                              padding: 0;

                              list-style-type: none;

                              font-size: 100%;

                              position: relative;

                              text-align: left;

                              cursor: pointer;

                              width: 8em;

                              float: left;

                    }

                    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                    ul.MenuBarHorizontal ul

                    {

                              margin: 0;

                              padding: 0;

                              list-style-type: none;

                              font-size: 100%;

                              z-index: 1020;

                              cursor: default;

                              width: 8.2em;

                              position: absolute;

                              left: -1000em;

                    }

                    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */

                    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

                    {

                              left: auto;

                    }

                    /* Menu item containers are same fixed width as parent */

                    ul.MenuBarHorizontal ul li

                    {

                              width: 8.2em;

                    }

                    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

                    ul.MenuBarHorizontal ul ul

                    {

                              position: absolute;

                              margin: -5% 0 0 95%;

                    }

                    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

                    {

                              left: auto;

                              top: 0;

                    }

                     

                     

                    /*******************************************************************************

                     

                     

                    DESIGN INFORMATION: describes color scheme, borders, fonts

                     

                     

                    *******************************************************************************/

                     

                     

                    /* Submenu containers have borders on all sides */

                    ul.MenuBarHorizontal ul

                    {

                              border: 1px solid #CCC;

                    }

                    /* Menu items are a light gray block with padding and no text decoration */

                    ul.MenuBarHorizontal a

                    {

                              display: block;

                              cursor: pointer;

                              background-color: #EEE;

                              padding: 0.5em 0.75em;

                              color: #333;

                              text-decoration: none;

                    }

                    /* Menu items that have mouse over or focus have a blue background and white text */

                    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

                    {

                              background-color: #000;

                              color: #FFF;

                    }

                    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

                    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

                    {

                              background-color: #000;

                              color: #FFF;

                    }

                     

                     

                    /*******************************************************************************

                     

                     

                    SUBMENU INDICATION: styles if there is a submenu under a given menu item

                     

                     

                    *******************************************************************************/

                     

                     

                    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

                    ul.MenuBarHorizontal a.MenuBarItemSubmenu

                    {

                              background-image: url(SpryMenuBarDown.gif);

                              background-repeat: no-repeat;

                              background-position: 95% 50%;

                    }

                    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

                    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

                    {

                              background-image: url(SpryMenuBarRight.gif);

                              background-repeat: no-repeat;

                              background-position: 95% 50%;

                    }

                    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

                    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

                    {

                              background-image: url(SpryMenuBarDownHover.gif);

                              background-repeat: no-repeat;

                              background-position: 95% 50%;

                    }

                    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

                    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

                    {

                              background-image: url(SpryMenuBarRightHover.gif);

                              background-repeat: no-repeat;

                              background-position: 95% 50%;

                    }

                     

                     

                    /*******************************************************************************

                     

                     

                    BROWSER HACKS: the hacks below should not be changed unless you are an expert

                     

                     

                    *******************************************************************************/

                     

                     

                    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                    ul.MenuBarHorizontal iframe

                    {

                              position: absolute;

                              z-index: 1010;

                              filter:alpha(opacity:0.1);

                    }

                    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                    @media screen, projection

                    {

                              ul.MenuBarHorizontal li.MenuBarItemIE

                              {

                                        display: inline;

                                        f\loat: left;

                                        background: #FFF;

                              }

                    }

                    • 7. Re: Why everything pushes to the right after spry menu?
                      hans-g. CommunityMVP

                      Hello guy from NM,

                       

                      could it be, that you use one of the older browsers? In order to underpin it, I'll show you what my IE8 "says":

                       

                       

                      drStand.jpg

                       

                      No problem, I would like to say.

                      Hans-Günter

                      • 8. Re: Why everything pushes to the right after spry menu?
                        guy from NM Community Member

                        it works fine in the browser. it is in DW live preview it looks goofy. I think this clear idea may be it, but I don't know exactly how to clear

                        • 9. Re: Why everything pushes to the right after spry menu?
                          MurraySummers CommunityMVP

                          Change this -

                           

                          ul.MenuBarHorizontal

                          {

                                    padding: 0;

                                    list-style-type: none;

                                    font-size: medium;

                                    cursor: default;

                                    font-family: Arial, Helvetica, sans-serif;

                                    width: 700px;

                                    margin: auto;

                          }

                           

                          to this -

                           

                          ul.MenuBarHorizontal

                          {

                                    padding: 0;

                                    list-style-type: none;

                                    font-size: medium;

                                    cursor: default;

                                    font-family: Arial, Helvetica, sans-serif;

                                    width: 700px;

                                    margin: auto;

                                    overflow:hidden;

                          }

                           

                          and see what happens.  In case you are wondering why that worked, it's because overflow:hidden forces the tag selected to define a new block formatting context.  Read about it here -

                           

                          http://tjkdesign.com/articles/block-formatting-contexts_and_hasLayout.asp

                          • 10. Re: Why everything pushes to the right after spry menu?
                            hans-g. CommunityMVP

                            Hello Murray,

                             

                            only to inform you, I got this, calling your link: "The page you requested is no longer here [error 404]".

                             

                            Hans-Günter

                            • 11. Re: Why everything pushes to the right after spry menu?
                              guy from NM Community Member

                              thanks. that seems to have fixed it. I think I have the link fixed as well.

                              • 12. Re: Why everything pushes to the right after spry menu?
                                MurraySummers CommunityMVP

                                Try again, Hans - it works for me.

                                 

                                http://tjkdesign.com/articles/block-formatting-contexts_and_hasLayout.asp

                                 

                                It's a bit complex, but worth reading and definitely worth understanding....

                                • 13. Re: Why everything pushes to the right after spry menu?
                                  guy from NM Community Member

                                  two more questions:

                                   

                                  the menu seems almost centered, but not quite. how do i fix that?

                                   

                                  I don't guess it is possible to go back into the configuration process after the menu is created?  I'd like to be able to go back to this screen:

                                  Capture.GIF

                                  • 14. Re: Why everything pushes to the right after spry menu?
                                    hans-g. CommunityMVP

                                    Hi Murray,

                                     

                                    I was again falling into the trap by copping a link from the forum instead of clicking it >

                                     

                                    http://tjkdesign.com/articles/block-formatting-contexts_and_hasLayout.%20asp

                                     

                                    ... and thanks there are really "worth reading ..." elaborations!

                                     

                                    Hans-Günter

                                    • 15. Re: Why everything pushes to the right after spry menu?
                                      MurraySummers CommunityMVP

                                      Excellent.  Read some of the other articles.  I particularly enjoyed the popup windows one - and in fact use that method on nearly every site.

                                      • 16. Re: Why everything pushes to the right after spry menu?
                                        hans-g. CommunityMVP

                                        Hi,

                                         

                                        and now to your second part: "... definitely worth understanding". I see, you want me to keep away from the forum for a while!

                                         

                                        Hans-Günter

                                        • 18. Re: Why everything pushes to the right after spry menu?
                                          osgood_ CommunityMVP

                                          OP might run into problems setting overflow: hidden; on the Spry <ul>. If the menu has any sub-menus they wont show.

                                          • 19. Re: Why everything pushes to the right after spry menu?
                                            MurraySummers CommunityMVP

                                            Only if the parent <ul> has a height set, though.

                                            • 20. Re: Why everything pushes to the right after spry menu?
                                              osgood_ CommunityMVP

                                              Murray *ACP* wrote:

                                               

                                              Only if the parent <ul> has a height set, though.

                                               

                                              Think you have that the wrong way around. If a height is set the sub-menus will show (well at least those that fall within the set height) If no height is set they won't.

                                              • 21. Re: Why everything pushes to the right after spry menu?
                                                MurraySummers CommunityMVP

                                                If the topmost parent <ul> has no height set, then there can be no 'overflow', right?

                                                • 22. Re: Why everything pushes to the right after spry menu?
                                                  osgood_ CommunityMVP

                                                  Murray *ACP* wrote:

                                                   

                                                  If the topmost parent <ul> has no height set, then there can be no 'overflow', right?

                                                   

                                                  In the case of Spry (which most likey has its own way of working) you need 'overflow'  for the submenus to show. If you use overflow:hidden; on the parent <ul> without setting a height (which you should'nt do anyway) the sub menus don't show.......test it and see.

                                                  • 23. Re: Why everything pushes to the right after spry menu?
                                                    MurraySummers CommunityMVP

                                                    I'll take your word for it.  Don't do many spry menus myself....

                                                    • 24. Re: Why everything pushes to the right after spry menu?
                                                      JeffInPoulsbo2

                                                      I am also having this very problem. I read the referenced article, didn't really understand it, but added the "overflow=hidden;" code. It seemed to cure the pushing everything to the right problem, but then the drop down menus weren't visible so I removed the overflow=hidden; line  Could you help me with this?

                                                       

                                                      There is a banner for the spry menu, a stripe and a picture flash table:

                                                       

                                                      <!-- PAGE TABLE -->

                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td align="left" valign="top">

                                                       

                                                       

                                                      <div id="banner"><img src="images/banner.gif" width="100%" height="50" alt="DogfishBay Studios" />

                                                       

                                                       

                                                      <ul id="asts" class="MenuBarHorizontal">

                                                        <li><a href="index.html" title="home page">Home</a>    </li>

                                                        <li><a href="bio-studio.htm" title="About DogFishBay Studios" class="MenuBarHorizontal">Studio</a></li>

                                                        <li><a class="MenuBarItemSubmenu" href="#">Musicians</a>

                                                          <ul>

                                                            <li><a href="bio-jules.htm" title="Juliane Poirier biographical information">Juliane Poirier</a>        </li>

                                                            <li><a href="bio-ray.htm" title="Biographical information for Ray Burns">Ray Burns</a></li>

                                                            <li><a href="bio-jeff.htm" title="Biographical Information for Jeff Powel">Jeff Powel</a></li>

                                                            <li><a href="bio-chris.htm" title="Biographical information on Chris Rin">Chris Rin</a></li>

                                                            <li><a href="#">Rod Lewis</a></li>

                                                          </ul>

                                                        </li>

                                                        <li><a href="#" class="MenuBarItemSubmenu">Music</a>

                                                          <ul>

                                                            <li><a href="#" class="MenuBarItemSubmenu">Music by Style</a>

                                                              <ul>

                                                                <li><a href="samples1.htm" title="Rock and Roll!">Rock</a></li>

                                                                <li><a href="samples2.htm" title="Folk">Folk</a></li>

                                                                <li><a href="samples3.htm" title="Country">Country</a></li>

                                                                <li><a href="samples4.htm" title="Latin">Latin</a></li>

                                                              </ul>

                                                            </li>

                                                            <li><a href="#" class="MenuBarItemSubmenu">Music by Artist</a>

                                                              <ul>

                                                                <li><a href="samples_jules.htm">Juliane Poirier</a></li>

                                                                <li><a href="samples_ray.htm">Ray Burns</a></li>

                                                                <li><a href="#">Steve Thomas</a></li>

                                                                <li><a href="samples_chris.htm">Chris Rin</a></li>

                                                                <li><a href="samples_rod.htm">Rod Lewis</a></li>

                                                                <li><a href="#">Jeff Powel</a></li>

                                                              </ul>

                                                            </li>

                                                            <li><a href="podcast.htm" title="Podcasts">Podcasts</a></li>

                                                          </ul>

                                                        </li>

                                                        <li><a href="gallery-1.htm" class="MenuBarItemSubmenu">Xtras</a>

                                                          <ul>

                                                            <li><a href="gallery-1.htm" title="Band Photos">Photos</a></li>

                                                            <li><a href="video.htm" title="Band Videos">Videos</a></li>

                                                            <li><a href="scene.htm" title="Music Scene">Music Scene</a></li>

                                                            <li><a href="reviews.htm">Reviews</a></li>

                                                          </ul>

                                                        </li>

                                                        <li><a href="links.htm" title="Links" class="MenuBarItemSubmenu">Information</a>

                                                          <ul>

                                                            <li><a href="links.htm" title="Links">Links</a></li>

                                                            <li><a href="site_map.htm" title="Site Map">Site Map</a></li>

                                                            <li><a href="contact.htm" title="Contact information">Contact</a></li>

                                                          </ul>

                                                        </li>

                                                      </ul>

                                                       

                                                       

                                                      </div>

                                                       

                                                       

                                                       

                                                       

                                                      <!-- STRIPE -->

                                                       

                                                       

                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="home-stripe"><tr><td align="left">

                                                      <img src="picts/spacer.gif" width="10" height="2" alt="image"><br>

                                                      </td></tr></table>

                                                       

                                                       

                                                       

                                                       

                                                       

                                                       

                                                       

                                                      <!-- PICTURE FLASH TABLE -->

                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" class="ban-area-home"><tr><td>

                                                      <script language="JavaScript" type="text/javascript" src="imagechanger_home.js"></script>

                                                      </td></tr></table>

                                                      <!-- PICTURE FLASH TABLE -->

                                                       

                                                       

                                                      <script language="JavaScript" type="text/javascript" src="header.js"></script>

                                                       

                                                       

                                                      <br>

                                                       

                                                      All tables below the spry menu seem to be shifted to the right.

                                                       

                                                      jeff

                                                      • 25. Re: Why everything pushes to the right after spry menu?
                                                        JeffInPoulsbo2 Community Member

                                                        Oh, and BTW, I actually did get the line correct as

                                                         

                                                        overflow:hidden;

                                                        Still, I am stuck and unable to keep the spry menu from bumping everything to the right.

                                                         

                                                        jeff

                                                        • 26. Re: Why everything pushes to the right after spry menu?
                                                          osgood_ CommunityMVP

                                                          You cannot use overflow: hidden; on the spry menu because as you stated the submenus get hidden.

                                                           

                                                          What you need to do is add style="clear: both;" to the table (as shown below) which follows the spry menu.

                                                           

                                                          <table style="clear: both;" cellpadding="0" cellspacing="0" border="0" width="100%" class="home-stripe"><tr><td align="left">

                                                          <img src="picts/spacer.gif" width="10" height="2" alt="image"><br>

                                                          </td></tr></table>

                                                          • 27. Re: Why everything pushes to the right after spry menu?
                                                            JeffInPoulsbo2 Community Member

                                                            That fixed it. Deeply indebted. Thanks so much!

                                                             

                                                            jeff