7 Replies Latest reply: Apr 25, 2013 10:49 AM by Nancy O. RSS

    Horizontal Spry Menu Width Browser Problem

    ZenDao

      I am working in Dreamweaver CS5.5 (mac). I inserted a horizontal spry menu bar within a 900px container. I have six "tabs" going across. When I preview it in Safari, it looks fine. But when I view it in Firefox, it pushes the last tab on to the next line on the left side (aligned with the first tab above). The individual tabs are set to 9.4em and the width of the spry horizontal menu bar itself is set to 900px.

       

      But when I change the width of the spry menu bar from px to em (in both the "box" and "positioning"), it finally fits all on one line in Firefox, however the last tab is slight outside the right edge of the container.

       

      Any ideas how to fix it?

        • 1. Re: Horizontal Spry Menu Width Browser Problem
          Preran Adobe Employee

          Hi ZenDao,

           

          Could you post  your CSS code here for the experts to help you better?

           

          Thanks,

          Preran

          • 2. Re: Horizontal Spry Menu Width Browser Problem
            sudarshan.t MVP

            Margin & Padding can kill you sometimes!

             

            Put your files on a webserver and give us a link so we can troubleshoot.

             

            On a sidenote, Spry has been deprecated and will no longer be officially supported or developed by Adobe: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l

            • 3. Re: Horizontal Spry Menu Width Browser Problem
              ZenDao Community Member

              I'll try to post the code in a few... I don't have access to the company's site that I am redesigning the Web site for. I seem to recall there is a way to post a website (for testing) on line. I thought it was a free(?) feature through Adobe. Maybe the via Adobe Cloud? I remember seeing a link either on Adobe's Web site or Dreamweaver. I can't find it. Does this sound familiar to anyone?

              • 4. Re: Horizontal Spry Menu Width Browser Problem
                Nancy O. MVP

                Are you a Cloud member?  Cloud comes with Business Catalyst hosting.

                http://forums.adobe.com/docs/DOC-2152

                 

                 

                Nancy O.

                • 5. Re: Horizontal Spry Menu Width Browser Problem
                  Ben Pleysier MVP

                  Try adding

                  ul.MenuBarHorizontal li {width: 16.66666%;}

                  This is 16.66666 x 6 = 100%

                  • 6. Re: Horizontal Spry Menu Width Browser Problem
                    ZenDao Community Member

                    I am pasting the html code and css style sheet one after the other in this thread. Hopefully it will not be confusing. I don't have access to my client's web server, otherwise I would have done that instead.  Since I am starting out creating web sites, what do web designers normally do (especially on a budget) when trying to post a web site on line for testing and the client to review?

                     

                    As for the test page I am trying to build, I am attaching screen shot of how it looks in Safari and Firefox. Hopefully my attempts at coding and css isn't too bad. I have been so use to be able to easily position and mold things in InDesign and Photoshop but it's been very frustrating trying to do this in Dreamwaver/CSS. I am still having problems with the right side of the menu bar. It's fine in Safari but sticks out a little in Firefox. Plus, I am trying to add div to the footer bar at the bottom for mini contact/copyright line next to the Facebook icon. But it is appearing under and outside the footer box instead of inside. Thanks for you help in advance.

                     

                     

                    Safari Screen Shot__________________________________________________________

                    screen_shot_safari.png


                     

                    Firefox Screen Shot__________________________________________________________

                    screen_shot_firefox.png

                     

                     

                     

                     

                    HTML__________________________________________________________

                     

                    <!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" />

                    <title>Sulam of Brookline</title>

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

                    <style type="text/css"></style>

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

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

                    <style type="text/css">

                    #apDiv1 {

                              position:absolute;

                              left:239px;

                              top:856px;

                              width:761px;

                              height:56px;

                              z-index:1;

                              font-size: 1em;

                              color: #FFFFFF;

                    }

                    #apDiv2 {

                              position:absolute;

                              left:224px;

                              top:851px;

                              width:693px;

                              height:53px;

                              z-index:1;

                              font-size: 1em;

                              color: #FFFFFF;

                    }

                    </style>

                    </head>

                    <body bgcolor="#FF0033" link="#FF0033" vlink="#990033" alink="#CC0066">

                    <div id="apDiv2">

                      <h6>copyright and contact information line goes here.</h6>

                    </div>

                    <div class="container">

                      <div class="header"><img src="images/temp_Logo.png" width="189" height="65" alt="sulam logo" />

                        <div class="nav">

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

                            <li><a href="#">Home</a>        </li>

                            <li><a href="#">About Us</a></li>

                            <li><a href="#">Curriculum</a>        </li>

                            <li><a href="#">Admissions</a></li>

                            <li><a href="#">FAQ</a></li>

                            <li><a href="#">Contact Us</a></li>

                          </ul>

                        </div>

                      </div>

                      <div class="content">

                        <div class="main_img"><img src="images/fpo.jpg" width="600" height="250" alt="image1" /></div>

                        <h1>Headline</h1>

                    <p>Sulam is an innovative new option for Jewish education in the Boston area. It is an after-school program for children that begins in kindergarten and continues through fifth grade, designed to prepare students with the skills, knowledge and intuition to successfully transfer into 6th grade at any of the Boston area Jewish day schools.  By meeting four afternoons per week, the program aims to deliver a rigorous Jewish elementary education and a nourishing social environment for children. Sulam is committed to pluralistic Jewish education and aims to recruit families from diverse backgrounds and affiliations.  </p>

                      </div>

                      <div class="footer"><img src="images/f_logo.jpg" width="40" height="40" alt="facebook" /></div>

                    </div>

                    <script type="text/javascript">

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

                    </script>

                    </body>

                     

                     

                    </html>

                     

                     

                     

                     

                     

                    CSS__________________________________________________________

                    @charset "UTF-8";

                    /* CSS Document */

                     

                     

                    <style type="text/css">

                    body,td,th {

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

                              font-size: 12px;

                              color: #657504;

                    }

                    body {

                              background-color: #FFF5E4;

                              background-image: url(images/vectorstock_38606g.gif);

                              margin: 0;

                              padding: 0

                    }

                    p {

                              color:#657504;

                              line-height:1.8;

                              font-size: 1em;

                    }

                    h1 {

                              font-size: 1.6em;

                              color: #657504;

                              margin-top: 0;

                              margin-bottom: 0em;

                    }

                    h2 {

                              font-size: 1.6em;

                              color: #657504;

                              font-weight: normal;

                              margin-top: 1.2em;

                              margin-bottom: 1em;

                    }

                    h3 {

                              font-size: 1.3em;

                              color: #657504;

                              font-weight: normal;

                              margin: 1.25em 0 .5em;

                    }

                    .container {

                              width: 900px;

                              padding: 0px;

                              margin: 0px;

                              background: #ffffff;

                              height: auto;

                              margin: 0px auto;

                    }

                    </style>

                    .content {

                              overflow:hidden;

                    }

                    .footer {

                              padding: 10px 20px;

                              background: #670206;

                              float: none;

                              margin: 80px 0px 0px;

                    }

                    .nav {

                              height: 20px;

                              padding: 0px;

                              margin: 0px;

                              float: none;

                              background: #FFFFFF;

                    }

                    .footer img {

                              padding: 10px;

                    }

                    .content {

                              width: 600px;

                              left: 0px;

                              margin: 0px 150px;

                              padding: 0px;

                              top: 0px;

                              clear: both;

                              clip: rect(auto,auto,auto,auto);

                    }

                    .footer img2 {

                              padding: 10px 10px 10px 0px;

                    }

                     

                     

                    .header {

                              text-align: center;

                              background: #670206;

                    }

                    .main_img {

                              padding-bottom: 0px;

                              margin-bottom: 20px;

                              margin-top: 20px;

                              padding-top: 30px;

                    }

                    .contact_line {

                              color: #FFFFFF;

                              visibility: visible;

                              top: 0px;

                              clip: rect(0px,auto,auto,auto);

                              font-size: 1em;

                    }

                    • 7. Re: Horizontal Spry Menu Width Browser Problem
                      Nancy O. MVP

                      Building web page layouts has about as much in common with print design (InDesign and Photoshop) as Elephants have to tea leaves.  Nothing close because print is static & unchanging.  Web pages must be flexible to accommodate various devices/browser settings and display/text sizes which the end user controls.

                       

                      DW requires you to understand basic web design theory & coding fundamentals.  If you don't,  you won't have good cross browser results.

                       

                      Position:absolute, no.  You don't need positioning.  It's better if you don't use it because it removes content from the normal document flow.  Your copyright info belongs inside your <footer> div; not at the top of your page.

                       

                      clip: rect(0px,auto,auto,auto);

                      This rule serves no purpose.  I don't know why you included it.

                       

                      Re-work your layout without positioning.  Put information in a logical sequence from page top <header> to bottom <footer>.  I highly recommend you use Split View with Live View instead of Design View.  Design View is not 100% reliable.

                       

                       

                      Nancy O.