6 Replies Latest reply: Jul 10, 2012 6:15 AM by alexisonsmith3 RSS

    Issues with Chrome, IE, Safari

    alexisonsmith3

      Hi,

       

      After having different people look at my website. They have noticed in different browsers my page layout changes drastically. Can anyone notice something not right in the code,

       

      Regards,

       

      Alex

       

      www.newcityexplorer.com

        • 1. Re: Issues with Chrome, IE, Safari
          dhosford Employee Hosts

          Hi there,

           

            Would you mind posting a link to your source folder so I can get a closer look?

           

          Thanks,

          -Devon

          • 2. Re: Issues with Chrome, IE, Safari
            alexisonsmith3 Community Member



            <!DOCTYPE HTML>



            <html>



            <head>



            <meta charset="utf-8">



            <title>New City Explorer</title>







            <!--[if lte IE 8]>



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



            <![endif]-->







            <link href="textboxes/text-boxes-finished-files/css/boxes.css" rel="stylesheet" type="text/css">











            <style type="text/css">



            /**THIS IS FOR PAGE SPECIFIC STYLES, OTHERWISE PUT THESE RULES INTO AN EXTERNAL STYLE SHEET**/







            /**add vertical scrollbar channel to short pages**/

            * {



                padding: 0;



                margin: 0;



            }

            html {overflow-y:scroll}







            body {

            width:auto;

            margin:auto;

            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

            font-size: 90%;

            color: #000;

            border: 1px solid #000;

            background: rgb(160,216,239); /* Old browsers */

            background: -moz-linear-gradient(top, rgba(160,216,239,1) 0%, rgba(221,241,249,1) 23%, rgba(254,255,255,1) 87%); /* FF3.6+ */

            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(160,216,239,1)), color-stop(23%,rgba(221,241,249,1)), color-stop(87%,rgba(254,255,255,1))); /* Chrome,Safari4+ */

            background: -webkit-linear-gradient(top, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* Chrome10+,Safari5.1+ */

            background: -o-linear-gradient(top, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* Opera 11.10+ */

            background: -ms-linear-gradient(top, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* IE10+ */

            background: linear-gradient(top, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* W3C */

            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=0 ); /* IE6-9 */

            background-color: linear-gradient(;

            background-position: top;

            }







            #container {

            width: 920px;

            font-size: 16px;

            overflow:hidden; /**to contain floats**/

            margin-top: 0;

            margin-right: auto;

            margin-bottom: 0;

            margin-left: auto;

            padding-top: 12px;

            padding-right: 3px;

            padding-bottom: 12px;

            padding-left: 3px;

            }







            #Logo {



            background-image: url(Pictures/Logo_2.png);



            background-repeat: no-repeat;



            height: 80px;



            width: 950px; /**adjust width to match your image**/



            float: left;



            }







            #rightSidebar {

            float:right;

            margin-top: 188px; /**adjust as needed**/

            width: 225px;

            min-height: 300px;

            margin-right: 20px;

            }







            /**clear floats after**/



            #rightSidebar:after {

            visibility: hidden;

            display: block;

            font-size: 0;

            content: " ";

            clear: right;

            height: 0;

            width: 225px;


            }







            #wrapper {

            width: 925px; /**centered**/

            margin-top: 0;

            margin-right: 200px;

            margin-bottom: 0;

            margin-left: 150px;

            }







            /**clear nav floats**/



            nav:after {



            content: ".";



            display: block;



            height: 0;



            clear: both;



            visibility: hidden;



            }



            section {margin-top: 25px;}







            section h1 {

            margin:0;

            color: #000;

            font-size:30px;

            text-align:center;

            margin-top: 45px;

            font-weight:bold;

            font-family: Verdana, Geneva, sans-serif;

            }







            #vision {

            font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

            font-size:14px;

            margin: 5px 0px;

            -moz-border-radius:12px;

            -webkit-border-radius:12px;

            border-radius:12px;

            font-weight:bold;

            text-align: center;

            overflow:hidden; /**to contain floats**/

            color: #FFF;

            border: 1px solid #000;

            }







            figure {

            margin-top: 0;

            width: 244px;

            float: left;

            background-color: #0066FF;

            padding: 10px;

            margin: 10px;

            margin-left: 23px;

            -moz-border-radius:8px;

            -webkit-border-radius:8px;

            border-radius:8px;

            -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

            -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

            border: 3px solid #999;

            color: #FFF;

            }







            figcaption {



            text-align: center;



            color:#000;



            width: 100%;



            font-family: Verdana, Geneva, sans-serif;



            font-size: 18px;



            margin: 5px 0px;



            -moz-border-radius:6px;



            -webkit-border-radius:6px;



            border-radius:6px;



            padding: 1px 0 1px 0;



            }







            figcaption a{

            display:block;

            text-decoration: none;

            padding: 4px;

            color: #FFF;

            font-weight: bold;

            }







            figcaption a:hover {

            background-color: #000;

            color: #FFF;

            -moz-border-radius:12px;

            -webkit-border-radius:12px;

            border-radius:12px;

            -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

            -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

            font-weight: bold;

            text-decoration: none;

            }







            footer {

            padding: 10px 0;

            clear: both;

            color: #fff;



            -moz-border-radius:8px;



            -webkit-border-radius:8px;



            border-radius:8px;



            -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;



            -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;



            border: 1px solid #999;



            color: #000;

            }







            footer p {

            color:#000;

            margin:0 0 5px 0;

            text-align: center;

            }



            ul#bottom-nav {



            list-style-type:none;



            overflow:hidden;



            width:90%;



            margin:0 auto;



            }



            ul#bottom-nav li {

            float:left;

            padding-right:2px;

            border-right-width: 1px;

            border-right-style: solid;

            border-right-color: #000;

            }



            ul#bottom-nav li.last {



            border:none;



            }



            ul#bottom-nav a {



            display:block;



            text-decoration: none;



            padding: 4px;



            color: #000;



            font-weight: medium



            }







            #phone {



            font-weight:bold;



            color: #000;



            }



            </style>



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

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

            <script type="text/javascript">



              var _gaq = _gaq || [];

              _gaq.push(['_setAccount', 'UA-32886421-1']);

              _gaq.push(['_trackPageview']);



              (function() {

                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

              })();



            </script>

            </head>











            <body>







            <div id="rightSidebar">



            <h3> </h3>



            <div class="box">



            <h3>Travel Blog</h3>



            <p>This is the text for the first box</p>

            </div>

            <!-- end class box -->







            <div class="box">



            <h3>London Blog</h3>



            <p>this is the text for the second box.  </p>



            </div> <!-- end class box -->







            <div class="box">



            <h3>Weekend Blog</h3>



            <p>this is the text for the third box.  </p>



            </div> <!-- end class box -->







            <div class="box">



            <h3>Blog 4</h3>



            <p>this is the text for the fourth box. </p>



            </div> <!-- end class box -->



             



            <h3> </h3>



            </div> <!--end #rightSidebar-->







            <div id="wrapper">

            <div id="MyRules">

              <div id="container">

               

                <header><div id="Logo"></div></header>

               

               

               

              </div>

            </div>

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

              <li><a href="index.html">Home</a>    </li>

              <li><a href="aboutus.html">About Us</a></li>

              <li><a href="destinations.html" class="MenuBarItemSubmenu">Destinations</a>

                <ul>

                  <li><a href="asia.html" class="MenuBarItemSubmenu">Asia</a>

                    <ul>

                      <li><a href="hongkong.html">Hong Kong</a></li>

                      <li><a href="kualalumpur.html">kuala Lumpur</a></li>

                      <li><a href="Singapore.html">Singapore</a></li>

                    </ul>

                  </li>

                  <li><a href="europe.html" class="MenuBarItemSubmenu">Europe</a>

                    <ul>

                      <li><a href="bordeaux.html">Bordeaux</a></li>

                      <li><a href="brussels.html">Brussels</a></li>

                      <li><a href="edinburgh.html">Edinburgh</a></li>

                      <li><a href="london.html">London</a></li>

                      <li><a href="paris.html">Paris</a></li>

                    </ul>

                  </li>

                  <li><a href="usa.html" class="MenuBarItemSubmenu">USA</a>

                    <ul>

                      <li><a href="chicago.html">Chicago</a></li>

                      <li><a href="maui.html">Maui</a></li>

                      <li><a href="sanfrancisco.html">San Francisco</a></li>

                    </ul>

                  </li>

                  <li><a href="canada.html" class="MenuBarItemSubmenu">Canada</a>

                    <ul>

                      <li><a href="montreal.html">Montreal</a></li>

                      <li><a href="quebeccity.html">Quebec City</a></li>

                    </ul>

                  </li>

                </ul>

              </li>

              <li><a href="links.html">Links</a>    </li>

              <li><a href="contact.html" class="MenuBarItemSubmenu">Contact</a>

                <ul>

                  <li><a href="contactus.html">Contact Us</a></li>

                  <li><a href="donate.html">Donate</a></li>

                  <li><a href="newsletter.html">Newsletter</a></li>

                </ul>

              </li>

            </ul>

            <!--end container-->



            <section>

              <header>

                <h1>Top Cities to Explore</h1>

            </header></section>







            <section id="vision">



            <figure> <a href="www.newcityexplorer.com/city_break_london">



            <img src="Pictures/London_main.JPG" width="244" height="188" alt="London Main" /></a>



            <figcaption><a href="city_break_london.html">London</a></figcaption>



            </figure>







            <figure><a href="www.newcityexplorer.com/city_break_brussels">



            <img src="Pictures/Brussels_main.jpg" width="244" height="188" alt="Brussels main"></a>



            <figcaption><a href="city_break_brussels.html">Brussels</a></figcaption>



            </figure>







            <figure><a href="www.newcityexplorer.com/city_break_chicago">



            <img src="Pictures/Chicago_main.jpg" width="244" height="188" alt="Chicago Main"></a>



            <figcaption><a href="city_break_chicago.html">Chicago</a></figcaption>



            </figure>







            <figure><a href="www.newcityexplorer.com/city_break_edinburgh">



            <img src="Pictures/Edinburgh_main.jpg" width="244" height="188" alt="Edinburgh"></a>



            <figcaption><a href="city_break_edinburgh.html">Edinburgh</a></figcaption>



            </figure>







            <figure><a href="www.newcityexplorer.com/city_break_sanfransisco">



            <img src="Pictures/SF_main.jpg" width="244" height="188" alt="SF Main"></a>



            <figcaption><a href="city_break_sanfransisco.html">San Fransisco</a></figcaption>



            </figure>



            </section>







            <footer>



            <ul id="bottom-nav">



            <li><a href="index.html">Home</a></li>



            <li><a href="aboutus.html">About Us</a></li>



            <li><a href="citybreak.html">City Breaks</a></li>



            <li><a href="recommendedwebsites.html">Recommended Websites</a></li>



            <li><a href="blog.html">Blog</a></li>



            <li><a href="secret.html">Secret link</a></li>



            <li><a href="newsletter.html">Newsletter</a></li>



            <li><a href="sitemap.html">Sitemap</a></li>



            <li><a href="donate.html">Donate</a></li>



            <li class="last"><a href="contactus.html">Contact Us</a></li>



            </ul>



            <p>&copy; New City Explorer 2012</p>



            </footer>







            <!--end #wrapper--></div>

            <script type="text/javascript">

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

            </script>

            </body>





            </html>
            • 3. Re: Issues with Chrome, IE, Safari
              dhosford Employee Hosts

              Thanks, but I was hoping for a .zip folder with all of your images, stylesheets, etc. 

               

              -Devon

              • 4. Re: Issues with Chrome, IE, Safari
                alexisonsmith3 Community Member

                @charset "utf-8";

                 

                 

                .box {

                          background: url(../images/boxBottom.jpg) no-repeat scroll left bottom;

                          margin-bottom: 10px;

                          width: 225px;

                          padding-top: 0;

                          padding-right: 0;

                          padding-bottom: 15px;

                          padding-left: 0;

                          float: left;

                }

                 

                 

                .box h3 {

                          color: #000;

                          font-size: 17px;

                          height: 35px;

                          line-height: 30px;

                          margin-top: 0;

                          margin-right: 20;

                          margin-bottom: 0;

                          margin-left: 0;

                          padding-top: 0;

                          padding-bottom: 0;

                          border-top-width: 0px;

                          border-right-width: 1px;

                          border-bottom-width: 0px;

                          border-left-width: 0px;

                          border-top-style: solid;

                          border-right-style: solid;

                          border-bottom-style: solid;

                          border-left-style: solid;

                          border-top-color: #CCC;

                          border-right-color: #CCC;

                          border-bottom-color: #CCC;

                          border-left-color: #CCC;

                          background-attachment: scroll;

                          background-image: url(../images/box.jpg);

                          background-repeat: repeat;

                          background-position: 0 0;

                 

                }

                 

                 

                .box p {

                          background: #ffffff none repeat scroll 0 0;

                          color: #444444;

                          font-size: 11px;

                          line-height: 1.3em;

                          width: 220px;

                          margin-top: 0;

                          margin-right: 20;

                          margin-bottom: 0;

                          margin-left: 0;

                          padding-top: 15px;

                          border-top-width: 0;

                          border-right-width: 1px;

                          border-bottom-width: 0;

                          border-left-width: 1px;

                          border-top-style: solid;

                          border-right-style: solid;

                          border-bottom-style: solid;

                          border-left-style: solid;

                          border-top-color: #CCC;

                          border-right-color: #CCC;

                          border-bottom-color: #CCC;

                          border-left-color: #CCC;

                          padding-right: 3px;

                }

                • 5. Re: Issues with Chrome, IE, Safari
                  alexisonsmith3 Community Member

                  // SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1

                  //

                  // Copyright (c) 2006. Adobe Systems Incorporated.

                  // All rights reserved.

                  //

                  // Redistribution and use in source and binary forms, with or without

                  // modification, are permitted provided that the following conditions are met:

                  //

                  //   * Redistributions of source code must retain the above copyright notice,

                  //     this list of conditions and the following disclaimer.

                  //   * Redistributions in binary form must reproduce the above copyright notice,

                  //     this list of conditions and the following disclaimer in the documentation

                  //     and/or other materials provided with the distribution.

                  //   * Neither the name of Adobe Systems Incorporated nor the names of its

                  //     contributors may be used to endorse or promote products derived from this

                  //     software without specific prior written permission.

                  //

                  // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"

                  // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE

                  // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE

                  // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE

                  // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

                  // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

                  // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

                  // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

                  // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

                  // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE

                  // POSSIBILITY OF SUCH DAMAGE.

                   

                   

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

                   

                   

                  SpryMenuBar.js

                  This file handles the JavaScript for Spry Menu Bar.  You should have no need

                  to edit this file.  Some highlights of the MenuBar object is that timers are

                  used to keep submenus from showing up until the user has hovered over the parent

                  menu item for some time, as well as a timer for when they leave a submenu to keep

                  showing that submenu until the timer fires.

                   

                   

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

                   

                   

                  (function() { // BeginSpryComponent

                   

                   

                  if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};

                   

                   

                  Spry.BrowserSniff = function()

                  {

                            var b = navigator.appName.toString();

                            var up = navigator.platform.toString();

                            var ua = navigator.userAgent.toString();

                   

                   

                            this.mozilla = this.ie = this.opera = this.safari = false;

                            var re_opera = /Opera.([0-9\.]*)/i;

                            var re_msie = /MSIE.([0-9\.]*)/i;

                            var re_gecko = /gecko/i;

                            var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;

                            var r = false;

                   

                   

                            if ( (r = ua.match(re_opera))) {

                                      this.opera = true;

                                      this.version = parseFloat(r[1]);

                            } else if ( (r = ua.match(re_msie))) {

                                      this.ie = true;

                                      this.version = parseFloat(r[1]);

                            } else if ( (r = ua.match(re_safari))) {

                                      this.safari = true;

                                      this.version = parseFloat(r[2]);

                            } else if (ua.match(re_gecko)) {

                                      var re_gecko_version = /rv:\s*([0-9\.]+)/i;

                                      r = ua.match(re_gecko_version);

                                      this.mozilla = true;

                                      this.version = parseFloat(r[1]);

                            }

                            this.windows = this.mac = this.linux = false;

                   

                   

                            this.Platform = ua.match(/windows/i) ? "windows" :

                                                                    (ua.match(/linux/i) ? "linux" :

                                                                    (ua.match(/mac/i) ? "mac" :

                                                                    ua.match(/unix/i)? "unix" : "unknown"));

                            this[this.Platform] = true;

                            this.v = this.version;

                   

                   

                            if (this.safari && this.mac && this.mozilla) {

                                      this.mozilla = false;

                            }

                  };

                   

                   

                  Spry.is = new Spry.BrowserSniff();

                   

                   

                  // Constructor for Menu Bar

                  // element should be an ID of an unordered list (<ul> tag)

                  // preloadImage1 and preloadImage2 are images for the rollover state of a menu

                  Spry.Widget.MenuBar = function(element, opts)

                  {

                            this.init(element, opts);

                  };

                   

                   

                  Spry.Widget.MenuBar.prototype.init = function(element, opts)

                  {

                            this.element = this.getElement(element);

                   

                   

                            // represents the current (sub)menu we are operating on

                            this.currMenu = null;

                            this.showDelay = 250;

                            this.hideDelay = 600;

                            if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))

                            {

                                      // bail on older unsupported browsers

                                      return;

                            }

                   

                   

                            // Fix IE6 CSS images flicker

                            if (Spry.is.ie && Spry.is.version < 7){

                                      try {

                                                document.execCommand("BackgroundImageCache", false, true);

                                      } catch(err) {}

                            }

                   

                   

                            this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;

                            this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;

                            this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;

                            this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;

                            this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;

                   

                   

                            this.hoverClass = 'MenuBarItemHover';

                            this.subHoverClass = 'MenuBarItemSubmenuHover';

                            this.subVisibleClass ='MenuBarSubmenuVisible';

                            this.hasSubClass = 'MenuBarItemSubmenu';

                            this.activeClass = 'MenuBarActive';

                            this.isieClass = 'MenuBarItemIE';

                            this.verticalClass = 'MenuBarVertical';

                            this.horizontalClass = 'MenuBarHorizontal';

                            this.enableKeyboardNavigation = true;

                   

                   

                            this.hasFocus = false;

                            // load hover images now

                            if(opts)

                            {

                                      for(var k in opts)

                                      {

                                                if (typeof this[k] == 'undefined')

                                                {

                                                          var rollover = new Image;

                                                          rollover.src = opts[k];

                                                }

                                      }

                                      Spry.Widget.MenuBar.setOptions(this, opts);

                            }

                   

                   

                            // safari doesn't support tabindex

                            if (Spry.is.safari)

                                      this.enableKeyboardNavigation = false;

                   

                   

                            if(this.element)

                            {

                                      this.currMenu = this.element;

                                      var items = this.element.getElementsByTagName('li');

                                      for(var i=0; i<items.length; i++)

                                      {

                                                if (i > 0 && this.enableKeyboardNavigation)

                                                          items[i].getElementsByTagName('a')[0].tabIndex='-1';

                   

                   

                                                this.initialize(items[i], element);

                                                if(Spry.is.ie)

                                                {

                                                          this.addClassName(items[i], this.isieClass);

                                                          items[i].style.position = "static";

                                                }

                                      }

                                      if (this.enableKeyboardNavigation)

                                      {

                                                var self = this;

                                                this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);

                                      }

                   

                   

                                      if(Spry.is.ie)

                                      {

                                                if(this.hasClassName(this.element, this.verticalClass))

                                                {

                                                          this.element.style.position = "relative";

                                                }

                                                var linkitems = this.element.getElementsByTagName('a');

                                                for(var i=0; i<linkitems.length; i++)

                                                {

                                                          linkitems[i].style.position = "relative";

                                                }

                                      }

                            }

                  };

                  Spry.Widget.MenuBar.KEY_ESC = 27;

                  Spry.Widget.MenuBar.KEY_UP = 38;

                  Spry.Widget.MenuBar.KEY_DOWN = 40;

                  Spry.Widget.MenuBar.KEY_LEFT = 37;

                  Spry.Widget.MenuBar.KEY_RIGHT = 39;

                   

                   

                  Spry.Widget.MenuBar.prototype.getElement = function(ele)

                  {

                            if (ele && typeof ele == "string")

                                      return document.getElementById(ele);

                            return ele;

                  };

                   

                   

                  Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)

                  {

                            if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)

                            {

                                      return false;

                            }

                            return true;

                  };

                   

                   

                  Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)

                  {

                            if (!ele || !className || this.hasClassName(ele, className))

                                      return;

                            ele.className += (ele.className ? " " : "") + className;

                  };

                   

                   

                  Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)

                  {

                            if (!ele || !className || !this.hasClassName(ele, className))

                                      return;

                            ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");

                  };

                   

                   

                  // addEventListener for Menu Bar

                  // attach an event to a tag without creating obtrusive HTML code

                  Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)

                  {

                            try

                            {

                                      if (element.addEventListener)

                                      {

                                                element.addEventListener(eventType, handler, capture);

                                      }

                                      else if (element.attachEvent)

                                      {

                                                element.attachEvent('on' + eventType, handler);

                                      }

                            }

                            catch (e) {}

                  };

                   

                   

                  // createIframeLayer for Menu Bar

                  // creates an IFRAME underneath a menu so that it will show above form controls and ActiveX

                  Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)

                  {

                            var layer = document.createElement('iframe');

                            layer.tabIndex = '-1';

                            layer.src = 'javascript:""';

                            layer.frameBorder = '0';

                            layer.scrolling = 'no';

                            menu.parentNode.appendChild(layer);

                   

                            layer.style.left = menu.offsetLeft + 'px';

                            layer.style.top = menu.offsetTop + 'px';

                            layer.style.width = menu.offsetWidth + 'px';

                            layer.style.height = menu.offsetHeight + 'px';

                  };

                   

                   

                  // removeIframeLayer for Menu Bar

                  // removes an IFRAME underneath a menu to reveal any form controls and ActiveX

                  Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)

                  {

                            var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');

                            while(layers.length > 0)

                            {

                                      layers[0].parentNode.removeChild(layers[0]);

                            }

                  };

                   

                   

                  // clearMenus for Menu Bar

                  // root is the top level unordered list (<ul> tag)

                  Spry.Widget.MenuBar.prototype.clearMenus = function(root)

                  {

                            var menus = root.getElementsByTagName('ul');

                            for(var i=0; i<menus.length; i++)

                                      this.hideSubmenu(menus[i]);

                   

                   

                            this.removeClassName(this.element, this.activeClass);

                  };

                   

                   

                  // bubbledTextEvent for Menu Bar

                  // identify bubbled up text events in Safari so we can ignore them

                  Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()

                  {

                            return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));

                  };

                   

                   

                  // showSubmenu for Menu Bar

                  // set the proper CSS class on this menu to show it

                  Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)

                  {

                            if(this.currMenu)

                            {

                                      this.clearMenus(this.currMenu);

                                      this.currMenu = null;

                            }

                   

                            if(menu)

                            {

                                      this.addClassName(menu, this.subVisibleClass);

                                      if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')

                                      {

                                                if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)

                                                {

                                                          menu.style.top = menu.parentNode.offsetTop + 'px';

                                                }

                                      }

                                      if(Spry.is.ie && Spry.is.version < 7)

                                      {

                                                this.createIframeLayer(menu);

                                      }

                            }

                            this.addClassName(this.element, this.activeClass);

                  };

                   

                   

                  // hideSubmenu for Menu Bar

                  // remove the proper CSS class on this menu to hide it

                  Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)

                  {

                            if(menu)

                            {

                                      this.removeClassName(menu, this.subVisibleClass);

                                      if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')

                                      {

                                                menu.style.top = '';

                                                menu.style.left = '';

                                      }

                                      if(Spry.is.ie && Spry.is.version < 7)

                                                this.removeIframeLayer(menu);

                            }

                  };

                   

                   

                  // initialize for Menu Bar

                  // create event listeners for the Menu Bar widget so we can properly

                  // show and hide submenus

                  Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)

                  {

                            var opentime, closetime;

                            var link = listitem.getElementsByTagName('a')[0];

                            var submenus = listitem.getElementsByTagName('ul');

                            var menu = (submenus.length > 0 ? submenus[0] : null);

                   

                   

                            if(menu)

                                      this.addClassName(link, this.hasSubClass);

                   

                   

                            if(!Spry.is.ie)

                            {

                                      // define a simple function that comes standard in IE to determine

                                      // if a node is within another node

                                      listitem.contains = function(testNode)

                                      {

                                                // this refers to the list item

                                                if(testNode == null)

                                                          return false;

                   

                   

                                                if(testNode == this)

                                                          return true;

                                                else

                                                          return this.contains(testNode.parentNode);

                                      };

                            }

                   

                   

                            // need to save this for scope further down

                            var self = this;

                            this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);

                            this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);

                   

                   

                            if (this.enableKeyboardNavigation)

                            {

                                      this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);

                                      this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);

                            }

                  };

                  Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)

                  {

                            this.lastOpen = listitem.getElementsByTagName('a')[0];

                            this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);

                            this.hasFocus = true;

                  };

                  Spry.Widget.MenuBar.prototype.onBlur = function (listitem)

                  {

                            this.clearSelection(listitem);

                  };

                  Spry.Widget.MenuBar.prototype.clearSelection = function(el){

                            //search any intersection with the current open element

                            if (!this.lastOpen)

                                      return;

                   

                   

                            if (el)

                            {

                                      el = el.getElementsByTagName('a')[0];

                   

                                      // check children

                                      var item = this.lastOpen;

                                      while (item != this.element)

                                      {

                                                var tmp = el;

                                                while (tmp != this.element)

                                                {

                                                          if (tmp == item)

                                                                    return;

                                                          try{

                                                                    tmp = tmp.parentNode;

                                                          }catch(err){break;}

                                                }

                                                item = item.parentNode;

                                      }

                            }

                            var item = this.lastOpen;

                            while (item != this.element)

                            {

                                      this.hideSubmenu(item.parentNode);

                                      var link = item.getElementsByTagName('a')[0];

                                      this.removeClassName(link, this.hoverClass);

                                      this.removeClassName(link, this.subHoverClass);

                                      item = item.parentNode;

                            }

                            this.lastOpen = false;

                  };

                  Spry.Widget.MenuBar.prototype.keyDown = function (e)

                  {

                            if (!this.hasFocus)

                                      return;

                   

                   

                            if (!this.lastOpen)

                            {

                                      this.hasFocus = false;

                                      return;

                            }

                   

                   

                            var e = e|| event;

                            var listitem = this.lastOpen.parentNode;

                            var link = this.lastOpen;

                            var submenus = listitem.getElementsByTagName('ul');

                            var menu = (submenus.length > 0 ? submenus[0] : null);

                            var hasSubMenu = (menu) ? true : false;

                   

                   

                            var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];

                   

                            if (!opts[3])

                                      opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;

                   

                   

                            var found = 0;

                            switch (e.keyCode){

                                      case this.upKeyCode:

                                                found = this.getElementForKey(opts, 'y', 1);

                                                break;

                                      case this.downKeyCode:

                                                found = this.getElementForKey(opts, 'y', -1);

                                                break;

                                      case this.leftKeyCode:

                                                found = this.getElementForKey(opts, 'x', 1);

                                                break;

                                      case this.rightKeyCode:

                                                found = this.getElementForKey(opts, 'x', -1);

                                                break;

                                      case this.escKeyCode:

                                      case 9:

                                                this.clearSelection();

                                                this.hasFocus = false;

                                      default: return;

                            }

                            switch (found)

                            {

                                      case 0: return;

                                      case 1:

                                                //subopts

                                                this.mouseOver(listitem, e);

                                                break;

                                      case 2:

                                                //parent

                                                this.mouseOut(opts[2], e);

                                                break;

                                      case 3:

                                      case 4:

                                                // left - right

                                                this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);

                                                break;

                            }

                            var link = opts[found].getElementsByTagName('a')[0];

                            if (opts[found].nodeName.toLowerCase() == 'ul')

                                      opts[found] = opts[found].getElementsByTagName('li')[0];

                   

                   

                            this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);

                            this.lastOpen = link;

                            opts[found].getElementsByTagName('a')[0].focus();

                   

                          //stop further event handling by the browser

                            return Spry.Widget.MenuBar.stopPropagation(e);

                  };

                  Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)

                  {

                            var link = listitem.getElementsByTagName('a')[0];

                            var submenus = listitem.getElementsByTagName('ul');

                            var menu = (submenus.length > 0 ? submenus[0] : null);

                            var hasSubMenu = (menu) ? true : false;

                            if (this.enableKeyboardNavigation)

                                      this.clearSelection(listitem);

                   

                   

                            if(this.bubbledTextEvent())

                            {

                                      // ignore bubbled text events

                                      return;

                            }

                   

                   

                            if (listitem.closetime)

                                      clearTimeout(listitem.closetime);

                   

                   

                            if(this.currMenu == listitem)

                            {

                                      this.currMenu = null;

                            }

                   

                   

                            // move the focus too

                            if (this.hasFocus)

                                      link.focus();

                   

                   

                            // show menu highlighting

                            this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);

                            this.lastOpen = link;

                            if(menu && !this.hasClassName(menu, this.subHoverClass))

                            {

                                      var self = this;

                                      listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);

                            }

                  };

                  Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)

                  {

                            var link = listitem.getElementsByTagName('a')[0];

                            var submenus = listitem.getElementsByTagName('ul');

                            var menu = (submenus.length > 0 ? submenus[0] : null);

                            var hasSubMenu = (menu) ? true : false;

                            if(this.bubbledTextEvent())

                            {

                                      // ignore bubbled text events

                                      return;

                            }

                   

                   

                            var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);

                            if(!listitem.contains(related))

                            {

                                      if (listitem.opentime)

                                                clearTimeout(listitem.opentime);

                                      this.currMenu = listitem;

                   

                   

                                      // remove menu highlighting

                                      this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);

                                      if(menu)

                                      {

                                                var self = this;

                                                listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);

                                      }

                                      if (this.hasFocus)

                                                link.blur();

                            }

                  };

                  Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)

                  {

                            var child = element[sibling];

                            while (child && child.nodeName.toLowerCase() !='li')

                                      child = child[sibling];

                   

                   

                            return child;

                  };

                  Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)

                  {

                            var found = 0;

                            var rect = Spry.Widget.MenuBar.getPosition;

                            var ref = rect(els[found]);

                   

                   

                            var hideSubmenu = false;

                            //make the subelement visible to compute the position

                            if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))

                            {

                                      els[1].style.visibility = 'hidden';

                                      this.showSubmenu(els[1]);

                                      hideSubmenu = true;

                            }

                   

                   

                            var isVert = this.hasClassName(this.element, this.verticalClass);

                            var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;

                   

                            for (var i = 1; i < els.length; i++){

                                      //when navigating on the y axis in vertical menus, ignore children and parents

                                      if(prop=='y' && isVert && (i==1 || i==2))

                                      {

                                                continue;

                                      }

                                      //when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents

                                      if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))

                                      {

                                                continue;

                                      }

                   

                                      if (els[i])

                                      {

                                                var tmp = rect(els[i]);

                                                if ( (dir * tmp[prop]) < (dir * ref[prop]))

                                                {

                                                          ref = tmp;

                                                          found = i;

                                                }

                                      }

                            }

                   

                            // hide back the submenu

                            if (els[1] && hideSubmenu){

                                      this.hideSubmenu(els[1]);

                                      els[1].style.visibility =  '';

                            }

                   

                   

                            return found;

                  };

                  Spry.Widget.MenuBar.camelize = function(str)

                  {

                            if (str.indexOf('-') == -1){

                                      return str;

                            }

                            var oStringList = str.split('-');

                            var isFirstEntry = true;

                            var camelizedString = '';

                   

                   

                            for(var i=0; i < oStringList.length; i++)

                            {

                                      if(oStringList[i].length>0)

                                      {

                                                if(isFirstEntry)

                                                {

                                                          camelizedString = oStringList[i];

                                                          isFirstEntry = false;

                                                }

                                                else

                                                {

                                                          var s = oStringList[i];

                                                          camelizedString += s.charAt(0).toUpperCase() + s.substring(1);

                                                }

                                      }

                            }

                   

                   

                            return camelizedString;

                  };

                   

                   

                  Spry.Widget.MenuBar.getStyleProp = function(element, prop)

                  {

                            var value;

                            try

                            {

                                      if (element.style)

                                                value = element.style[Spry.Widget.MenuBar.camelize(prop)];

                   

                   

                                      if (!value)

                                                if (document.defaultView && document.defaultView.getComputedStyle)

                                                {

                                                          var css = document.defaultView.getComputedStyle(element, null);

                                                          value = css ? css.getPropertyValue(prop) : null;

                                                }

                                                else if (element.currentStyle)

                                                {

                                                                    value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];

                                                }

                            }

                            catch (e) {}

                   

                   

                            return value == 'auto' ? null : value;

                  };

                  Spry.Widget.MenuBar.getIntProp = function(element, prop)

                  {

                            var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);

                            if (isNaN(a))

                                      return 0;

                            return a;

                  };

                   

                   

                  Spry.Widget.MenuBar.getPosition = function(el, doc)

                  {

                            doc = doc || document;

                            if (typeof(el) == 'string') {

                                      el = doc.getElementById(el);

                            }

                   

                   

                            if (!el) {

                                      return false;

                            }

                   

                   

                            if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {

                                      //element must be visible to have a box

                                      return false;

                            }

                   

                   

                            var ret = {x:0, y:0};

                            var parent = null;

                            var box;

                   

                   

                            if (el.getBoundingClientRect) { // IE

                                      box = el.getBoundingClientRect();

                                      var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;

                                      var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;

                                      ret.x = box.left + scrollLeft;

                                      ret.y = box.top + scrollTop;

                            } else if (doc.getBoxObjectFor) { // gecko

                                      box = doc.getBoxObjectFor(el);

                                      ret.x = box.x;

                                      ret.y = box.y;

                            } else { // safari/opera

                                      ret.x = el.offsetLeft;

                                      ret.y = el.offsetTop;

                                      parent = el.offsetParent;

                                      if (parent != el) {

                                                while (parent) {

                                                          ret.x += parent.offsetLeft;

                                                          ret.y += parent.offsetTop;

                                                          parent = parent.offsetParent;

                                                }

                                      }

                                      // opera & (safari absolute) incorrectly account for body offsetTop

                                      if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')

                                                ret.y -= doc.body.offsetTop;

                            }

                            if (el.parentNode)

                                                parent = el.parentNode;

                            else

                                      parent = null;

                            if (parent.nodeName){

                                      var cas = parent.nodeName.toUpperCase();

                                      while (parent && cas != 'BODY' && cas != 'HTML') {

                                                cas = parent.nodeName.toUpperCase();

                                                ret.x -= parent.scrollLeft;

                                                ret.y -= parent.scrollTop;

                                                if (parent.parentNode)

                                                          parent = parent.parentNode;

                                                else

                                                          parent = null;

                                      }

                            }

                            return ret;

                  };

                   

                   

                  Spry.Widget.MenuBar.stopPropagation = function(ev)

                  {

                            if (ev.stopPropagation)

                                      ev.stopPropagation();

                            else

                                      ev.cancelBubble = true;

                            if (ev.preventDefault)

                                      ev.preventDefault();

                            else

                                      ev.returnValue = false;

                  };

                   

                   

                  Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)

                  {

                            if (!optionsObj)

                                      return;

                            for (var optionName in optionsObj)

                            {

                                      if (ignoreUndefinedProps && optionsObj[optionName] == undefined)

                                                continue;

                                      obj[optionName] = optionsObj[optionName];

                            }

                  };

                   

                   

                  })(); // EndSpryComponent

                  • 6. Re: Issues with Chrome, IE, Safari
                    alexisonsmith3 Community Member

                    @charset "UTF-8";

                     

                     

                    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

                     

                     

                    /* 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;

                    }

                    /* 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-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;

                              text-align: center;

                              cursor: text;

                              width: 12.8em;

                              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: 12.8em;

                              position: absolute;

                              left: -1000em;

                    }

                    /* 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: 12.8em;

                    }

                    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */

                    ul.MenuBarHorizontal ul ul

                    {

                              position: absolute;

                              margin-top: 0%;

                              margin-right: 0;

                              margin-bottom: 0;

                              margin-left: 100%;

                    }

                    /* 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: 1px solid #CCC;

                    }

                    /* Menu items are a light gray block with padding and no text decoration */

                    ul.MenuBarHorizontal a

                    {

                              display: block;

                              cursor: pointer;

                              background-color: #EEE;

                              padding: 0.5em 0.75em;

                              color: #FFF;

                              text-decoration: none;

                              background: rgb(30,87,153); /* Old browsers */

                              background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 53%, rgba(125,185,232,1) 100%); /* FF3.6+ */

                              background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(53%,rgba(41,137,216,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */

                              background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 53%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */

                              background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 53%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */

                              background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 53%,rgba(125,185,232,1) 100%); /* IE10+ */

                              background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 53%,rgba(125,185,232,1) 100%); /* W3C */

                     

                     

                     

                     

                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

                              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                              font-weight: bolder;

                    }

                    /* 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: #09F;

                              color: #000;

                              font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                              font-weight: bold;

                    background: rgb(160,216,239); /* Old browsers */

                    background: -moz-linear-gradient(top, rgba(160,216,239,1) 0%, rgba(221,241,249,1) 23%, rgba(254,255,255,1) 87%); /* FF3.6+ */

                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(160,216,239,1)), color-stop(23%,rgba(221,241,249,1)), color-stop(87%,rgba(254,255,255,1))); /* Chrome,Safari4+ */

                    background: -webkit-linear-gradient(top, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* Chrome10+,Safari5.1+ */

                    background: -o-linear-gradient(top, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* Opera 11.10+ */

                    background: -ms-linear-gradient(top, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* IE10+ */

                    background: linear-gradient(to bottom, rgba(160,216,239,1) 0%,rgba(221,241,249,1) 23%,rgba(254,255,255,1) 87%); /* W3C */

                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=0 ); /* IE6-9 */

                    copy

                    }

                     

                     

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

                     

                     

                    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;

                              filter:alpha(opacity:0.1);

                    }

                    /* 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;

                              }

                    }

                    #MyRules {

                    }

                     

                    This is all I have...Will this help to work out what the problem is?

                     

                    Thanks

                     

                    Alex