Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    Hi, I'm new to web-design, & I'm putting in a horizontal spry menu bar - I've got it working fine in Safari but not Firefox. When the drop-down lists appear they vanish behind the div container immediately below the spry bar.

    The spry bar is contained within a div called navbar. The div below (that the menu disappears behind) is called main.

    I have tinkered with the z-index settings. I have the z-index for the 'navbar' and 'main' div tags set at 1500 and 1000 respectively. In SpryMenuBarHorizontal.css the settings are:

    ul.MenuBarActive - 1500
    ul.MenuBarHorizontal ul - 1700
    ul.MenuBarHorizontal iframe - 1550

    Can anyone suggest what I might be leaving out or doing wrong? Any help vastly appreciated!

    Below is the CSS sheet for the spry bar itself:

    PHP Code:
    @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
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-size100%;
        
    cursor: default;
        
    widthauto;
        
    font-familyArialHelveticasans-serif;
        
    text-transformuppercase;
        
    color#CCCCCC;
        
    background-color#000000;
        
    border-top-stylenone;
        
    border-right-stylenone;
        
    border-bottom-stylenone;
        
    border-left-stylenone;
    }
    /* 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-index1500;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-size100%;
        
    positionrelative;
        
    text-alignleft;
        
    cursorpointer;
        
    width8em;
        
    floatleft;
        
    background-color#000000;
    }
    /* 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
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-size100%;
        
    z-index1700;
        
    cursor: default;
        
    width8.2em;
        
    positionabsolute;
        
    left: -1000em;
        
    background-color#000000;
    }
    /* 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
    {
        
    leftauto;
        
    background-color#000000;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
        
    width8.2em;
        
    background-color#000000;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
        
    positionabsolute;
        
    margin: -50 0 95%;
        
    background-color#000000;
    }
    /* 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
    {
        
    leftauto;
        
    top0;
        
    background-color#000000;
    }

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

     DESIGN INFORMATION: describes color scheme, borders, fonts

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

    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
        
    border1px solid #CCC;
        
    background-color#000000;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
        
    displayblock;
        
    cursorpointer;
        
    background-color#000000;
        
    padding0em;
        
    color#CCCCCC;
        
    text-decorationnone;
        
    border-top-stylenone;
        
    border-right-stylenone;
        
    border-bottom-stylenone;
        
    border-left-stylenone;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hoverul.MenuBarHorizontal a:focus
    {
        
    background-color#33C;
        
    color#FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHoverul.MenuBarHorizontal a.MenuBarItemSubmenuHoverul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
        
    background-color#33C;
        
    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-imagenone;
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* 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-imagenone;
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* 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-imageurl(SpryMenuBarDownHover.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* 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-imageurl(SpryMenuBarRightHover.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }

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

     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
    {
        
    positionabsolute;
        
    z-index1550;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screenprojection
    {
        
    ul.MenuBarHorizontal li.MenuBarItemIE
        
    {
            
    displayinline;
            
    f\loatleft;
            
    background#FFF;
        
    }


  2.  

  3. #2
    Junior Member WebPrezentacija's Avatar
    Join Date
    Jul 2009
    Location
    Novi Sad, Serbia
    Posts
    25
    Member #
    19405
    Liked
    1 times
    mrskill,

    I havenít enough time right now to look at your code properly and thoroughly. Iíll tell you just I donít like: z-index, position: relative and position: absolute together.

    Why donít you try to let divs flow freely, with float left or right, that way is much easier and much complicated.

    Absolute positionig and flowing position donít go together. Iím sorry, I couldnít help you more.

  4. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    no no, thanks for your input, I'll look into those settings and see if I get anywhere.

  5. #4
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    Quote Originally Posted by WebPrezentacija
    mrskill,

    I havenít enough time right now to look at your code properly and thoroughly. Iíll tell you just I donít like: z-index, position: relative and position: absolute together.

    Why donít you try to let divs flow freely, with float left or right, that way is much easier and much complicated.

    Absolute positionig and flowing position donít go together. Iím sorry, I couldnít help you more.
    I've had a play with it and got nowhere. I tried making the 'position' rules all consistent, first I made them all relative and then tried removing all 'position' rules and replacing them with 'float', which had no effect.

    I don't really understand this code in any detail, what you're essentially seeing is the stylesheet Dreamweaver created automatically, all I've altered are z-indexes and a few colours.

    Here is a link to a pic of the effect I'm currently getting:

    http://i303.photobucket.com/albums/n.../Picture10.png

    Any further help would be greatly appreciated

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Quote Originally Posted by WebPrezentacija
    mrskill,

    I havenít enough time right now to look at your code properly and thoroughly. Iíll tell you just I donít like: z-index, position: relative and position: absolute together.

    Why donít you try to let divs flow freely, with float left or right, that way is much easier and much complicated.

    Absolute positionig and flowing position donít go together. Iím sorry, I couldnít help you more.
    That menu bar is designed to use those positions together. In fact, absolute divs should be used inside a relative positioned div in most cases, just an fyi.


    I've had a play with it and got nowhere. I tried making the 'position' rules all consistent, first I made them all relative and then tried removing all 'position' rules and replacing them with 'float', which had no effect.
    This menu is complicated and you probably shoudn't mess with anything but the design rules unless you know what you are doing. I've used a couple of them and never had the problem of hiding behind a div, BUT, I have a problem right now with it hiding behind a flash object!

    I would like to see the rest of the code to try and help you out, and maybe I'll figure out my problem at the same time!

  7. #6
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    Quote Originally Posted by aeroweb99
    That menu bar is designed to use those positions together. In fact, absolute divs should be used inside a relative positioned div in most cases, just an fyi.



    This menu is complicated and you probably shoudn't mess with anything but the design rules unless you know what you are doing. I've used a couple of them and never had the problem of hiding behind a div, BUT, I have a problem right now with it hiding behind a flash object!

    I would like to see the rest of the code to try and help you out, and maybe I'll figure out my problem at the same time!
    Excellent, be my guest. Here is the code for the actual page, below that is the CSS sheet for the spry bar again, just to be sure you get the current version:

    PHP Code:
    <!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>The Catalogue of DeedsThe Ultimate Swatch-Book of Heroic Creativity.</title>

    <
    style type="text/css">
    <!--
    .
    background {
        
    background-imageurl(../images/backgrounds/discogbackopt2.jpg);
        
    background-attachmentfixed;
        
    background-repeatno-repeat;
        
    background-positionright 0%;
    }
    #main {
        
    floatleft;
        
    width56%;
        
    borderthin none #FFFFFF;
        
    padding-left8px;
        
    text-alignleft;
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
        
    background-color#000000;
        
    margin-top50px;
        
    z-index1000;
    }
    #masthead {
        
    opacity:0.80; -moz-opacity:0.80filter:alpha(opacity=80);
        
    background-color#000000;
        
    width385px;
        
    padding0%;
        
    margin-rightauto;
        
    margin-leftauto;
    }
    #caption {
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
        
    background-color#000000;
        
    width740px;
        
    margin-rightauto;
        
    margin-leftauto;
        
    margin-top25px;
        
    margin-bottom25px;
    }
    #navbar {
        
    opacity:0.80;
        -
    moz-opacity:0.80;
        
    filter:alpha(opacity=80);
        
    width400px;
        
    margin-rightauto;
        
    margin-leftauto;
        
    margin-top25px;
        
    margin-bottom25px;
        
    z-index1500;
    }
    #artistview {
        
    floatleft;
        
    width150px;
        
    padding-top5px;
        
    padding-right5px;
        
    padding-bottom5px;
        
    padding-left15px;
    }
    -->
    </
    style>
    <
    meta name="Description" content="The complete Simon Somatic discography. A lifeboat of the finest unsanded mahogany floating in a sea of tripe, with free noseclips." />
    <
    link href="../overall.css" rel="stylesheet" type="text/css" />


    </
    style>
    <
    script src="../SpryAssets/SpryMenuBar.jstype="text/javascript"></script>
    <script type="text/javascript">
    <!--
    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];}}
    }
    //-->
    </script>
    <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>

    <body class="background">
    <div class="container" id="container">
    <div id="masthead">
    <h1 align="center">DISCOGRAPHY</h1></div>
    <div id="caption">
    <p align="center" class="nopadtext">Here is the complete <a href="../about/index.html" title="Goto Biog" class="normlink">Simon Somatic</a> discography. Click below to select a category view:</p>
      </div>
    <div id="navbar">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">Artists</a>
            <ul>
              <li><a href="#">Dead Elvis</a></li>
              <li><a href="#">Esprida Core</a></li>
              <li><a href="#">Pope</a></li>
              <li><a href="#">Slig Vs Bish</a></li>
              <li><a href="#">The Skidmarks</a></li>
              <li><a href="#">The Spooky Monks</a></li>
            </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="#">Genre</a>
            <ul>
              <li><a href="#">Electronica</a></li>
              <li><a href="#">Industrial</a></li>
              <li><a href="#">Metal</a></li>
              <li><a href="#">Punk</a></li>
              <li><a href="#">Pop</a></li>
              <li><a href="#">Rock</a></li>
            </ul>
         </li>
        <li><a class="MenuBarItemSubmenu" href="#">People</a>
            <ul>
              <li><a href="#">Gary Bosworth</a></li>
              <li><a href="#">Graham Dines</a></li>
              <li><a href="#">James Harker</a></li>
              <li><a href="#">Rae Hicks</a></li>
              <li><a href="#">Louis Lanfear</a></li>
              <li><a href="#">Jamie Lees</a></li>
              <li><a href="#">Piers Lunt</a></li>
              <li><a href="#">Sheridan Lunt</a></li>
              <li><a href="#">Barnabas Yianni</a></li>
            </ul>
        </li>
      </ul>
      </div>
    <div id="main">
    <h2><br />
      1999</h2>
    <p><img src="../images/discography/blank.jpg" alt="blank" width="170" height="169" /></p>
    <h3>The Skidmarks :</h3>
    <p class="subheading">Nevermind the Sex Pistols, This Is Bollocks</p>
    <p class="normtype">Side 1: Bloody Arse / Dead Dog / Snot / ****kicker / Me Fookin' Motor's 'Ad It / Fascist Fred<br />
      Side 2: Three Pints of Lager, a Bacardi, Four Packets of Crisps, and a Mars Please / Inner City Death Song / Liver Failure / Escape From the Gutter / Brain Heamorrage</p>
    <h2><br />
      2003</h2>
    <p><img src="../images/discography/beatlesfrontlc.jpg" alt="The Beatles" width="170" height="169" id="Image1" /></p>
    <h3>The Skidmarks : The Beatles</h3>
    <p class="normtype">Side 1: Pushover / Lockdown / ****hole / Parade / My Temp Hell<br />
    Side 2: Jim's In Trouble / My Dog John / Ian Paisley's a ****<br />
    Side 3: I Hate Everything / Wakey-Wakey / Sick Of All the Crap / Bug</p>
    <h2><span class="subheading"><br />
      </span>2004</h2>
    <p><img src="../images/discography/blank.jpg" alt="blank" width="170" height="169" /></p>
    <h3>Slig Vs Bish : Slig Vs Bish</h3>
    <p class="normtype">The Truth About **** / Easy Movements / Caveat Emporer / Slig Vs Bish / <br />
      How Spycatchers Hunting the GCHQ Whistleblower Plunged Me Into a World of Fear &amp; Paranoia / Scut Vs Glar / The Last Post</p>
    <p><img src="../images/discography/shuntfrontlc.jpg" alt="Shunt Front" width="170" height="170" /></p>
    <h3>Pope : Shunt</h3>
    <p class="normtype">Apocalyptic Racket / Stomp Machine / Insomnia / The Soy Sauce Health Scare / 119 Years Young / Off With His Head / Cold Outside Your Window / Amoeba Farm / Rifling the Data Cabinet / T10 / Banger / It's You He Gets It From</p>
    <h2><span class="subheading"><br />
    </span>2005</h2>
    <p><img src="../images/discography/blank.jpg" alt="blank" width="170" height="169" /></p>
    <h3>The Spooky Monks : The Spooky Monks</h3>
    <p class="normtype">Brand New Home / Barber / The Life and Times of Dipson Really Hoistshaft / ‹ber Thanks / Foxy Redhead / Dusty Redneck / Agent Arsehole / Peter From Peter / Beethoven / Denzil From Washington / Limp Handshake (Crying Baby) / By The Sea</p>
    <h2><span class="subheading"><br />
      </span>2006</h2>
    <p><img src="../images/discography/blank.jpg" alt="blank" width="170" height="169" /></p>
    <h3>Dead Elvis : England Is Our Bitch</h3>
    <p class="normtype">Paul McCartney / PGL / Generation of Swine / Zack Attack</p>
    <h2><br />
      2007</h2>
    <p><img src="../images/discography/blank.jpg" alt="blank" width="170" height="169" /></p>
    <h3>Dead Elvis : Who's On The Right?</h3>
    <p class="normtype">Shiny Revolver / Che Guevara / PGL / Sixth Form Liberals / Talk to Frank / Alcoholiday / Tell It To the Management / Resorting to War / Black Man In Pakistan / Walking In the Street</p>
    <h2><br />
      2008</h2>
    <p><img src="../images/discography/blank.jpg" alt="blank" width="170" height="169" /></p>
    <h3>Esprida Core : The Blame</h3>
    <p class="normtype">Gold / Auxiliary Mouth / Species / The Girl With A Moat Around Her Heart / It's Just You &amp; Me Now Babe / Who Man Rubix? / The Hunt / Rather You Than Me / Over the Edge</p>
    <h2><br />
      2009</h2>
    <p><img src="../images/discography/poperopelc.jpg" alt="Pope On A Rope" width="170" height="170" /></p>
    <h3>Pope : Pope On A Rope</h3>
    <p class="normtype">The Drag of Sloth / Still Life / Poker Face / Dummy's Boy / It's a Cupboard / Jazz Pile / Summer of Love / Just Imagine / Room 4</p>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html> 
    Spry CSS Sheet:
    PHP Code:
    @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
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-size100%;
        
    cursor: default;
        
    widthauto;
        
    font-familyArialHelveticasans-serif;
        
    text-transformuppercase;
        
    color#CCCCCC;
        
    background-color#000000;
        
    border-top-stylenone;
        
    border-right-stylenone;
        
    border-bottom-stylenone;
        
    border-left-stylenone;
    }
    /* 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-index1500;
    }
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-size100%;
        
    positionrelative;
        
    text-alignleft;
        
    cursorpointer;
        
    width8em;
        
    floatleft;
        
    background-color#000000;
    }
    /* 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
    {
        
    margin0;
        
    padding0;
        list-
    style-typenone;
        
    font-size100%;
        
    z-index1700;
        
    cursor: default;
        
    width8.2em;
        
    positionabsolute;
        
    left: -1000em;
        
    background-color#000000;
    }
    /* 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
    {
        
    leftauto;
        
    background-color#000000;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
        
    width8.2em;
        
    background-color#000000;
    }
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    {
        
    positionabsolute;
        
    margin: -50 0 95%;
        
    background-color#000000;
    }
    /* 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
    {
        
    leftauto;
        
    top0;
        
    background-color#000000;
    }

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

     DESIGN INFORMATION: describes color scheme, borders, fonts

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

    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    {
        
    border1px solid #CCC;
        
    background-color#000000;
    }
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    {
        
    displayblock;
        
    cursorpointer;
        
    background-color#000000;
        
    padding0em;
        
    color#CCCCCC;
        
    text-decorationnone;
        
    border-top-stylenone;
        
    border-right-stylenone;
        
    border-bottom-stylenone;
        
    border-left-stylenone;
    }
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hoverul.MenuBarHorizontal a:focus
    {
        
    background-color#33C;
        
    color#FFF;
    }
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHoverul.MenuBarHorizontal a.MenuBarItemSubmenuHoverul.MenuBarHorizontal a.MenuBarSubmenuVisible
    {
        
    background-color#33C;
        
    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-imagenone;
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* 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-imagenone;
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* 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-imageurl(SpryMenuBarDownHover.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }
    /* 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-imageurl(SpryMenuBarRightHover.gif);
        
    background-repeatno-repeat;
        
    background-position9550%;
    }

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

     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
    {
        
    positionabsolute;
        
    z-index1550;
    }
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screenprojection
    {
        
    ul.MenuBarHorizontal li.MenuBarItemIE
        
    {
            
    displayinline;
            
    f\loatleft;
            
    background#FFF;
        
    }

    Help or attempts to help greatly appreciated!

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Sorry Mrskill, do you have a link so I can play with it using firebug? The menu li's are not displaying when I put that code in. I think I'm missing something.

  9. #8
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    I think it's because the script for the actual spry bar is not included in the code itself, I need to give you that too. The site doesn't exist on the web anywhere that I could send you a link to. I could possibly email the site to you in a folder to preserve all the links, it's only 148k if I take out all the images?

  10. #9
    Junior Member
    Join Date
    Jul 2009
    Posts
    26
    Member #
    19444
    Quote Originally Posted by aeroweb99
    Sorry Mrskill, do you have a link so I can play with it using firebug? The menu li's are not displaying when I put that code in. I think I'm missing something.
    Ignore my last post, here's a link to the page:

    http://temporary.awardspace.biz/site/records/index.html

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I took out the opacity in the main div and that solved it. I don't know enough about opacity to tell you why. It doesn't look ant different without it anyway. I'm wondering if your menu was inheriting it from the main div somehow. It looked liked the menu had the opacity (I know it doesn't but that what it appeared as) and the main div was showing through. I'll dig around a little more and let you know if I find anything out.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

fix spry dropdown menu displaying behind image
,
frame spry menu
,
in ie menu bar dropping behind video
,
select disappear behind div
,
spey menu bar going behind content
,
spry menu appearing behind image
,

spry menu bar hidden behind div

,

spry menu sub list not showing in css template

,
sprymenu dissapears quickly
,
subhead of spry bar is behind my photo
Click on a term to search for related topics.
All times are GMT -6. The time now is 03:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com