#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2008
    Posts
    2
    Rep Power
    0

    CSS Drop Down Menu Gap (blank space) when scrolled down...


    I am working on a web page, and am all but done, but I am having one final problem with it. The css drop down menu works fine except for one issue... when you scroll down on one of the pages, and then go to the css menu bar a gap appears between the menu bar and the sub menu options that drop down.

    How can I get this menu to always drop down DIRECTLY below the main menu bar without the gap?


    ___________


    Here is the SpryMenuBarHorizontal css

    _____________

    @charset "UTF-8";

    /* SpryMenuBarHorizontal css - Revision: Spry Preview Release 1.4 */

    /* 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
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    background-image: xxx;
    }
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug:
    ul.MenuBarActive
    {
    z-index: 1000;
    }
    /* 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: 16px;
    position: relative;
    text-align: center;
    cursor: pointer;















    width: ;
    float: left;
    background-image: xxx;
    padding-left: 0px;
    padding-right: 0px;
    }
    /* 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: 8em;
    position: fixed;
    left: -1000em;
    background-image: xxx;
    padding-left: 0px;
    padding-right: 0px;

    }
    /* 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: 9.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: 0px solid #000000;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
    display: block;
    cursor: pointer;
    color: #2C2A2B;
    text-decoration: none;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: .5em;
    padding-bottom: .5em;
    background-repeat: repeat;
    background-image: xxx;

    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    {
    color: #FFF;
    display: block;

    }
    /* 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
    {
    color: #FFF;
    display: block;

    }

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

    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: XXX;
    background-repeat: repeat;

    }
    /* 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: XXX;
    background-repeat: repeat-x;
    }
    /* 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
    {

    }
    /* 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: xxx;
    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;
    }
    /* 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;
    }


    Thank you so much for your help, I have a deadline that is coming up very quick... I'd appreciate any help I could get.

    _______________

    my css is sloppy , but at this point with the deadline approaching, I really just need to get this to work properly, and I have a feeling its as simple as a few lines of code changed....
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    It is pretty much impolite to x-post the same issue to multiple forums. You're causing disparate groups to duplicate the others work. That you're in a hurry does not excuse boorish behavior.

    Worse, it is obvious that you did not show any of us the courtesy of following forum posting guidelines. Please post code within the bbcode code containers. Further, you did not post all the required code. CSS works against the DOM, which is a product of the html markup. Without the html, the css is pretty much gibberish. Even though we might guess at what you've done, it's still a guess.

    gary
    Last edited by kk5st; December 26th, 2008 at 08:18 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2008
    Posts
    2
    Rep Power
    0
    I'm truly sorry. I didn't take the time to know which code to post, I am not as advanced as I'd like to be, so again I'm sorry.

    I wasn't aware how to put the code into the right format for the forums =-/

    I'd like to post the html for it as well, but I am concerned I do not know the format you would like it in. I'll try my best...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Dec14.jpg</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    td img {display: block;}#new {
    	font-family: "Adobe Caslon Pro";
    	font-size: 14px;
    	background-color: #FFFFFF;
    	background-image: url(background.jpg);
    	background-repeat: repeat;
    	width: auto;
    	height: auto;
    }
    </style>
    <!--Fireworks CS3 Dreamweaver CS3 target.  Created Sun Dec 14 20:41:48 GMT-0600 (Central Standard Time) 2008-->
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style2 {
    	font-size: 14px;
    }
    -->
    </style>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    <body bgcolor="#ffffff">
    <table border="0" cellpadding="0" cellspacing="0" width="800">
    <!-- fwtable fwsrc="Dec14.png" fwpage="Page 1" fwbase="Dec14.jpg" fwstyle="Dreamweaver" fwdocid = "857270823" fwnested="0" -->
    <tr>
       <td><img src="spacer.gif" width="104" height="1" border="0" alt="" /></td>
       <td><img src="spacer.gif" width="480" height="1" border="0" alt="" /></td>
       <td><img src="spacer.gif" width="93" height="1" border="0" alt="" /></td>
       <td><img src="spacer.gif" width="96" height="1" border="0" alt="" /></td>
       <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
      </tr>
    
      <tr>
       <td colspan="3"><img name="basic_r1_c1" src="wholetop.jpg" width="800" height="87" border="0" id="basic_r1_c1" alt="" /></td>
      
      </tr>
      <tr>
       <td colspan="6"><ul id="MenuBar1" class="MenuBarHorizontal">
               <li><a href="#" class="MenuBarHorizontal">Firm Profile</a>
                 <ul>
                   <li><a href="#" class="MenuBarItemSubmenu style2">Our Bios</a></li>
                   <li><a href="#" class="MenuBarItemSubmenu style2">Mission Statement &quot;Vision to Reality&quot;</a></li>
                 </ul>
            </li>
               <li><a href="#" class="MenuBarHorizontal">The Crown Experience</a>
                 <ul>
                   <li><a href="#" class="MenuBarItemSubmenu style2">What Sets Crown Apart</a></li>
                   <li><a href="#" class="MenuBarItemSubmenu style2">Our Stewardship, Your Trust</a></li>
                   <li><a href="#" class="MenuBarItemSubmenu style2">Jobsite Etiquette</a></li>
                   <li><a href="#" class="MenuBarItemSubmenu style2">Why Hire A General Contractor?</a></li>
                 </ul>
            </li>
               <li><a href="#" class="MenuBarHorizontal">Services Provided</a>
                 <ul>
                 <li><a href="#" class="MenuBarItemSubmenu style2">Project Budget Estimating</a></li>
                   <li><a href="#" class="MenuBarItemSubmenu style2">Design &amp; Feasibility</a></li>
                   <li><a href="#" class="MenuBarItemSubmenu style2">Project Management &amp; General Contracting</a></li>
                   </ul>
            </li>
            <li><a href="file:///C:/Users/ryan0000/Documents/P/3rd%20phase%20-%20late%20feb/December/Late%20December/gallery.htm">Gallery</a> </li>
            <li><a href="#">Testimonials</a>        </li>
            <li><a href="#">Contact Us</a></li>
        </ul>    </td>
      </tr>
    
      
      
     <table background="TCE2.jpg" width="800" height="660" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td></td>
      </tr>
    </table>
    
     <tr>
       <td colspan="3"><img name="Dec14_r5_c1" src="Dec14_r5_c1.jpg" width="800" height="18" border="0" id="Dec14_r5_c1" alt="" /></td>
      </tr>
    </table>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    Thanks again, and next time i'll be sure to follow the guidelines more closely.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,262
    Rep Power
    1960
    That's better. I need to ask for more, though. The menu uses javascript. Do you have this page online? If so, please post the url. You don't have enough posts to make links yet, so post in the form of mysite dot com/testpage.html.

    There are those who will disagree, but IMO, that particular method is a grossly inelegant pile for a simple dropdown menu.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo