Spry Bar Menu alignment issue in Internet Explorer

Problem:

  1. The submenu under the second menu item 'works' right in Internet Explorer.  It seems to be fine in Safari, FireFox and Chrome.  Do not see what I am doing wrong.
  2. When the main menu item is selected, I would like the background color of the selected menu item to be a different shade of gray (#575757) to indicate that it has been selected.  Where is that change go?

I would be grateful for your help!

Site: http://deborahkapoor.com/ 

Code:


@charset "UTF-8";

/ * Sections - version 0.6 - Pre - Release Spry 1.6.1 * /.

/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

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

The AVAILABLE INFORMATION: Describes the box model, positioning, the order

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

/ * The outermost container for the menu bar, an area of width auto without margin or padding * /.

UL. MenuBarHorizontal

{

margin: 0;

padding: 0;

list-style-type: none;

do-size: 100%;

cursor: default;

Width: auto;

}

/ * Value of the menu bar active with this class, currently the definition of z-index to accommodate IE rendering bugs: http://therealcrisp.xs4all.nl/Meuk/IE-zindexbug.html */

UL. MenuBarActive

{

z-index: 1000;

}

/ * Menu item containers, position of children relative to this container and are a fixed width * /.

UL. MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

do-size: 100%;

position: relative;

text-align: left;

cursor: pointer;

Width: 130px;

float: left;

}

/ * Submenus should appear under their parent (top: 0) with a higher z-index, but they are first the left side of the screen (-1000em) * /.

UL. MenuBarHorizontal ul

{

padding: 0;

list-style-type: none;

do-size: 90%;

z index: 1020;

cursor: default;

Width: 8.2em;

position: absolute;

left:-1000em;

margin: 0 0 0 15%;

}

/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we put the car left so it happens on the screen below its parent menu item * /.

UL. MenuBarHorizontal ul. MenuBarSubmenuVisible

{

left: auto;

}

/ * Container of menu items are same fixed width parent * /.

UL. MenuBarHorizontal ul li

{

Width: 8.2em;

}

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

UL. MenuBarHorizontal ul ul

{

position: absolute;

margin:-5% 0 0 95%;

}

/ * Submenu that shows with the designation of the class MenuBarSubmenuVisible, we have left to 0, it is on the screen * /.

UL. MenuBarHorizontal ul. MenuBarSubmenuVisible ul. MenuBarSubmenuVisible

{

left: auto;

top: 0;

}

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

INFORMATION DESIGN: Describes the set of colors, borders, fonts

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

/ * Submenu containers have borders on all sides * /.

UL. MenuBarHorizontal ul

{

border: none;

}

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

UL. MenuBarHorizontal a

{

display: block;

cursor: pointer;

background-color: #474747;

Padding: 0.5em 0.75em;

color: #FFF;

text-decoration: none;

}

/ Components menu that have mouse over or focus have a grey and white text background * /.

UL. MenuBarHorizontal a: hover, ul. MenuBarHorizontal a: focus

{

background-color: #777777;

color: #FFF;

}

/ * Menu items that are opened with the submenus are on MenuBarItemHover with a blue background and white text * /.

UL. MenuBarHorizontal a.MenuBarItemHover, ul. MenuBarHorizontal a.MenuBarItemSubmenuHover, ul. MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color: #777777;

color: #FFF;

}

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

Submenu INDICATION: styles if there is a submenu in a given category

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

/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

UL. MenuBarHorizontal a.MenuBarItemSubmenu

{

/ * background-image: url (SpryMenuBarDown.gif); */

background-repeat: no-repeat;

background-position: 50 95%;

text-align: left;

}

/ * Menu items that have a submenu have the MenuBarItemSubmenu class designation and are set to use a positioned background the far left (95%) and vertically centered image (50%) * /.

UL. MenuBarHorizontal ul a.MenuBarItemSubmenu

{

background-image: url (SpryMenuBarRight.gif);

background-repeat: no-repeat;

background-position: 50 95%;

}

/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;

}

/ * Menu items that are opened with the submenus have the designation of the MenuBarItemSubmenuHover class and are set to use a background image "hover" 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: 50 95%;

}

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

BROWSER HACKS: hacks below should not be changed, unless you are an expert

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

/ * HACK FOR IE: to ensure that sub menus show above form controls, underpin us each submenu with an iframe * /.

UL. MenuBarHorizontal iframe

