We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 22241
    • 10 Posts
    Hi all,

    I am customizing a template using a Wayfinder horizontal drop down, and I’m having some issues getting Firefox to display the menu correctly.

    It looks great in IE7, but not in Firefox where the part of the menu that is not being used does not display the correct bg img.

    If someone could help me figure out what I should tell Firefox in the CSS, that would be great.

    Screenshot of how it is looks in IE7 and Firefox attached,

    All help is greatly appreciated!
    TIA
      • 25663 MODX Staff
      • 12,272 Posts
      Rule of thumb to save yourself countless hours in trying to sort out CSS issues: always develop for Fx first, then make it work in IE. As far as specific suggestions to fix your problem, you won’t be able to get any assistance without a link to the site in question that’s not working as expected. Good luck!
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
        • 22241
        • 10 Posts
        Thanks rthrash for the quick reply. Guess I’m learning that lesson the hard way grin

        The page is at http://test.0813.dk - I’d be grateful if you (or someone else with the skills) took a peek at it



          • 1343 ☆ A M B ☆
          • 2,213 Posts
          Try applying the background to the nav div and see if that gets it.

          AMDbuilder
            Patrick | Server Wrangler
            About Me: Website | Tweets |  MODX Hosting
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            If you have a container with elements inside of it that are floated, as is common in the case of menus, the outer container won’t stretch down to include the area taken up by the floated elements, so if that outer container has a background image the background is never shown. You either have to float the outer container itself, or have an extra element at the bottom set to "clear" the floats in the CSS to pull the bottom of the outer container down.
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 22241
              • 10 Posts
              Hi guys,

              Once again thanks for replying. I’ve never actually seen a forum with this kind of response (or response times) to support requests. Just great.

              Quote from: AMDbuilder at Mar 10, 2008, 04:58 PM

              Try applying the background to the nav div and see if that gets it.

              AMDbuilder

              I couldn’ get the nav thing to do the trick.

              Quote from: sottwell at Mar 11, 2008, 01:09 AM

              If you have a container with elements inside of it that are floated, as is common in the case of menus, the outer container won’t stretch down to include the area taken up by the floated elements, so if that outer container has a background image the background is never shown. You either have to float the outer container itself, or have an extra element at the bottom set to "clear" the floats in the CSS to pull the bottom of the outer container down.

              Since I’m pretty new with CSS, maybe you could help me as to how to accomplish this? I’ve posted my template and CSS below.

              Thanks a bunch!

              This is my template:

              <!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">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
              <head>
              <link rel="stylesheet" media="all" type="text/css" href="assets/templates/bfound_horizontal/bfound.css" />
              <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
              <title>[(site_name)] | [*pagetitle*]</title>
              </head>
              <body>
              
              <!-- start wrap -->
              <div id="wrap">
              
              <!-- start header -->
              <div id="header"></div> 
              <!-- end header -->
              
              <!-- start front image -->
              <div id="frontphoto">
              <img id="frontphoto" src="assets/templates/bfound_horizontal/images/front.jpg"  width="760" alt=""/>
              <!-- end front image -->
              </div>
              
              <!-- start navigation -->
              <div id="nav">
              [[Wayfinder? &startId=`0` &level=`4` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_basicdd`]]
              </div>
              <!-- end navigation -->
              
              <!-- start left sidebar -->
              <div id="left_sidebar">Left sidebar</div>
              <!-- end left sidebar -->
              
              <!-- right sidebar -->
               <div id="right_sidebar">Right  sidebar </div>
              <!-- end right sidebar-->
              
              <!-- start content -->
              <div id="content">[*content*]</div> 
              <!-- end content -->
              
              <!-- start footer -->
              <div id="footer"><p>© 2008 <a href="mailto:[(emailsender)]">[(site_name)]</a> - Website af <a href="http://www.bfound.dk/">Bfound</a></p> </div> 
              <!-- end footer -->
              
              </div>
              <!-- end wrap -->
              </body>
              </html>


              This is my CSS:

              /* CSS Document */
              Screen layout: */
              
              body{
              margin:0 auto;
              padding:0;
              font:76% Verdana,Tahoma,Arial,sans-serif;
              background:#f4f4f4 url(images/bg.gif) top center repeat-y;
              color:#303030;
              }
              
              
              /*TEST*/
              #nav{
              background: url(images/nav.jpg) repeat-x; 
              }
              
              #wrap{
              background:#ffffff;
              color:#303030;
              margin:0 auto;
              width:760px;
              }
              
              #header{
              clear:both;
              margin:0 0 0 0;
              padding:0;
              height:8px;
              }
              #header h1{
              width:250px;
              margin:5px 20px 0;
              float:left;
              }
              #header p{
              width:500px;
              float:right;
              text-align:center;
              color:#a0a0a0;
              margin:0 0 10px 0;
              font-size:0.8em;
              line-height:1.2em;
              background-color:inherit;
              }
              
              #frontphoto{
              margin:0 0 0 0;
              border:0;
              }
              
              #left_sidebar{
              clear:left;
              float:left;
              width:120px;
              margin:20px 0 10px 0;
              padding:0;
              font-size:0.9em;
              line-height:1.5em;
              }
              
              #right_sidebar{
              clear:right;
              float:right;
              width:120px;
              margin:20px 0 10px 0;
              padding:0;
              font-size:0.9em;
              line-height:1.5em;
              }
              #right_sidebar p{
              margin:0 0 1.5em 0;
              }
              
              #content{
              margin:30px 130px 20px 160px;
              border-left:1px solid #f0f0f0;
              border-right:1px solid #f0f0f0;
              padding:0 10px 0 10px;
              line-height:1.6em;
              text-align:left;
              }
              #content h2{
              font-size:1.5em;
              margin:0 0 0.5em 0;
              }
              #content img{
              padding:1px;
              display:inline;
              background:#cccccc;
              color:#303030;
              border:4px solid #f0f0f0;
              }
              
              h3{
              font-size:1.3em;
              margin:0 0 10px 0;
              }
              
              a{
              text-decoration:none;
              color:#286ea0;
              }
              a:hover{
              text-decoration:underline;
              color:#286ea0;
              }
              a img{
              border:0;
              }
              
              #footer{
              clear:both;
              margin:0 auto;
              padding:10px 0 20px 0;
              border-top:4px solid #f0f0f0;
              width:760px;
              text-align:center;
              color:#808080;
              font-size:0.9em;
              }
              #footer a{
              color:#808080;
              text-decoration:none;
              }
              #footer a:hover{
              text-decoration:underline;
              }
              
              
              
              
              
              .announce{
              margin:10px 0 10px 0;
              padding:10px;
              width:530px;
              color:#505050;
              background-color:#f4f4f4;
              line-height:1.3em;
              }
              
              .left{
              margin:10px 10px 5px 0;
              float:left;
              }
              
              .right{
              margin:10px 0 5px 10px;
              float:right;
              }
              
              .textright{
              text-align:right;
              }
              
              .center{
              text-align:center;
              }
              
              .small{
              font-size:0.8em;
              }
              
              .bold{
              font-weight:bold;
              }
              
              .hide{
              display:none;
              }
              
              


              This is my menu CSS:

              /* CSS Document */
              
              /* common styling */
              
              /* set up the overall width of the menu div, the font and the margins */
              
              
              .menu {
              font-family: arial, sans-serif; 
              background: url(images/nav.jpg) repeat-x; 
              border:0px solid #fff;
              width:760px; 
              margin:0; 
              margin:0 0 0 0;
              position:relative;
              z-index:100;
              }
              
              /* remove the bullets and set the margin and padding to zero for the unordered list */
              .menu ul {
              padding:0; 
              margin:0;
              list-style-type: none;
              background: url(images/nav.jpg) repeat-x; 
              }
              
              /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
              .menu ul li {
              float:left; 
              position:relative;
              }
              
              /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
              
              .menu ul li a, .menu ul li a:visited {
              display:block; 
              background: url(images/nav.jpg) repeat-x; 
              text-align:center; 
              text-decoration:none; 
              width:106px; 
              height:30px; 
              color:#000; 
              border:10px solid #fff;
              border-width:0 1px 0 0; /* her ændres border rundt om menukasserne*/
              line-height:30px; 
              font-size:11px;
              }
              
              /* make the dropdown ul invisible */
              .menu ul li ul {
              display: none;
              }
              
              /* specific to non IE browsers */
              
              /* set the background and foreground color of the main menu li on hover */
              .menu ul li:hover a {
              color:#fff; 
              background: url(images/nav.jpg) repeat-x;	
              }
              
              /* make the sub menu ul visible and position it beneath the main menu list item */
              .menu ul li:hover ul {
              display:block; 
              background: url(images/nav-hover.jpg) repeat-x; 
              position:absolute; 
              /*top:31px; */
              left:0; 
              width:105px;
              }
              
              /* style the background and foreground color of the submenu links */
              .menu ul li:hover ul li a {
              display:block; 
              background: url(images/nav-hover.jpg) repeat-x;	
              color:#000;
              }
              
              /* style the background and forground colors of the links on hover */
              .menu ul li:hover ul li a:hover {
              background: url(images/nav-current.jpg) repeat-x;	
              color:#FFF;
              }
              
                • 1343 ☆ A M B ☆
                • 2,213 Posts
                Funny I was going to ask you to post the code if the nav menu didn’t work! I will tinker with it later this week and see if I can get it working.

                AMDbuilder
                  Patrick | Server Wrangler
                  About Me: Website | Tweets |  MODX Hosting
                  • 22241
                  • 10 Posts
                  Quote from: AMDbuilder at Mar 11, 2008, 10:04 AM

                  Funny I was going to ask you to post the code if the nav menu didn’t work! I will tinker with it later this week and see if I can get it working.

                  AMDbuilder

                  great! will be looking forward to that!

                  thanks
                    • 24495
                    • 407 Posts
                    Try this:
                    .menu {
                    font-family: arial, sans-serif; 
                    background: url(images/nav.jpg) repeat-x; 
                    border:0px solid #fff;
                    width:760px; 
                    margin:0; 
                    margin:0 0 0 0;
                    position:relative;
                    z-index:100;
                    display:table; /* this should help */
                    }

                    or
                    #nav{
                    background: url(images/nav.jpg) repeat-x;
                    display:table; 
                    }
                      • 22241
                      • 10 Posts
                      display:table;

                      It looks like that did it in Firefox, but the menu now disappears on refresh in IE7??

                      Anyone?