Messed up menu bar-

I have certainly seen this weird menu bar before, I do remember that I found a simple fix for it. That was some years ago, but now I this same weird menu bar occurred with a client who's asking for a fix, I just cannot remember what I have possibly done to fix this weird menu bar earlier.
My client is using Mac with Arabic language enabled, and Arabic fonts, I feel one of these could have triggered this problem.
See the image attached please.

As suspected it was a language matter.
I tested dragging English language to the top of Languages list rather than Arabic in the International Preferences pane on my machine earlier, I didn't have this weird menus on my machine because I have Adobe Illustrator Middle Eastern version.
I asked our client to do the same in the Mac OSX Preferences, their Illustrator (International English version) displays menus correctly now.

Similar Messages

  • PS CS5 messes up menu bar; dialog boxes distort during drag; etc

    I'm having weird problems with Photoshop CS5.  I'd love help, or even tips for how to frame the question when searching for help.
    Here are the symptoms:
    - After starting PS, if I open any dialog box and then close it, after closing the PS menu bar is corrupted -- it looks like a single row of pixels is missing through the File, Edit, Image, etc words, and at the right end of the menu bar, the three control icons are overlain with Windows control icons.  Both these problems can be seen in the screen capture image below.
    - When a dialog box is open, if I drag it around, it gets clipped as repainting tries to keep up with the mouse.  It's always rectangular, but edges flicker off to varying depths as it repaints to move.  When the mouse stops, the repaint works and it looks fine.  While moving, the faster the movement, the worse the effect.
    - When using tools such as Lasso select, the movement feedback (the selection gray line) lags a few millimeters or more, depending on speed.
    To me it looks like an application + video driver problem, but all s/w is up to date.  Messing with OpenGL setting (Edit->Preferences) doesn't affect things; it acts the same with OpenGL on or off, basic, normal, or advanced.  My video card is displayed correctly in the Edit->Preference: Performance box.
    The first problem (menu bar corruption) is obviously least interfering and I believe has been with me longest.  The latter two problems make PS somewhat difficult to use, and I believe showed up in the last few months (since the last time I used PS intensively, about 8 months ago).  I can't recall for sure, but I think I installed updates to both PS and ATI drivers in the last 8 months (ie., so both could be suspects).
    Any ideas what is wrong, or what to search for?  What would be a good search query for this sort of problem set?
    Does this seem to be an Adobe problem, or ATI, or who?
    Here's my set-up:
    - Dell Inspiron 580 with 6 GB RAM
    - ATI Radeon HD 5450
    - Windows 7 64-bit
    - PS CS5 standard edition
    Thanks for help and/or ideas!

    I don't know about pre-packaged themes, but what I do is along these lines:
    Minimize Chrome on the Desktop
    If you have a sharp monitor, good eyes, and don't like that Microsoft has made all the useless chrome and border space around everything larger in the later versions of Windows, you'll likely want to minimize it to make more room to do real work...
    ·    Right-click on Desktop - Personalize, ensure the Windows 7 Aero theme is selected
    ·    Choose Window Color – Advanced appearance settings...
    ·    Active Title Bar item to size 17.
    ·    Menu item to Size 15, font Segoe UI size 8.
    ·    Border Padding item to size 0.
    ·    Scroll Bar item to size 16.
    ·    Caption Buttons item to size 16.
    ·    Icon Spacing (Horizontal) item to size 27.
    ·    Icon Spacing (Vertical) item to size 41.
    You can experiment with these settings to find a balance you like.
    Hope this helps!
    -Noel

  • IE messing up my menu bar?

    I have a horizontal Spry menu bar which works beautifully in opera, safari, firefox, google chrome... but in internet explorer, it just won't work. The drop down part of the menu is appearing right at the side of the page, miles away from its parent. Can't post the CSS and HTML because am doing the website for someone else, but does anyone have any idea why IE does this? I've checked and double checked all the javascript, CSS, HTML... but to no avail. Besides, that doesn't make sense, as if I'd made I mistake, surely it would show up in other browsers?
    urgh, I have never hated internet explorer so much as I do today...

    flozzle19262010 wrote:
    I have a horizontal Spry menu bar which works beautifully in opera, safari, firefox, google chrome... but in internet explorer, it just won't work.
    The original Spry files, that is those that have not been touched by budding web developers, work extremely well in all browsers!
    flozzle19262010 wrote:
    The drop down part of the menu is appearing right at the side of the page, miles away from its parent. Can't post the CSS and HTML because am doing the website for someone else, but does anyone have any idea why IE does this?
    Without seeing any code, I am safe in saying that your problem is caused by your messing around of the CSS file.
    flozzle19262010 wrote:
    I've checked and double checked all the javascript, CSS, HTML... but to no avail. Besides, that doesn't make sense, as if I'd made I mistake, surely it would show up in other browsers?
    If you haven't made a mistake, then I believe that we cannot help you, even if we are privy to the code.
    flozzle19262010 wrote:
    urgh, I have never hated internet explorer so much as I do today...
    Because IE is used by more than 85% of all available browsers, I think you will have to learn to un-hate IE.
    I hope this helps.
    Ben

  • Firefox has spontaneously decided not to show the task bar at the bottom of the screen, and some menu bars have been messed up. How can I fix this?

    My Firefox has spontaneously (apparently) decided not to show the task bar at the bottom of the screen (the margin is there, but it is blank), and some menu bars have been messed up. Perhaps the most annoying aspect of these changes is the fact that I have to use alt-tab to move from a Firefox session to another session.
    I can find no way to fix these problems. Can you help? Am I going to have to uninstall and re-install Firefox in order to get back to the default settings? If so, is there any way to preserve my bookmarks?

    Make sure that you do not run Firefox in full screen mode (press F11 or Fn + F11 to toggle; Mac: command+Shift+F).<br />
    If you are in full screen mode then hover the mouse to the top to make the Navigation Toolbar and Tab bar appear.<br />
    You can click the Maximize button at the top right to leave full screen mode or right click empty space on a toolbar and use "Exit Full Screen Mode" or press F11.
    *https://support.mozilla.org/kb/how-to-use-full-screen
    See also:
    *http://kb.mozillazine.org/Corrupt_localstore.rdf
    *https://support.mozilla.org/kb/Toolbar+keeps+resetting

  • Illustrator bug- menu bar all messed up, and it keeps crashing

    I have the weirdest bug on my trial version- the menu bar on top appears with $$$ signs and all messed up, and crashes constantly. I tried to delete and reinstall illustrator (I downloaded a trial version of the basic creative suite with Illustrator, Photoshop and InDesign, but had the bug only on Illustrator. I even reinstalled Leopard (and in the first installation it was a brand new iMac), which also did not help, so I have no idea what to do. Has anyone else had the problem or knows what to do?
    Thanks!
    Dotan

    i had continual illustrator cs4 freezes in relation to the menus and some file types as well. (win 7 prof 64 bit)
    But I found it it worked in a newly created user profile fine.
    After having shelled out 3500.- eur for the masters colletion, I was rather dissapointed to find that i have to dig into my pocket for support when the software breaks. The solution is pretty simple assumabley known and could have been answered in two lines of text instead of the useless prefab answers i got.
    But first I have to join the general gripe about the stability of illustrator and flash in paticular. It is obvious that each product is created by different teams who do not share common standards. Inexplicable.
    Quark never cared about their customers while they were market leader either, remember that, Adobe?
    Their frustration became your success. It might pay to remember that part of your history.
    I solved the problem by replacing the entire settings folder with the one from the functional profile
    C:\Users\user-name\AppData\Roaming\Adobe\Adobe Illustrator CS4 Settings
    save any custom color sets, etc first.
    three days of hair pulling for a 12 second solution.
    Thanks, Adobe!
    My motivation to pay another 1200.- for an upgrade is somehow shrinking very, very quickly.

  • Horiz Menu Bar (in a template) Messed up on PHP page; Only in IE Browser

    I have redesigned a fairly large website for someone (I'm using DW CS3) and I developed a template which includes a Spry Horizontal Menu Bar. The menu bar was working fine on all of the HTML pages. As I come to the end of my project, I have created a PHP page (using my template with the horizontal menu bar) because I have included a PHP script for an Events Calendar (ComDevWeb).  Ever since I added the includes for the calendar, the horizontal menu bar gets messed up when viewing the page with IE. The menu bar looks fine on all of the other html pages. The menu bar on the PHP page also looks fine when I view it with Safari or Mozilla. Since the menu bar is in the template (that will affect every other page that is working just fine), I'm not sure how to proceed with my troubleshooting.
    Here is the website: www.ourtruecolors.org/newsite
    Here is the PHP page with the calendar (where the horiz menu bar appears messed up in IE, but looks fine in Safari & Mozilla browsers): http://www.ourtruecolors.org/calendar/index.php
    Any help or suggestions would be greatly appreciated.

    I have redesigned a fairly large website for someone (I'm using DW CS3) and I developed a template which includes a Spry Horizontal Menu Bar. The menu bar was working fine on all of the HTML pages. As I come to the end of my project, I have created a PHP page (using my template with the horizontal menu bar) because I have included a PHP script for an Events Calendar (ComDevWeb).  Ever since I added the includes for the calendar, the horizontal menu bar gets messed up when viewing the page with IE. The menu bar looks fine on all of the other html pages. The menu bar on the PHP page also looks fine when I view it with Safari or Mozilla. Since the menu bar is in the template (that will affect every other page that is working just fine), I'm not sure how to proceed with my troubleshooting.
    Here is the website: www.ourtruecolors.org/newsite
    Here is the PHP page with the calendar (where the horiz menu bar appears messed up in IE, but looks fine in Safari & Mozilla browsers): http://www.ourtruecolors.org/calendar/index.php
    Any help or suggestions would be greatly appreciated.

  • I messed up and I need your help please (menu bar)

    OK I messed up. I installed one of these utilities to see it I would like the opaque menu bar better than the transparent since so many are fussy about the transparency. Well I find I liked the transparent bar. Now I do not know how to restore it. I thought the utility "opaque menu bar" would have a way to uninstall but it does not and the developer is not replying so any help would be appreciated. Thank you in advance.
    Mireille

    1. Start up Terminal by using Spotlight or starting it from Applications -> Utilities
    2. Type: killall OpaqueMenuBar (case sensitive spelling)
    Nothing should come up as a result. If it says "no processes belong to you were found" check the spelling or skip to the next step
    3. Go to your applications folder (commandshiftA in Finder) and drag the OpaqueMenuBar app to the trash
    4. Go into the System Preferences -> Desktop, change the wallpaper to something else and then back again.
    Uninstallation should be complete.

  • Spry horizontal menu bar messing up in IE

    I'm using Dream Weaver CS4 and I have a horizontal spry menu bar at the top of my page and it shows up and functions properly in every browser except for IE. (tested in IE7). After the accepting the Active X warning, the menu shows up as a vertical style menu and the colors are not right. The Sub-menus are also showing up in a vertical fashion. Please help!

    My Code:
    ( I tried mssing with the Brower hacks, however nothing I tried worked.)
    @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 auto;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 41em;
    /* 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: pointer;
    width: 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: larger;
    z-index: 1020;
    cursor: default;
    width: auto;
    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.2em;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 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: #F3B5B6;
    padding: 0.5em 0.75em;
    color: #000;
    text-decoration: blink;
    /* 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: #9F2000;
    color: #000;
    /* 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: #9F2000;
    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: none;
    background: #FFF;
    #History {
    text-align: center;

  • Messed up color menu bar

    Hello everybody,
    Yesterday I was googling because I had a problem with time machine displaying wrong dates on my old backups, I found this command to copy/paste on terminal which I did.
    rm ~/library/preferences/.Global* ~/library/preferences/byhost/.Global*
    That command fixed my problem with time machine but created another one, that is that my menu bar is color blue (before it used to be graphite) and after trying everything I could think of nothing seems to make it back to graphite.
    Those anyone can help me with this.
    Thanks in advance.

    Mental note,
    That command reset all my preferences. The thing that was causing the menu bar to be blue was that I had "Translucent menu bar" checked on System Preferences>Desktop & Screen Saver.
    In case anyone else ran into this to save him/her some time.

  • Youtube menu bar is messed up, why?

    Excuse the awful title (I'm bad when it comes to titles).
    I got a 3GS one week ago and things have been fantastic with it. Two days ago, I updated to 3.0.1 to patch this SMS vulnerability and when I launched the youtube app I found the the menu bar across the bottom (where there is featured, subscriptions, playlists etc) had shrunk and one of the icons had just, disappeared. I thought nothing of it at first but then, yesterday I launched the app and found another icon had disappeared, now I knew something was wrong. Where as normally there would be 5 icons (or is it 4) along the bottom of the youtube apps, there is now only 3. Two which I can re arrange and then the more icon. I restored the iPhone in iTunes and the icons are still missing. Is anyone else having these problem or does any one know a fix? I've done a google and can't find anything.
    Here is a picture of the problem (flickr) http://www.flickr.com/photos/35581816@N03/sets/72157621799448099/
    help is greatly appreciated.

    I feel like such a stupid person,
    I just reset the settings on my iPhone from the settings menu (not restored or deleted anything) and the youtube app is back to normal. I'm so sorry if I wasted anyones time. I feel so stupid. However I'm still curious as to why this happened.

  • I can no longer get my address bar, back or foward buttons, tool bar, menu bar or anything else. How can I restore?

    When I open Firefox I do not get an address bar only Google comes up. I don't get a back or forward button nor do I get the tool bar or menu bar. There is no default button. I read the forum but I can not make any corrections because I don't have a tool bar displayed. I am using 3.6. When I turn off my computer and then turn it back on, the default settings still do not return.

    It is a long while since I tried Google Toolbar, I am not sure what it changes. But I would not expect it to totally remove your options to use the ordinary toolbars.
    ■ Try
    * press the''' alt '''key on the keyboard, that may return the menu bar
    * once you have the menubar '''View -> Toolbars ->''' and select which you need
    * you may also use View-> Toolbars -> Customise and drag items back or use the restore default set option.
    * right clicking on the toolbars also gets you to the customise and show toolbars options
    ■ have a look at [[Back and forward or other toolbar items are missing]]
    PS
    I hope you do not need to resort to editing registry settings, the firefox 'dragons' in prefs are user friendly compared with Windows registry. Messing up firefox prefs only really affects firefox normally; whereas errors in a registry edit may prevent you from even booting the computer.

  • How do I get rid of the menu bar icon on Mac OS?

    The Creative Cloud menu bar icon on Mac OS is pretty much useless since I already have icons for all the apps and don't use Adobe Cloud storage. Anyone know how to get it off my menu bar? The menu bar is MY space. I ought to have control over what goes there. If every application starts dumping stuff there it will quickly become a mess. I want the option to turn this off.
    Thanks!

    Most videos play "inline", not full screen, on Safari on iPad.  You can use a quick "reverse pinch" gesture (as if you were zooming in, but more of a quick flick than a slow zoom) on top of the video to make it full screen.

  • I was working on my spry menu bar and now my sidebar1 photo moves with the menu bar?

    I was working on my spry menu bar, and getting really far with it thanks to GRAMPS, and all of a sudden I wanted to put padding of 30px top and 30 px bottom on the sidebar1 photo in the container and now all of a sudden the home.jpg photo in the sidebar moves when you hover over the menu bar. 
    I can noit for the life of me figure out what changed and somehow was so excited about my spry menu bar working that I did not save the most recent working page.    Can anybody look at this with me and let me know what changed to mess the page up on me.
    Thanks a million.
    Ted
    site is located here http://www.subzerorefrigeration.com 
    None of the links are working I have just been playing with the spy menu for weeks.  I finally figured it out and do not belive the error is in the spry style sheets. 
    Here is the code for my page.  I know I am working with a template.  I really do not want to start over if a <div> tag is missing.
    Any other suggestions would be appreciated.
    <!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>Sub Zero Refrigeration Heating and Air Conditioning in Midlothian Illinois</title>
    <style type="text/css">
    <!--
    body {
        margin: 0;
        padding: 20;
        color: #000;
        background-color: #b7e3ea;
        font-family: Tahoma, Geneva, sans-serif;
        font-size: 100%;
        line-height: 1.4;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
        color: #000099;
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color: #42413C;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #6E6C64;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
        color: #000099;
    /* ~~this fixed width container surrounds the other divs~~ */
    .container {
        width: 960px;
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        background-color: #b7e3ea;
        padding: 0px;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 180px;
        padding-bottom: 10px;
        background-color: #FFFFFF;
        padding-top: 30px;
    .content {
        padding: 10px 0;
        width: 780px;
        float: left;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this removes the list marker */
        border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
        margin-bottom: 15px; /* this creates the space between the navigation on the content below */
    ul.nav li {
        border-bottom: 1px solid #666; /* this creates the button separation */
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        padding: 5px 5px 5px 15px;
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        width: 160px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
        text-decoration: none;
        background: #C6D580;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        background: #ADB96E;
        color: #FFF;
    /* ~~ The footer ~~ */
    .footer {
        padding: 0px;
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        background-color: #B7E3EA;
        color: #000099;
        width: 960px;
    verybottomfooter {
        padding: 10px;
    .footerlightblue {
        background-color: #B7E3EA;
    .container .footer table tr th {
        background-color: #FFF;
        color: #000099;
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .container .footer2 #footer3 .footer p {
        text-align: center;
    .container .footer2 #footer3 .footer p {
        font-size: medium;
    .container .footer2 #footer3 .footer p {
        font-size: small;
        background-color: #B7E3EA;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header -->   
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="125" height="190" align="left" id="FlashID" title="Sub Zero Refrigeration &quot;Subby&quot; Logo">
          <param name="movie" value="Images/SubbyMovie.swf" />
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="7.0.70.0" />
          <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
          <!--[if !IE]>-->
          <object data="Images/SubbyMovie.swf" type="application/x-shockwave-flash" width="125" height="190" align="left">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="7.0.70.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
              <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
              <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
        </object>
        <img src="Images/HeaderOriginal.jpg" alt="Sub Zero Refrigeration Heating and Air Condtioning Header Photo" width="834" height="190" align="left" /><br />
      </div>
      <div class="container" id="navbar"> </div>
    <div class="namephoto">
    <ul id="MenuBar" class="MenuBarHorizontal">
       <li><a class="MenuBarItem" href="#">Home</a></li>
       <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
         <ul>
           <li><a href="#" class="MenuBarItemSubmenu">Our Staff</a>
             <ul>
               <li><a href="#">Bud Wagner</a></li>
               <li><a href="#">Tim Wagner</a></li>
               <li><a href="#">Dave Allen</a></li>
               <li><a href="#">Terry Burke</a></li>
               <li><a href="#">Larry Skarr</a></li>
               <li><a href="#">Niko Opla</a></li>
               <li><a href="#">Gina Ames</a></li>
               <li><a href="#">Laura Kane</a></li>
             </ul>
           </li>
           <li><a href="#">Our Service Area</a></li>
           <li><a href="#">Our Mission Statement</a></li>
           <li><a href="#" class="MenuBarItemSubmenu">Why Choose Sub Zero Refrigeration?</a>
             <ul>
               <li><a href="#">Our Review's</a></li>
               <li><a href="#">Our Competition's Reviews</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Careers</a>
             <ul>
    <li><a href="#">HVAC Technician</a></li>
    <li><a href="#">HVAC/R Installer</a></li>
    <li><a href="#">Commercial Refrigeration Technician</a></li>
             </ul>
           </li>
           <li><a href="#">Testimonials</a></li>
           <li><a href="#" class="MenuBarItemSubmenu">Easily Leave Us a Review</a>
             <ul>
               <li><a href="#">On &quot;YAHOO&quot;</a></li>
               <li><a href="#">On &quot;YELP&quot;</a></li>
               <li><a href="#">On &quot;MERCHANT CIRCLE&quot;</a></li>
               <li><a href="#">On &quot;GOOGLE PLACES&quot;</a></li>
             </ul>
           </li>
    </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Repair</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning </a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace</a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
    <li><a href="#">Schedule A Service Call</a></li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Sales</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning</a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace </a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
    <li><a href="#">Financing</a></li>
           <li><a href="#">Schedule a &quot;FREE&quot; Computerized ACCA MJ8 Equipment Replacement Estimate </a></li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Maintenance</a>
         <ul>
    <li><a href="#">Commercial Refrigeration Service Agreements</a></li>
    <li><a href="#">Commercial Rooftop Service Agreements</a></li>
    <li><a href="#">Commercial Ice Machine Service Agreements</a></li>
    <li><a href="#">Residential Air Conditioning Service Agreements</a></li>
    <li><a href="#">Residential Boiler Service Agreements</a></li>
    <li><a href="#">Residential Furnace and IAQ Service Agreements</a></li>
    <li><a href="#">Heat Pump Service Agreements</a></li>
    </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Products</a>
         <ul>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Refrigeration</a>
             <ul>
               <li><a href="#">Beverage Air</a></li>
               <li><a href="#">Beacon Smart Controller</a></li>
               <li><a href="#">Continental</a></li>
               <li><a href="#">Crown Tonka Walk Ins</a></li>
               <li><a href="#">Delfield</a></li>
               <li><a href="#">Heatcraft Refrigeration</a></li>
               <li><a href="#">Hoshizaki Refrigeration</a></li>
    <li><a href="#">International Cold Storage</a></li>
    <li><a href="#">Kelvinator</a></li>
    <li><a href="#">Kolpak</a></li>
    <li><a href="#">Larkin Refrigeration</a></li>
    <li><a href="#">Perlik Bar and Beverage Equipment</a></li>
    <li><a href="#">True Refrigeration</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Rooftop</a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Commercial Ice Machine</a>
             <ul>
               <li><a href="#">Hoshizaki Ice Machines</a></li>
               <li><a href="#">Manitowoc Ice Machines</a></li>
               <li><a href="#">Scotsman Ice Machines</a></li>
             </ul>
           </li>
           <li><a href="#" class="MenuBarItemSubmenu">Air Conditioning</a>
             <ul>
               <li><a href="html/subzero/arcoaireaircondioning.html">Arcoaire</a></li>
               <li><a href="html/subzero/americanstandardairconditioning.html">American Standard</a></li>
               <li><a href="html/subzero/mitsubishiairconditioners.html">Mitsubishi</a></li>
             </ul>
         </li>
           <li><a href="#" class="MenuBarItemSubmenu">Boiler </a>
             <ul>
               <li><a href="#">Weil McLain Residential</a></li>
               <li><a href="#">Weil McLain Commercial</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Furnace </a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
               <li><a href="#">Mitsubishi</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Heat Pump </a>
             <ul>
               <li><a href="#">Arcoaire</a></li>
               <li><a href="#">American Standard</a></li>
               <li><a href="#">Mitsubishi</a></li>
             </ul>
       </li>
           <li><a href="#" class="MenuBarItemSubmenu">Indoor Air Quality</a>
             <ul>
               <li><a href="#">Aprilaire Humidifiers</a></li>
               <li><a href="#">Honeywell Electronic Air Cleaners</a></li>
               <li><a href="#">Honeywell Thermostats</a></li>
             </ul>
       </li>
         </ul>
    </li>
       <li><a class="MenuBarItemSubmenu" href="#">Job Photos</a>
         <ul>
    <li><a href="#">Commercial Refrigeration</a></li>
    <li><a href="#">Commercial Rooftop</a></li>
    <li><a href="#">Commercial Ice Machine</a></li>
    <li><a href="#">Air Conditioning</a></li>
    <li><a href="#">Boiler</a></li>
    <li><a href="#">Furnace</a></li>
    <li><a href="#">Heat Pump</a></li>
    <li><a href="#">Indoor Air Quality</a></li>
         </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Cool Savings</a>
         <ul>
           <li><a href="#">Monthly Specials</a></li>
           <li><a href="#">Manufacturers Rebates</a></li>
           <li><a href="#">Utility Rebates</a></li>
           <li><a href="#">Website Coupons</a></li>
    <li><a href="#">Customer Referral Program</a></li>
         </ul>
       </li>
       <li><a class="MenuBarItemSubmenu" href="#">Social</a>
         <ul>
           <li><a href="#">&quot;LIKE&quot; Us on Facebook</a></li>
           <li><a href="#">&quot;FOLLOW&quot; Us on Twitter</a></li>
    <li><a href="#">Facebook Disclaimer</a></li>
         </ul>
    </li>
    <li><a class="MenuBarItem" href="#">Contact Us</a>  </li>
    </ul>
    <p><br />
    </p>
    <div class="sidebar1"><img src="Images/home.jpg" alt="Home Page Photo" width="105" height="240" /></div></div>
      <div class="content">
        <h1>Instructions</h1>
        <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
        <h1>Clearing Method</h1>
        <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule.  This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
        <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
        <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
        <h4>Backgrounds</h4>
        <p>By nature, the background color on any div will only show for the length of the content. This means if you're using a background color or border to create the look of a side column, it won't extend all the way to the footer but will stop when the content ends. If the .content div will always contain more content, you can place a border on the .content div to divide it from the column.</p>
        <!-- end .content --></div>
      <div class="footer">
        <table width="960" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th width="102" scope="col"> </th>
            <th width="101" scope="col"> </th>
            <th width="106" scope="col"> </th>
            <th width="120" scope="col"> </th>
            <th width="172" scope="col"> </th>
            <th width="120" scope="col"> </th>
            <th width="103" scope="col"> </th>
            <th width="136" scope="col"> </th>
          </tr>
          <tr>
            <td colspan="2"><img src="Images/van.jpg" alt="Sub Zero Refrigeration Heating and Air Conditioning Service Van" width="243" height="109" align="left" /></td>
            <td colspan="6"><img src="Images/footer_right.jpg" width="717" height="109" alt="Footer" /></td>
          </tr>
        </table>
      </div>
      <div class="footer2">
        <div class="footer">
        <table width="960" height="62" border="1" align="center" cellspacing="8">
          <tr valign="middle">
            <th width="234" scope="col">Schedule a Service Call</th>
            <th width="247" scope="col"><p>Schedule Free New Equipment Replacement Estimate</p></th>
            <th width="99" scope="col"><a href="https://www.acca.org/consumer/find-a-contractor" target="_blank"><img src="Images/acca.gif" width="85" height="48" alt="ACCA Sub Zero Refrigeration" /></a></th>
            <th width="94" scope="col"><a href="http://www.bbb.org/chicago/business-reviews/heating-and-air-conditioning/sub-zero-refriger ation-and-a-c-in-midlothian-il-7695" target="_blank"><img src="Images/BBB.png" width="87" height="48" alt="Sub Zero Refrigeration BBB A+ Rating" /></a></th>
            <th width="84" scope="col"><a href="http://www.natex.org/" target="_blank"><img src="Images/nate.png" width="76" height="74" alt="NATE Sub Zero Refrigeration" /></a></th>
            <th width="83" scope="col"><a href="http://www.twitter.com/subzerorefrig" target="_new"><img src="Images/twitter_logo.jpg" width="69" height="69" alt="Follow us on Twitter" /></a></th>
            <th width="143" scope="col"><a href="https://www.facebook.com/subzerorefrig" target="_new"><img src="Images/facebook.png" width="81" height="81" alt="" /></a></th>
          </tr>
        </table>
        </div>
        <div class="footer3" id="footer3">
          <div class="footer">
            <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <th width="960" style="background-color: #B7E3EA; font-size: 10px; font-family: Arial, Helvetica, sans-serif" scope="col">Home |  About Us | Repair | Sales | Maintenance | Products | Our Job Photos | Cool Savings | Social | Contact Us | Schedule Free New Equipment Estimate | Schedule Service | Site Map<br />
                Search Sub Zero Refrigeration Heating and Air Conditioning<br />            </th>
              </tr>
            </table>
            <p><!-- end .container -->      Copyright 1999-2013 | Last updated on
              <!-- #BeginDate format:Am1 -->February 19, 2012<!-- #EndDate --> | Web designer's - Ted Wagner and Cherie White Cachampis      </p>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    swfobject.registerObject("FlashID");
    </script>
    </body>
    </html>

    I seem to have fixed it by putting <div  class="clearfloat"></div> after the navigation bar?

  • Spry menu Bar I.E. positioning issues?

    Hi,
    I, like many folks I've seen on various forums have the same problem with my spry menu appearing at the top of I.E browsers instead of under the menu bar. I've tried all sorts of fixes that I've found and have updated to the latest version of Spry. I am using CS3. Could anyone please, please help? I'm not sure where else to go as I've spent the last week on the web trying to resolve the issue. Everything works great on Safari and Firefox. My URL is http://www.visiongreeninvestments.org
    Thanks in advance to anyone who can point me in the right direction.
    My CSS is:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
    /* 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: 130px;
        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: 8.2em;
        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.2em;
        background-image: none;
    ul.MenuBarHorizontal ul li a
        width: 7.8em;
        background-image: none;
        background-color: #669933;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
        left: auto;
        top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
        border: 0px solid #CCC;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
        display: block;
        cursor: pointer;
        background-color: #669933;
        color: #000066;
        text-decoration: none;
        font-family: Times;
        font-size: 14px;
        font-weight: normal;
        background-image: url(../homepagelayout/greenbarbg.jpg);
        background-repeat: repeat;
        padding-top: 0.5em;
        padding-right: 0.75em;
        padding-bottom: 0.5em;
        padding-left: 0.75em;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    /* 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: #669933;
        color: #FFF;
        background-image: none;
    /* 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: #669933;
        color: #FFF;
        background-image: none;
    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(../homepagelayout/greenbarbg.jpg);
        background-repeat: repeat;
        background-color: #669933;
    /* 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: none;
        background-position: 95% 50%;
        background-color: #669933;
    /* 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: none;
        background-position: 95% 50%;
        background-color: #669933;
    /* 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: none;
        background-repeat: repeat;
        background-position: 95% 50%;
        background-color: #669933;
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
        position: absolute;
        z-index: 1010;
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
        ul.MenuBarHorizontal li.MenuBarItemIE
            display: inline;
            f\loat: left;
            background: #FFF;
        /*insert this bracket/*

    I see that the online version has already been upgraded to Spry 1.61 and that it now works.
    Gramps
    PS Before you change anything, have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one. This will ensure that you don't make a mess of it this time around.

  • Spry Menu Bar acting weird in IE

    Hello,
    I am relativley new to Dreamweaver and I built a website using CS4.  I never did a spry menu bar and I have one on my site.  The menu bar works fine in firefox, in safari it seems to work as it is aligned right, but my flash player doesn't.  But the main problem is in IE.  The grey background I have for the spry bar is in the right spot but the actual links are offset, and when you role over them the submenus are on the left and also offset.  I tried messing around with the hack IE in the spry css but not really sure what I am doing as I don't know code too much.  I also am Mac based and the problem in IE is on the PC. Also I built all the pages in Illustrator and inserted them in and used hot spots. I am not sure if that may have something to do with it.   If any one can help I would really appreciate it.  The website I created is http://www.menaceaudio.com. 
    Also if this helps here is my SpryMenuBarHorizontal.css
    @charset "UTF-8";
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    /* 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: auto;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 41.25em;
        padding: 0px;
    /* 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;
        list-style-type: none;
        font-size: 14pt;
        position: relative;
        text-align: center;
        cursor: pointer;
        float: left;
        padding: 0;
        color: #FFF;
        background-color:#ccc;
        width: 8.23em;
    /* 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;
        float: left;
        left: -1000px;
        width: 8.23em;
        position: absolute;
        background-color: #CCC;
    /* 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: 0px;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
        width: 8.23em;
        background-color: #CCC;
        position: relative;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
        position: absolute;
        margin-top: -5%;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 95%;
    /* 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-repeat: repeat-y;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal a
        left: -20px;
        top: 30px;
    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
        cursor: pointer;
        text-decoration: none;
        font-family: eurostile;
        font-size: 14px;
        background-repeat: no-repeat;
        padding: 0.5em;
        margin: 0.5px;
        display: block;
        color: #036;
        border-top-width: thin;
        border-right-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-top-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #333;
        border-right-color: #333;
        border-bottom-color: #333;
        border-left-color: #333;
        border-right-style: solid;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
        color: #FFF;
    /* 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
    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-repeat: repeat-x;
        font-family: eurostile;
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    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);
        ul.MenuBarHorizontal li.MenuBarItemIE
        ßfloat: left;
        position: relative;
        display: inline;

    I'm using IE8, and I don't see the offset errors of which you speak. I do recommend restoring the IE hacks at the bottom of the stylesheet to the original, however.
    I also notice that the width of the individual menu items (top level) is forcing "CONTACT" to a second line. You can safely remove the pixel width on the containing div, returning to 100%. But your paddings and widths of top level menu items may be the forcing issue here.
    Beth

Maybe you are looking for

  • Spry Menu problem with using a transparent background image

    Hi-  I'm new to CS5 and Dreamweaver. I just finished the beginning webpage tutorial and I have started to work on a personal project. The Problem: when I use a transparent png image as a backgroun-image for my spry menu it shows up fine in live view,

  • How do i know if my pc is infected by a backdoor virus?

    how do i know if my pc is infected by a backdoor virus?.... there was a window, which said that i won something.... the only button was the "ok" button, to go on.....there was no red X on the upper side left and i could not even close safari..... so

  • How To create web service

    Hi Gurus, I'm new at web dynpro.I have to create a web service on portal, and call it from ECC.I know what to do at abap but have no idea about portal side. I will send a parameter to web service, and web service will read a table which is created on

  • Impact of shifting database version and platform

    i've to migrate an existing system using Oracle7.3.2.3 on Sun solaris(sparc) 2.6 to Oracle 9i on Linux, could uyou just guide me what will be the impact on existing code and the database. is there any documents available regarding this

  • About Runtime Environment

    already we know that how can execute one java program from within another java program . but my doubt how to get inputs to one java program from within another java program?i dont need command line arguments