Spry Menu going wrong in Internet Explorer

Hi all,
I'm new to these forums, and new to web design. I added a horizontal spry menu in for my dads art website, it worked fine in Firefox 3.6 and Google Chrome, but Internet Explorer 7 or 8, I'm not sure which version, a recent one anyway. The menu goes completely wrong, they stay the color they are supposed to be, but the buttons all shift around and I'm not too sure what to do about this.
www.studiovalentine.co.uk
If people could take a look and leave me some suggestions, that would be great cheers.

Add the following style rules, making sure that they are loaded after SpryMenuBarHorizontal.css as shown
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
ul.MenuBarHorizontal {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
ul.MenuBarHorizontal li
    width: 16.6%;
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    f\loat: left;
</style>
I hope this helps.
Ben
Sorry did not realise that it had already been answered
Message was edited by: Ben Pleysier

Similar Messages

Spry horizontal menu goes wrong in Internet Explorer

I have designed the start of a site and the client is pleased, except that for some reason the Spry menu goes bananas in Internet Explorer 8. I have checked it in Safari, Opera, Firefox and Chrome and it looks fine. Earlier in the design process I was having some issues with a gap at the end of the horizontal menu, but with persistance I managed to cure this. According to DreamWeaver there is an issue with line 70 of the CSS file :-
#footer {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    color: #FDCB00;
    background-color: #333;
    height: 30px;
    width: 900px;
    position: fixed;
    bottom: 0px;
    text-align: center;
    padding-top: 9px;
    letter-spacing: .3em;
    border-top-width: thin;
    border-top-style: ridge;
    border-top-color: #999;
....   but I can't see what is wrong with this. This relates to the footer which ironically behaves fine. I have just upgrade IE8 to IE9, but this hasn't helped.
I am fairly desperate to finish this site but can't until I find what is wrong. I've not seen this problem before and the DW diagnosis isn't helping me.
Here's a link http://www.tattoo-bristol.co.uk/
Any pointers would be much appreciated.
Thanks
Ralph
Vision Design

Have a look at the following piece of code in your modified CSS file
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);
    background-color: #000;
