SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Sydney
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    spry menubar problem

    I am having a problem with my spry menubar

    in internet explorer 7 the drop down items appear way far down the page....works fine on firefox.

    here is the page http://www.rush2getfit.com.au/index2.html

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    These types of things are always hard to implement which is why I prefer the lightweight suckerfish menus but of course they don't have all the extra features.

    It looks as though you may have to set a top position here for IE.

    Code:
    ul.MenuBarHorizontal ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        z-index: 1020;
        cursor: default;
        position: absolute;
        left: -1000em;
        top: 2.5em!important;
        float: none;
        height: 5em;
        background-color: transparent;
        width: auto;
        overflow: visible;
    }
    It also seems that you have missed out a div in one of the menu items compared to the rest of the list structure.

    Code:
        <li>
                                <div align="center"><a href="stuff.html" class="MenuBarItemSubmenu">STUFF</a>
                                    <ul>
                                        <li><a href="http://www.myspace.com/rush2getfit" target="_blank">MYSPACE</a></li>
                                        <li><a href="blog.html" target="_blank">BLOG</a></li>
                                        <li><a href="#">LINKS</a></li>
                                    </ul>
                                    </div>
                                </li>
    There are also z-index issues and you will need to set the td to have a higher z-index that the ones below.

    Code:
                        <td class="test" width="60%" bgcolor="#333333"><ul id="MenuBar2" class="MenuBarHorizontal">
    Code:
    .test{position:relative;z-index:999}

    Of course you may have to set lower z-indexes on the content below but this can be tricky in tables as you have an unhealthy mix of tables and css and deprecated markup.

    The menu is also doing a lot of other things such as inserting an iframe for IE and under and you would need to refer to the documentation with the menu to address any issues here.

    That's about as much as I can do here

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Sydney
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks a lot for your help....much appreciated.

    I noticed you have an impressive amount of posts...are you employed by site point or are you just a very generous contributor? Either way nice work.

    do you think you could explain a little more about the iframe thing? not sure what to do here....

    cheers,

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Sydney
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh and also i am having a bit of trouble fixing the z-index issue.....

    do i make a new css rule with those properties then assign it to the td? didnt seem to work.

    Sorry i am pretty new to css and everything webby (more of a graphic designer)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I copied the original spry menu's css back into your page and it seems to work ok so I added a couple of your styles back in to make it look like you had it (roughly).

    This seems to be working now.

    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" xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>rush2getfit - personal training in sydney</title>
    <style type="text/css">
    <!--
    .style3 {color: #EDEDED}
    #apDiv9 {
        position:absolute;
        left:575px;
        top:73px;
        width:347px;
        height:100px;
        z-index:1;
    }
    -->
    </style>
    <script src="http://www.rush2getfit.com.au/SpryAssets/xpath.js" type="text/javascript"></script>
    <script src="http://www.rush2getfit.com.au/SpryAssets/SpryData.js" type="text/javascript"></script>
    <script src="http://www.rush2getfit.com.au/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <style type="text/css">
    <!--
    #apDiv10 {
        position:absolute;
        left:616px;
        top:320px;
        width:37px;
        height:29px;
        z-index:1;
    }
    #apDiv11 {
        position:absolute;
        left:383px;
        top:366px;
        width:93px;
        height:64px;
        z-index:1;
    }
    .style7 {
        font-size: 14pt
    }
    #apDiv1 {
        position:absolute;
        left:750px;
        top:392px;
        width:114px;
        height:72px;
        z-index:1;
    }
    #apDiv2 {
        position:absolute;
        left:756px;
        top:410px;
        width:285px;
        height:136px;
        z-index:1;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_CheckFlashVersion(reqVerStr,msg){
      with(navigator){
        var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
        var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
        if (!isIE || !isWin){  
          var flashVer = -1;
          if (plugins && plugins.length > 0){
            var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
            desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
            if (desc == "") flashVer = -1;
            else{
              var descArr = desc.split(" ");
              var tempArrMajor = descArr[2].split(".");
              var verMajor = tempArrMajor[0];
              var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
              var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
              flashVer =  parseFloat(verMajor + "." + verMinor);
            }
          }
          // WebTV has Flash Player 4 or lower -- too low for video
          else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
    
          var verArr = reqVerStr.split(",");
          var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
      
          if (flashVer < reqVer){
            if (confirm(msg))
              window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
          }
        }
      } 
    }
    //-->
    
    </script>
    <style type="text/css">
    <!--
    body {
        background-image: url(http://www.rush2getfit.com.au/SpryAssets/graphics/gradient2optimised.jpg);
        background-repeat: repeat-x;
        background-color: #FFFFFF;
    }
    #apDiv3 {
        position:absolute;
        left:379px;
        top:607px;
        width:124px;
        height:68px;
        z-index:1;
    }
    #apDiv4 {
        position:absolute;
        left:289px;
        top:298px;
        width:300px;
        height:42px;
        z-index:0;
    }
    .style9 {
        color: #9900FF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-style: italic;
    }
    -->
    </style>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/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&#37;;
        cursor: default;
        width: auto;
    }
    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: 100%;
        position: relative;
        cursor: pointer;
        width: 16.6%;
        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: auto;
        position: absolute;
        left: -1000em;
        background-color: transparent;
    }
    .zindex {
        position: relative;
        z-index: 999;
    }
    
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{
        left: auto;
    }
    ul.MenuBarHorizontal ul li{
        width: 100%;
    }
    ul.MenuBarHorizontal ul ul{
        position: absolute;
        margin: -5% 0 0 95%;
    }
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{
        left: auto;
        top: 0;
    }
    ul.MenuBarHorizontal ul{
        border: 1px solid #CCC;
    }
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    {
        width: 15em;
        position: relative;
    }
    ul.MenuBarHorizontal a{
        display: block;
        cursor: pointer;
        background-color: #EEE;
        padding: 0.5em 0.75em;
        color: #333;
        text-decoration: none;
        font-weight:bold;
    text-align:center}
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{
        background-color: #33C;
        color: #FFF;
    }
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
        background-color: #33C;
        color: #FFF;
    }
    
    /*******************************************************************************
    
     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: default;
        color: #CCCCCC;
        text-decoration: none;
        background-color: #333333;
        padding-top: 10px;
        padding-right: 0px;
        padding-bottom: 10px;
        padding-left: 0px;
        background-position: 0% 0%;
        background-repeat: repeat;
    }
    /* 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: #CCCCCC;
        color: #333333;
    }
    /* 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: #4C4C4C;
        color: #FFFFFF;
    }
    
    /*******************************************************************************
    
     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(http://www.rush2getfit.com.au/SpryAssets/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(http://www.rush2getfit.com.au/SpryAssets/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(http://www.rush2getfit.com.au/SpryAssets/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(http://www.rush2getfit.com.au/SpryAssets/../website/SpryAssets/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;
    }
    @media screen, projection{
        ul.MenuBarHorizontal li.MenuBarItemIE{
            display: inline;
            f\loat: left;
            background: #FFF;
        }
    }
    
    
    
    
    
    
    
    .style10 {
        color: #990066
    }
    .style11 {
        font-size: 24px;
        font-weight: bold;
    }
    .style22 {color: #333333}
    .style23 {color: #666666}
    .style26 {color: #D255AC}
    .style29 {color: #000000}
    .style31 {font-size: 95%}
    .style32 {color: #FFFFFF}
    td {
        z-index: 999;
    }
    
    
    td.zindex2{z-index:-1}
    -->
    </style>
    <script src="http://www.rush2getfit.com.au/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>
    <body onload="MM_CheckFlashVersion('7,0,0,0','Content on this page requires a newer version of Adobe Flash Player. Do you want to download it now?');">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="BACKGROUND">
        <tr>
            <td width="20%" height="200">&nbsp;</td>
            <td colspan="2" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <th width="60%" bgcolor="#000000" scope="col"><img src="http://www.rush2getfit.com.au/graphics/banner.jpg" width="1000" height="200" /></th>
                    </tr>
                    <tr>
                        <td  class="zindex" bgcolor="#333333"><ul id="MenuBar2" class="MenuBarHorizontal">
                                <li> <a href="index.html">HOME</a> </li>
                                <li> <a href="about.html">ABOUT</a> </li>
                                <li> <a href="personaltraining.html" class="MenuBarItemSubmenu style31"> TRAINING</a>
                                    <ul>
                                        <li> <a href="outdoortraining.html">OUTDOOR TRAINING</a> </li>
                                        <li> <a href="indoortraining.html">INDOOR TRAINING</a></li>
                                        <li> <a href="boxingforfitness.html">BOXING FOR FITNESS</a></li>
                                        <li> <a href="bellydancing.html">BELLY DANCING</a></li>
                                        <li> <a href="motivation.html">MOTIVATION</a></li>
                                        <li><a href="pricelist.html">PRICE LIST</a></li>
                                    </ul>
                                </li>
                                <li> <a href="media.html" class="MenuBarItemSubmenu">MEDIA</a>
                                    <ul>
                                        <li><a href="photos.html">PHOTOS</a></li>
                                        <li><a href="video.html">VIDEO</a></li>
                                    </ul>
                                </li>
                                <li> <a href="stuff.html" class="MenuBarItemSubmenu">STUFF</a>
                                    <ul>
                                        <li><a href="http://www.myspace.com/rush2getfit" target="_blank">MYSPACE</a></li>
                                        <li><a href="blog.html" target="_blank">BLOG</a></li>
                                        <li><a href="#">LINKS</a></li>
                                    </ul>
                                </li>
                                <li> <a href="contact.html">CONTACT</a> </li>
                            </ul></td>
                    </tr>
                    <tr>
                        <td  width="60%" bgcolor="#990066"><table width="100%" z-index"20" border="0" cellpadding="15" cellspacing="10">
                                <tr>
                                    <th width="50%" align="left" valign="top" bgcolor="#FFDDD5" scope="col"><div class="style9 style10">
                                            <div>
                                                <p><span class="style10">Welcome to rush2getfit.com!!</span><br />
                                                    <img src="http://www.rush2getfit.com.au/graphics/blogsplitter.jpg" width="400" height="2" /><br />
                                                </p>
                                            </div>
                                        </div>
                                        <p>View complete <a href="http://www.rush2getfit.com.au/wordpress/">rush2getfit blog</a></p>
                                        <div>
                                            <p>
                                                <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','type','application/x-shockwave-flash','width','400px','height','338px','id','InsertWidget_5ea7e41c-b528-4b92-af1b-e3e9cf9b4193','align','middle','src','http://widgetserver.com/syndication/flash/wrapper/InsertWidget?appId=5ea7e41c-b528-4b92-af1b-e3e9cf9b4193','name','InsertWidget_5ea7e41c-b528-4b92-af1b-e3e9cf9b4193','quality','high','menu','false','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','movie','http://widgetserver.com/syndication/flash/wrapper/InsertWidget?appId=5ea7e41c-b528-4b92-af1b-e3e9cf9b4193' ); //end AC code
    </script>
                                            <noscript>
                                            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" type="application/x-shockwave-flash"
    width="400px" height="338px" id="InsertWidget_5ea7e41c-b528-4b92-af1b-e3e9cf9b4193" align="middle">
                                                <param name="movie" value="http://widgetserver.com/syndication/flash/wrapper/InsertWidget.swf?appId=5ea7e41c-b528-4b92-af1b-e3e9cf9b4193"/>
                                                <param name="quality" value="high" />
                                                <param name="wmode" value="transparent" />
                                                <param name="menu" value="false" />
                                                <!--                                                                                                                                                                                                                                                                                                                                                                            -->
                                                </embed>
                                            </object>
                                            </noscript>
                                            <img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://www.rush2getfit.com.au/http://runtime.widgetbox.com/syndication/track/5ea7e41c-b528-4b92-af1b-e3e9cf9b4193.gif" /> <img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://www.rush2getfit.com.au/http://runtime.widgetbox.com/syndication/track/9e5a9cbe-6321-4724-85f6-7ac2f981f124.gif" /> <img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://www.rush2getfit.com.au/http://runtime.widgetbox.com/syndication/track/805db090-96bc-4aa4-acfc-72b0b959fee1.gif" /> <img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://www.rush2getfit.com.au/http://runtime.widgetbox.com/syndication/track/e69dceb9-f8c0-4d3b-970a-4c923cd5528c.gif" /> <img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://www.rush2getfit.com.au/http://runtime.widgetbox.com/syndication/track/91d6aacb-fc9a-4a45-93ff-593a76dfa037.gif" /> <img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://www.rush2getfit.com.au/http://runtime.widgetbox.com/syndication/track/91d6aacb-fc9a-4a45-93ff-593a76dfa037.gif" />
                                            </p>
                                        </div>
                                        <p><img src="http://www.rush2getfit.com.au/graphics/backtexture.png" width="433" height="269" /></p></th>
                                    <th width="50%" align="center" z-index"20" valign="top" bgcolor="#FFDDD5" scope="col"><p>CHECK OUT RASHA'S  VIDEO LESSONS:</p>
                                        <p>OUTDOOR TRAINING</p>
                                        <div>
                                            <p>
                                                <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','350','height','196','id','FLVPlayer2','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=videos/bellydancing&autoPlay=false&autoRewind=true','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
                    </script>
                                            <noscript>
                                            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="350" height="196" id="FLVPlayer2">
                                                <param name="movie" value="FLVPlayer_Progressive.swf" />
                                                <param name="salign" value="lt" />
                                                <param name="quality" value="high" />
                                                <param name="scale" value="noscale" />
                                                <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=videos/bellydancing&autoPlay=false&autoRewind=true" />
                                                <embed src="http://www.rush2getfit.com.au/FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=videos/bellydancing&autoPlay=false&autoRewind=true" quality="high" scale="noscale" width="350" height="196" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />
                                                </embed>
                                            </object>
                                            </noscript>
                                            <a href="video.html"><br />
                                            watch more outdoor training clips.....</a>
                                            </p>
                                        </div>
                                        <p><img src="http://www.rush2getfit.com.au/graphics/blogsplitter.jpg" width="400" height="2" /></p>
                                        <p>BELLYDANCING<br />
                                        </p>
                                        <p>
                                            <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','350','height','196','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=videos/bellydancing&autoPlay=false&autoRewind=true','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
                    </script>
                                        <noscript>
                                        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="350" height="196" id="FLVPlayer">
                                            <param name="movie" value="FLVPlayer_Progressive.swf" />
                                            <param name="salign" value="lt" />
                                            <param name="quality" value="high" />
                                            <param name="scale" value="noscale" />
                                            <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=videos/bellydancing&autoPlay=false&autoRewind=true" />
                                            <embed src="http://www.rush2getfit.com.au/FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=videos/bellydancing&autoPlay=false&autoRewind=true" quality="high" scale="noscale" width="350" height="196" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />
                                        </object>
                                        </noscript>
                                        <br />
                                        <a href="video.html">watch more belly dance clips.... </a>
                                        </p>
                                        <p><img src="http://www.rush2getfit.com.au/graphics/blogsplitter.jpg" width="400" height="2" /></p>
                                        <p>NEW PICTURES:</p>
                                        <p><a href="photos.html">VIEW GALLERY</a></p>
                                        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="5">
                                            <tr>
                                                <th scope="col"><img src="http://www.rush2getfit.com.au/images/outdoor/thumbnails/outdoor01.jpg" width="75" height="56" /></th>
                                                <th scope="col"><img src="http://www.rush2getfit.com.au/images/outdoor/thumbnails/outdoor03.jpg" width="75" height="56" /></th>
                                                <th scope="col"><img src="http://www.rush2getfit.com.au/images/outdoor/thumbnails/outdoor05.jpg" width="75" height="56" /></th>
                                            </tr>
                                            <tr>
                                                <td align="center"><img src="http://www.rush2getfit.com.au/images/outdoor/thumbnails/outdoor06.jpg" width="75" height="56" /></td>
                                                <td align="center"><img src="http://www.rush2getfit.com.au/images/outdoor/thumbnails/outdoor08.jpg" width="75" height="56" /></td>
                                                <td align="center"><img src="http://www.rush2getfit.com.au/images/outdoor/thumbnails/outdoor11.jpg" width="75" height="56" /></td>
                                            </tr>
                                        </table>
                                        <p>View all outdoor personal training photos</p>
                                        <p>&nbsp;</p>
                                        <p>&nbsp;</p>
                                        <p>&nbsp;</p></th>
                                </tr>
                                <tr>
                                    <th colspan="2" align="left" valign="top" bgcolor="#990066" scope="col">&nbsp;</th>
                                </tr>
                            </table></td>
                    </tr>
                    <tr>
                        <td width="60%" height="44" align="center" valign="middle" bgcolor="#000000"><p class="style32">ALL CONTENT COPYRIGHT &#169; 2007 RUSH2GETFIT | <a href="contact.html">CONTACT</a><br />
                                DESIGN BY <a href="http://www.videocake.com">VIDEOCAKE PRODUCTIONS PTY. LTD.</a><br />
                            </p></td>
                    </tr>
                </table>
                <p>&nbsp;</p>
                <p><span class="style3"></span> </p>
                <p class="style7">&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p></td>
            <td width="20%" height="200" valign="top"><p align="left">&nbsp; </p></td>
        </tr>
    </table>
    <script type="text/javascript">
    <!--
    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    I also removed the nested divs from the menu because they weren't needed.

    When you use third party menus like theses you should you should get them working on a standalone page first so you know everything is working nicely. Once its working then you integrate it into your page. If you then have problems you know that the menu was ok and there must be a conflict somewhere else.

    Hope it helps

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Sydney
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The nested divs seem to be what keeps the menu items dropping straight down rather than going off to the side like the "stuff" menu item did before your first post...at least on my version of IE....

    But then of course there is the z-index problem when you use the divs...maybe i just lower the z-index of the table with all the content in it...can i do that?

    Thanks for your help

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Copy all the code I gave you and then just add this line which IE7 needs.

    Code:
    ul.MenuBarHorizontal ul li{clear:left}
    IE6 and firefox were already working ok. You don't need the nested div as it does nothing other than clutter up your mark-up (and the align="center" is deprecated in strict anyway so you shouldn't be using it).

  8. #8
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Sydney
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers that worked... you have been a great help...still seems to be some z-index problems with the flash players...is there a flash parameter that will help with this possibly?

  9. #9
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Sydney
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i seemed to fix the problem using the wmode:transparent parameter

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes there is a sticky in the flash forum about wmode that is worth reading


Bookmarks

Posting Permissions

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