{

position: absolute;

z index: 1010;

Filter:alpha(opacity:0.1);

}

/ * HACK FOR IE: to stabilize the appearance of the menu items. the slash in the float is to keep IE 5.0 analysis * /.

@media screen, projection

{

UL. MenuBarHorizontal li. MenuBarItemIE

{

display: inline;

f\loat: left;

Background: #FFF;

}

}

Your suggestion works by fixing the gross misalignment in IE, but it removes the indentation I got in there and I wish that the submenu agree.  Any way to integrate the two.

Add and adjust the value on

UL. MenuBarHorizontal ul a {}

left margin: 20px;

}

In addition, if you could advise on the background color of the selected menu option, I'd appreciate it.

Add and adjust them according to

UL. MenuBarHorizontal .activeMenuItem a {}

background: #a59a84! important;

color: #ffffff! important;

}

Don't forget ! important as this will override any changes made by the JS

Then add on the corresponding page class as per

  • | Homepage
  • GRAMPS

    Tags: Dreamweaver

    Similar Questions

    • How can I get my navigation bar to align properly in Internet Explorer?

      How can I get my navigation bar to align properly in Internet Explorer?  My www.breastcancerbodies.com site displays correctly on windows seen FIREFOX, SAFARI, OPERA, CAMINO and Mac computers, but using IE the navbar covers a part of the body of text.  Any help would be appreciated. Thank you.

      You have this piece of code (see below) in the middle of your HTML pages. How he got there, I don't know, but it is there if you need to remove it. Go to code in Dreamweaver and make view scroll down the page until you get to it, just select and delete.


    • menu bar horizontal Spry does not work properly in Internet Explorer

      Here is the link to my website: www.ees-energy.com

      Check it in IE, it does not work well. Works fine in Chrome and Firefox. Please let know hwo to fix this in Internet Explorer, because a lot of people still use IE

      Thank you

      Obaid

      Using IE Tester that worked for me in the 6 and 7.

      What problems are you seeing?

      Martin

    • Menu Spry, problems with background images in Internet Explorer

      Hello

      Looking for help from someone more qualified than me with some menus spry.  I have problems with background images don't show is not for some of my items menu in Internet Explorer.  Safari and firefox seem to accept it's ok.

      Here is a link to the menu: http://www.scottbrownwebdesign.com/beta/HTML/index.html

      and here is a link to the spry .css: http://www.scottbrownwebdesign.com/beta/HTML/SpryAssets/SpryMenuBarHorizontal.CSS

      I know that these are the elements that have the drop down or the side of the arrows.  I can't have two background images that I can?

      Thanks in advance,

      -Scott

      My first thought...

                           display: inline;          f\loat: left;          background: #FFF;
      
      Try declaring the background-image here as well... where it says not to mess with unless you know what you are doing.
      
      I'm just guessing though. If I had more time I'd look into it further but I do not.
      
    • status bar of hide/show in internet explore

      I opened IE and wanted to see a video on Yahoo.  I wanted to kill the sound on advertising and I cut the sound.  Then, I turned on the sound and watched the video.  During this process, one of the controls that I used hides my status bar and the controls at the top of the page.  I would like to know how to recover my status bar and controls, and how to hide them from time to time.

      Thank you for your time.

      60640

      One of these links can therefore also be of interest

      Internet Explorer keyboard shortcuts

      Internet Explorer 9 keyboard shortcuts

    • How to install the bar Adobe PDF toolbar in Internet Explorer

      How to install an Adobe PDF toolbar in Internet Explorer?

      If you install Acrobat 10 then it automatically configures the PDFMaker toolbar in I.E. You can try to repair the software.

      Open Acrobat-> go to the Help menu-> repair the Installation of Acrobat.

      Solution #2

      Select "Enable third party browser extensions" in Internet Explorer properties.

      1. start Internet Explorer.

      2. Select Tools > Internet Options, and then click the Advanced tab.

      3. Select "Enable third-party browser extensions (requires restart)" and click OK.

      4. close all Internet Explorer Windows.

      5 restart Internet Explorer.

      If still doesn't work then let me know what the IE and Acrobat version you are using.

    • Drop-down menu came not in internet explore

      Hello

      I have created a Web site drop-down list came not on mouseover internet explore, works fine in safari, firefox.

      Please help me Weblink

      Try wmode = "transparent" for the second flash movie like you did with the first flash movie.

      GRAMPS

    • Spry works does not properly in Internet Explorer (again!)

      Hello everyone,

      I put several bars of menus vertical spry on my page, they work as expected on all major browsers except IE: S.. .as usual. When you go to the page on another browser, you will see the sub-menus to overlap the other menus spry, but when you go through IE that they do not overlap rather submenus are the menus other spry. I have tried many things to resolve the situation in the present case, but all were considered as empty :|

      http://Bonzo.bonzoline.com/

      I'd appreciate any help any of you guys, can't wait for you answer (s). See you soon!

      Kamil

      I guess you didn't look at the code I gave you; your document is still a mess and you neglected the most important part. That's all I want to say.

      To solve your problem add the following line just above the tag

      
      

      GRAMPS

    • Navigation bar links work only in Internet Explorer 7

      Hey people.  I have a site where he looks a lot like IE 8, Mozilla, Chrome, and Safari, but not in IE 7.


      The site is for an annual conference and I know that dozens of people who are going to be displayed to the site using IE 7 with no intention to upgrade.  Even my company uses IE 7 and that's how I learned this morning that the site works in it.  And then panic the value in... lol.

      I am actually trying to find a workaround for the real site right now... so this link below is actually on the partially completed test site, I've been working on until I finished it and it flies.

      I DON'T know how to code HTML... so I think with a possible workaround.  I don't want to have Javascript code tries to recognize the browser and sending people to IE7 to a slightly different site... but if it's the only way, then it will have to do.

      http://www.hellzabeth.com/index.html

      Any ideas?  I've already called the helpdesk Adobe and they have not an idea... told me to throw it here and see what happens :-)

      Hello

      You have two image empty frames on the master page covering the elements of two image albums. It is very likely one (or two) of these frameworks have also been covering the major part of your horizontal menu of your previous version (which was blocking the mouse clicks in IE7).

      You can find either select all (Ctrl + A) on the master page or clicking and dragging to the top about halfway down the page. Removing these empty picture frames solves the problem.

      Thank you
      Colby

    • Hyperion Planning 9.3.1 issue of Internet Explorer 6

      Hi gurus,

      One of my customer who uses IE6 for Hyperion planning 9.3.1 but is not able to open planning applications. When it attempts to open the app showing Opening Application and the bar with the warning problem with this web page might avoid it no longer show of State IE
      Details: * 'getHandler () .planningMenuBar' is null or not an object *.

      Any help would be appreciated.


      Concerning
      PrakashV

      That points to a problem with the other IE clients, now, it could be a framework, could put a different patch, might need to reinstall. I can't say much more than that.

      See you soon

      John
      http://John-Goodwin.blogspot.com/

    • Query string and issue of Internet Explorer

      Hello

      I did a small Flash (Player 8, AS2) application that is controlled by a chain of request on the URL of the page. Here is a link to test:

      http://www.highergroundclients.co.UK/DB/fundsmap/index.html?region=null

      If you open this link in Firefox, you will see that Europe is selected by default, and then clicking on Asia or Latin America will change the string, reload the page and change the selected region.

      It works fine in Firefox, Safari etc, but for some reason any it won't work in IE6, IE7 or IE8. Now of course I know that query strings work fine under IE, but I've never known files Flash behave differently in different browsers before.

      If anyone has experienced this before? I am really puzzled. Here's the flash code I use:

      var queryParts:Array = flash.external.ExternalInterface.call ("function () {return window.location.toString () ;}"). Split("?) Region = ") [1]." Split ("=");
      trace (queryParts [0] + "=" + queryParts [1]);

      _root.geo_mc.gotoAndStop (queryParts);

      I also tried to embed the Flash file in different ways (object, swfobject etc.) but not joy.

      Any help would be appreciated!

      you add javascript function in the html embed file so your code is easier to read and debug.  Use location.href to bring back the html url

    • Menu bar - vs Internet Explorer Firefox

      Does anyone know why my spry menu bar looks like this in Internet Explorer?    The url is www.iewaterkeeper.org .

      a.png

      It is supposed to look like this: (and this looks like in Firefox)

      b.png

      Thanks advance.

      Because you have not specified a width for the container of submenu items, IE assumes that it can use the full available width, so the items that appear on the same line.

      Add a width (for example width: 156px ;)) UL. MenuBarHorizontal ul and all is well

      GRAMPS

    • My task bar are missing when I use Internet Explorer

      De : Corin

      I'm crazy, or has disappeared from my taskbar?  When I'm at my desk, I have a task bar... and I could have sworn that for a few months (since the installation of Vista), I got a visible task bar when I was in Internet Explorer.  ("You don't know what you got til its gone.":-P) is the only problem, NOW when I'm in Internet Explorer, I don't have a taskbar.)  NOW, I have to navigate between programs using the ALT + TAB.  I don't quite know what has changed on this computer.

      Any ideas on how to get the taskbar to the top a run for so I'm in Internet

      Explorer?

      -Thank you

      De : Jimmy brush

      Hello

      Looks like you have probably accidently enabled Internet Explorer kiosk mode. Press F11 in internet Explorer and see if that fixes the problem.

      --

      -JB
      MVP Microsoft - Windows-Shell/User
      Windows Vista Support FAQ-
      http://www.jimmah.com/Vista/

      Another response of the community of Windows Vista discussion groups

    • Horizontal menu does not work in Internet Explorer.

      I have a site that I created using CS3. The horizontal navigation bar does not work in internet explore. I tried a few things and tried to look at others. I can't make it work. I'm starting to think I need to do it again. Can someone please take a look?

      http://www.millnerheritage.com

      This is only the second site, I did it, so please be nice.

      Thank you

      LTimmers

      There is something strange going on.

      When I look at this

      the links go back a folder/directory, and yet they are called from the root directory. I have a slight suspicion that you have two sections, one that has changed and the other has not been changed.

      You worry about the addition of the style ul rule. MenuBarHorizontal {width: auto ;} } to your existing as per document

      ..............

      a: active {}
      text-decoration: none;
      }
      {.style10}
      font size: large;
      make-weight: bold;
      make-style: italic;
      }
      .style11 {size are: small}

      UL. MenuBarHorizontal {width: auto ;}}


      ............

      See what's happening.

      GRAMPS

    • I lost spelling/grammar and auto fill on internet explore

      Please help me restore thanks

      Restore point:

      http://www.howtogeek.com/HOWTO/Windows-Vista/using-Windows-Vista-system-restore/

      Do Safe Mode system restore, if it is impossible to do in Normal Mode.

      Try typing F8 at startup and in the list of Boot selections, select Mode safe using ARROW top to go there > and then press ENTER.

      Try a restore of the system once, to choose a Restore Point prior to your problem...

      Click Start > programs > Accessories > system tools > system restore > choose another time > next > etc.

      http://www.windowsvistauserguide.com/system_restore.htm

      Read the above for a very good graph shows how backward more than 5 days in the System Restore Points by checking the correct box.

      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      See if the information below helps you solve the problem/s you have with Internet Explorer:

      http://support.Microsoft.com/default.aspx/KB/936213/?p=1

      "How to optimize Internet Explorer"

      Configuration in Windows Internet Explorer 7 and Windows Internet Explorer 8 settings can cause one or more of the following problems:

      ·    You experience performance issues in Internet Explorer.

      ·    You receive an error message in Internet Explorer. For example, you receive a message error "Internet Explorer cannot display the webpage".

      ·    Internet Explorer stops responding.

      This article describes how optimize or reset Internet Explorer in Windows Vista to solve these problems.

      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      http://support.Microsoft.com/kb/936215

      "How to solve the problems of Internet Explorer in Windows Vista and Windows XP"

      This article explains how to solve any problems that you may experience when you use Windows Internet Explorer 7 or Windows Internet Explorer 8 on a computer that is running Windows Vista.

      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      http://support.Microsoft.com/kb/936214/

      "How to solve compatibility problems that affect Internet Explorer 7 in Windows Vista"

      This article describes how to troubleshoot software compatibility affecting Windows Internet Explorer 7. To help determine which program may be the cause of the problem, you can do the following:

      1 use the mode safe mode with networking

      2. perform a clean boot

      3. use another user account

      4 scan your computer against viruses and spyware

      5. run Internet Explorer 7 in "no Add-ons" mode

      Hope the above helps.

      ·                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      Also try the Forum from IE:

      http://social.answers.Microsoft.com/forums/en-us/InternetExplorer/threads

      They will help you with your question IE in Forum Internet Explorer above.

      See you soon.

      Mick Murphy - Microsoft partner

    Maybe you are looking for