/* 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: none;
    background-color: #F00;
You have changed the latter two highlighted lines, which you must have done because you felt that you are an expert.
Sorry to disappoint, because the last highlighted line is where the problem lies. If you replace the f/loat value back to the original left, your problem will have disappeared.
Gramps

Spry Menu screwing up in Internet Explorer

My site works perfectly in Chrome and Safari, but in Internet Explorer, the spry menu goes behind a video I have on my home page when it drops down. Again, this doesn't happen with Chrome or Safari. Is this just an IE bug that people often have a problem with? Is it fixable? Here is my code:
Home Page HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Proud2BCatholic : Home</title>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link href="Proud2BCatholic_Final.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="home_header"> <img src="Images/P2BC Header.jpg" width="999" height="200" /></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="home.html" target="_self">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Catholic Faith</a>
    <ul>
      <li><a href="prayers.html" target="_self">Prayers</a></li>
      <li><a href="novenas.html" target="_self">Novenas</a></li>
      <li><a href="devotions.html" target="_self">Devotions</a></li>
      <li><a href="saints.html" target="_self">Saints</a></li>
      <li><a href="mary.html" target="_self">Mary</a></li>
      <li><a href="sacraments.html" target="_self">Sacraments</a></li>
    </ul>
</li>
<li><a href="videos.html" target="_self">Videos</a></li><li><a href="resources.html" target="_self">Resources</a></li>
    <li><a href="blogs.html" target="_self">Blogs</a></li>
    <li><a href="#" class="MenuBarItemSubmenu">College Tips</a>
      <ul>
        <li><a href="dosanddonts.html" target="_self">Do's and Don'ts</a></li>
        <li><a href="collegesuccess.html" target="_self">College Success</a></li>
        <li><a href="findingafit.html" target="_self">Finding a Fit</a></li>
<li><a href="whycollege.html" target="_self">Why College?</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Scholarships</a>
      <ul>
<li><a href="searchengines.html" target="_self">Search Engines</a></li>
<li><a href="outsidescholarships.html" target="_self">Outside Scholarships</a></li>
<li><a href="generalinformation.html" target="_self">General Information</a></li>
<li><a href="p2bcscholarship.html" target="_self">P2BC Scholarship</a></li>
      </ul>
    </li>
</ul>
<div id="home_body">
    <div id="home_news">
<h2>"Finding a good college is hard. For you, it's even harder. Why? Because you're Catholic! We here at Proud2BCatholic.com want to help you find the Catholic college of your dreams so that you can more easily continue your journey as a Catholic student!"
<br />
<br />
-The Proud2BCatholic Staff
</h2>
    </div>
    <div id="home_video">
    <iframe width="440" height="277" src="http://www.youtube.com/embed/q5UDRgLGteg" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div id="home_fblike">
    <div id="home_fblike_content">
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FProud2BCa tholic&width=292&colorscheme=light&show_faces=true&border_color&stream=true&header=tru e&height=235" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:235px;" allowTransparency="false"></iframe>
    <br />
    <iframe id="fr" src="http://www.youtube.com/subscribe_widget?p=P2BCVideo" style="overflow: hidden; height: 95px; width: 260px; border: 0;" scrolling="no" frameBorder="0" allowTransparency="true"></iframe>
    </div>
</div>
</div>
<div id="foot_contain">
    <div id="foot_content">
      <div align="center">FUS Admissions | 1235 University Blvd. | Steubenville, OH 43952 | <a href="mailto:[email protected]" title="email us!" target="_new">[email protected]</a> | ©2011 Proud2BCatholic</div>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Spry CSS:
@charset "UTF-8";
ul.MenuBarHorizontal
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          cursor: default;
          width: auto;
          padding-left: 115px;
ul.MenuBarActive
          z-index: 1000;
ul.MenuBarHorizontal li
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          position: relative;
          text-align: center;
          cursor: pointer;
          width: 110px;
          float: left;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
ul.MenuBarHorizontal ul
          margin: 0;
          padding: 0;
          list-style-type: none;
          font-size: 100%;
          z-index: 1020;
          cursor: default;
          width: 110px;
          position: absolute;
          left: -1000em;
          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
          left: auto;
ul.MenuBarHorizontal ul li
          width: 110px;
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: 0;
ul.MenuBarHorizontal a
          display: block;
          cursor: pointer;
          background-color: #FFFFFF;
          padding: 0
.em 0.75em;
          color: #1C4D00;
          text-decoration: none;
          padding-top: 5px;
          text-align: center;
          padding-bottom: 5px;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
          background-color: #FFFFFF;
          color: #A39E42;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
          background-color: #FFFFFF;
          color: #A39E42;
ul.MenuBarHorizontal a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarDown.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
          background-image: url(SpryMenuBarRight.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarDownHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
          background-image: url(SpryMenuBarRightHover.gif);
          background-repeat: no-repeat;
          background-position: 95% 50%;
ul.MenuBarHorizontal iframe
          position: absolute;
          z-index: 1010;
          filter:alpha(opacity:0.1);
@media screen, projection
          ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
          background: #FFF;

John is quite correct, I have answered in the Spry Forum though I did not realise that it was a YouTube video that you were talking about. Goes to show that showing your code goes a long way to supplying a solution.
For now, have a look at what Zabeth69 (where is she???) said about a year ago http://forums.adobe.com/message/2715476#2715476
Gramps

Spry menu bar transparency in Internet Explorer 8

Hello all, I've searched for this one but can't seem to find a solution that works. I'm using DW CS5 and I've included a spry menu bar and transparency on the site works great everywhere else except for the menu bar. I tried to use the hack to change the background to "transparent" but that did not work. Also, the site works fine in other browsers such as Firefox and Chrome but the spry menu bar is the only this that sticks out like a sore thumb in IE8. Please any help is appreciated and I thank you in advance.

This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #fff;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps

Spry menu positioning problem in Internet Explorer

Hi everyone,
My website is working fine in Firefox and Chrome, but my spry menu doesn't show up correctly in IE 8. When I view the site in IE, the spry menu shows up as a white rectangle and the submenus appear too high up on the page. If anyone could help me figure out how to fix this, that would be great.
I noticed that in Firefox/chrome, the positioning of the submenus starts counting from the top of the spry menu (40px down), but in IE it seems to start counting from the top of the page?
Here's a link to my website: http://www.student.kuleuven.be/~s0183195/index.html
I'm using the latest version of spry.
Thanks for your time,
Tine

That's much better, thank you!
However, the submenus still appear too far to the right side. When I do a local preview in IE via Dreamweaver everything looks fine, but when I upload my files and view the site online the submenus appear under the word next to the selected word.
Thanks!
Edit: I just noticed that if I turn off the compatibility view in IE, the submenus appear as they should. Is there a way to make them appear correctly with the compatibility view turned on as well?

Firefox 4 takes a long time to startup at this point i am thinking about going back to internet explorer as my default browser. what is going on??

firefox 4 takes a long time to startup at this point i am thinking about going back to internet explorer as my default browser. what is going on??

Click the Firefox button, go to Add-ons, then Plugins and disable "'''My Web Search'''". This is adware which runs in the background and spends its time trawling the web searching for ads to feed you.
Also, something shows in your system details with the number '''2,5,3,1 '''. Can you tell me what that is please? It's located in the same Plugins menu.
Similarly, I see three versions of Veetle. Disable the older ones if you don't need them.
On the security side, your Flash player is out of date and exposes your system to exploits. See: http://www.adobe.com/support/security/bulletins/apsb11-12.html (Update link near the foot of the page).
If the problem persists, try running Firefox in [[Safe Mode]]. If it functions properly in that configuration, then one of your add-ons is the culprit.

Spry Drop Down Problem in Internet Explorer

I have built my spry drop down and it is working in all browsers except for IE. I really need help with this. Attached is my code or you can view it at roemtech.com/menubarattempt.html. It is rendering it vertically and stacking the buttons on top of each other. Check it out in Internet explorer to see what I mean. Thanks so much for the help.
JBelsher
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Template Model</title>
<link href="webelements.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">
.BulletAlignment { text-align: left;
</style>
</head>
<body>
<div class="container">
<div class="header">
    <div align="right" class="FirstNameText"><strong><em>The First Name in Classroom Audio Systems</em></strong></div>
    <div style="background-color:#000; width:1024px; float: left;">
      <div>
<ul id="DropDown" class="MenuBarHorizontal">
                    <li><a href="index.html">Home</a></li>
          <li><a href="Classroom-Audio-Systems.html" class="MenuBarItemSubmenu">Products</a>
            <ul>
              <li><a href="classroom-audio-amplifiers.html">Amplifiers</a></li>
              <li><a href="classroom-audio-speakers.html">Speakers</a></li>
              <li><a href="classroom-audio-accessories.html">Accessories</a></li>
            </ul>
          </li>
          <li><a href="classroom-audio-specs.html">Specs</a> </li>
          <li><a href="classroom-audio-tips.html">Tech Tips</a></li>
          <li><a href="classroom-audio-contacts.html">Contacts</a></li>
        </ul>
      </div>
    </div>
    <div style="height:30px;"></div>
</div>

</div>

<div class="footer"><span style="padding-top:10px; font-size: 12px;">© 2010 Roemtech LLC, All Rights Reserved 1491 N. Kealy Ave. Suite 8, Lewisville, Texas 75057</span></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("DropDown", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

It needs to be versions 6 and higher of Internet Explorer. I will attach my CSS below. Just note all of the notes are still in there from dreamweaver. Thanks for looking at this.
James
@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: 120%;
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: left;
cursor: pointer;
width: 120px;
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%;
cursor: default;
width: 8.5em;
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: 8.5em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #000;
padding: 0.5em 0.75em;
color: #09F;
text-decoration: none;
text-align: center;
/* 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: #000;
color: #09F;
font-size: 100%;
text-align: center;
/* 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: #333;
color: #09F;
text-align: center;
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(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(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(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(SpryMenuBarRightHover.gif);
background-repeat: repeat-x;
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;
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: none;
background: #FFF;

Spry Menu bar wrongly displayed in IE

Hi,
on my website i integrated a Spry Menu bar with one Submenu, which really works fine in Firefox. The boxes have a defined width of 124 px.
My problem is, if you view this site with IE, the drop down menus don´t work and you are asked to activate activeX or scripts. If you do so the whole menu is displayed white unless you roll over the buttons, you can see what actually should be there. Another bug is that the submenus, are oriented horizontally instead of vertically.
Can anyone help me with this nice IE problem?
Thanks a lot !
Here my CSS-Code:                      and my website:http://www.grassnet.info/transfer.html
@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;
    font-weight: normal;
/* 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: 90%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 125px;
    float: left;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    background-color: #078601;
    border: thin solid #333;
    color: #FFF;
/* 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;
    position: absolute;
    left: -1000em;
    font-weight: normal;
    visibility: visible;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    color: #FFF;
/* 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: 124px;
    text-align: left;
    font-weight: normal;
    background-color: #80c35d;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: dashed;
    border-right-style: solid;
    border-bottom-style: dashed;
    border-left-style: solid;
    border-top-color: #078601;
    border-right-color: #078601;
    border-bottom-color: #078601;
    border-left-color: #078601;
    font-family: Calibri, Arial, Helvetica, sans-serif,;
    list-style-type: none;
    list-style-position: inside;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    text-decoration: none;
    text-transform: none;
    color: #FFF;
/* 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: #A5FC76;
    color: #FFF;
/* 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: #A5FC76;
    color: #000;
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(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(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(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(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;
    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;

Hi Ben,
thanks a lot for your great help. I integrated your recommendations in my sprymenubarhorizontal.css file and uploaded it.
When i preview the site in the browser (Dreamweaver -> Preview in Iexplorer) it all looks like it should.
However when i uploaded the new css file, the change is not visible. It´s still the old mistake.
What am i doing wrong? What i also wonder about is, that the css file has a size of 6.554 Bytes. When i upload it, it only has 6.353 bytes.
Can this be correct? Also the SpryMenuBar.js files are different in size.
Do you have any idae what the problem here is?
Thanks again !
Add: I just recognized that also my html. files are different in size. So i guess this is normal. But where is the mistake hiding? I´courious
Or could you pleas check again from your pc in iexplore? Thanks

Webbrowser tool - wrong version internet explorer in windows8.1

I am using visual studio express 2012 for desktop in windows 8.1 and in a windows form I am using a web browser tool. When my project runs it only uses Windows Internet Explorer version 7 even though my system has IE version 11. Why does this happen? What
can I do to make vb.net use IE version 11?

Hello Jeromie,
Thank you for the follow up. I was aware that Flash Player is included with Windows 8.1. This makes it even more frustrating because it is included and yet doesn't now work. I have not attempted to install it but I did download the latest version. I am frustrated because there is no way to speak with anyone directly at Adobe as to whether there is a fix but I do appreciate your expertise and advice. I have done the system checker with no improvement. I have also updated Java Script on the chance that would help but that does not seem to be the issue.
There is something blocking the enabling of Flash Player between Internet Explorer and Adobe Flash Player. Flash Player is enabled through Manage Add-ons but when the status is checked on Adobe it shows it disabled. I was considering resetting Internet Explorer to default settings to see if that would help since all this happened after my computer service. But that reset would permanently change any and all other settings I have done.
I am going to try and find an expert tech who may be able to get this resolved. I am still hopeful that you or someone else reading this post may be able to offer a solution. If not, I will have to learn to live with it until Microsoft decides to correct the issue.
Thank you!
Ramon

Version 3.6.17 Horizontal drop down menu is displaying as vertical text list. Page style set to basic. Menu works fine in Internet Explorer. Any hints?

Newly installed horizontal drop down menu works in IE. In Firefox, it displays as a vertical text list. Any hints?

Clear the cache and the cookies from sites that cause problems.
"Clear the Cache":
* Tools > Options > Advanced > Network > Offline Storage (Cache): "Clear Now"
"Remove the Cookies" from sites causing problems:
* Tools > Options > Privacy > Cookies: "Show Cookies"
Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
* Don't make any changes on the Safe mode start window.
* https://support.mozilla.com/kb/Safe+Mode
* https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes

How do I make Bookmarks like the easy pull down menu of Favorites in internet explorer?

Although I don't like much else, I liked the favorites menu from IE. A favorites symbol appeared on one of the menu bars at the top of the screen and I could open it and select my destination with one click.
My favorites from IE appear when I open bookmarks here but it is very cumbersome. There must be a way to customize this but I haven't been able to find it. I appreciate any help you can offer.

Is there no Bookmarks menu available in the Bookmarks toolbar? If you prefer the regular menu bar, you should be able to get that back by pressing the Alt key, then using View > Toolbars then check Menu Bar.

Vertical Spry Menu going nuts in IE6

Sorry for boring you with another IE tweaking issue (damn
MS).
I'm not sure if I tweaked this menu into taking on it's own
crazy behavior in IE 6 (works fine in other browsers).
It's suppose to sit nicely and quietly on the upper right
side, but in IE 6 it jumps out to the middle, leaves the background
behind and behaves very badly. When I hover my mouse over it, the
menu bars vanishes for a moment too. For a better understanding of
these unacceptable behaviors please go to: (see link below)
(the page is still under construction).
Any help will be appreciated greatly!
Tom
website

Hello Tom,
The Accordion, because of the animation and other reasons was
designed to start running after the page load finished. Therefore
we attach a listener to the body onload event and when the page
finished to load and the CSS's to apply we start enhance the
element in page.
In this situation the accordion doesn't work because the page
never notify us to finish loading. The element remains open and the
Accordion disabled.
I studied a little bit your page to determine the reasons
that doesn't permit the IE 6 to throw the correct events. Apart the
fact your page resources are huge and will take a long time to load
(5Mb) seems that you used in your design lots of PNG files. From my
experience this is not a good practice because the IE doesn't have
in any version a good support for this type of files, specially on
IE 6.
I see that you use a 'hack' to load the PNG's on IE 6 even if
they are not supported that apply some native Windows filters. This
step seems to be the origin of your problem but you'll have to
study further and determine if the CSS filters you apply or reading
the PNG's properties to generate the CSS are blocking the page to
finish loading.
Cristian

How can I go back to previous version of firefox cause 4 sucks and I am going to have to go back to internet explorer?

This version is horrible, and I want to downgrade back to previous version if I can't then I am going back to internet explorer, the search engine is an aberration...just trying to perform a search for hotmail sign in page and had to click on have a dozen responses before I find the one I want where before was right there at the top. If I cannot go back to a previous version, just tell me so I can start using internet explorer, it is horrible as well but at least search engine was not as frustrating to use!!!!

To downgrade to Firefox 3.6 first uninstall Firefox 4, but do not select the option to "Remove my Firefox personal data". If you select that option it will delete your bookmarks, passwords and other user data.
You can then install the latest version of Firefox 3.6 available from http://www.mozilla.com/en-US/firefox/all-older.html - it will automatically use your current bookmarks, passwords etc.
To avoid possible problems with downgrading, I recommend going to your profile folder and deleting the following files if they exist - extensions.cache, extensions.rdf, extensions.ini, extensions.sqlite and localstore.rdf. Deleting these files will force Firefox to rebuild the list of installed extensions, checking their compatibility, and reset toolbar customizations.
For details of how to find your profile folder see https://support.mozilla.com/kb/Profiles

Internet explorer is required to access some of my financial accounts; what are the risks? I am running Mac OS X 10.7.2 on a Mac Pro

Internet explorer is required to access some of my financial accounts; what are the risks? I am running Mac OS X 10.7.2 on a Mac Pro
Message was edited by: 74683msn

Advisable is irrelevant... It is not possible. There has not been a version of IE for Mac for a long time. You will have to load Windows on your Mac in order to run IE, or try making your browser mimic IE. (In Safari, go to Safari -> Preferences, click the Advanced tab and check the box to show the Develop menu. Then, in that menu, choose User Agent -> Internet Explorer x.0.) Note that doing that will not work if the site relies on some weird non-standard feature of IE that no other browser on the planet has.

In help, it said, for internet explorer users how to remove it

when i some news in yahoo firefox said error and said start a new season.
and still can't open it.
in menu bar help, for internet explorer users how to remove it. thanks.

See:
* http://kb.mozillazine.org/Firefox_crashes
* [[Firefox crashes]]
* http://kb.mozillazine.org/Browser_will_not_start_up

Spry Menu going wrong in Internet Explorer

Similar Messages

Maybe you are looking for