Current position:  Home > Default > Spry MenuBar F. Fox fine, IE Explorer displays off

Spry MenuBar F. Fox fine, IE Explorer displays off

Time:November 30
Advertisement
Hello Friends,
I am having an issue with my Horizontal SpryMenubar.
In Firefox all seems fine. However when I load my website in IE Explorer, a black bar, (same length as my Spry Menubar) appears below the actual Menubar. It almost seems like it is part of the Menubar and but is pushed down out of position.
I have included my CSS and a screen shot to illustrate the issue.
If anyone can shed some light on this I would be very grateful hearing from you. Many thanks in advance for your assistance!
@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: 600px;
    margin:auto;
    background-color: #000000;
/* 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
    list-style-type: none;
    font-size: 100%;
    position: relative;
    cursor: pointer;
    top: -55px;
    width: 9em;
    padding: 2px;
    float: right;
    background-color: #000000;
/* 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;
    top: 10px;
/* 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: 10px;
/* 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;
    background-color: #000000;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    cursor: pointer;
    background-color: #000000;
    color: #FFFFFF;
    font-family: "Century Gothic";
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    padding-top: 0.5em;
    padding-right: 0.75em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #33FF66;
/* 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
    color: #FF0000;
    font-family: "Century Gothic";
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
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;
/* 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-color: #000000;
Advertisement
Hi,
The following code will give you a nice black line as you described:
ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 600px;
    margin:auto;
    background-color: #000000;
My advice, keep the original CSS and create a myStyles.css which is loaded after the Spry CSS. myStyles.css will then contain your mods. This makes it much easier to keep track of when something goes wrong.
Hope this helps,
Ben

Firefox won't display website properly on my new asus-explorer displays fine

-0001-11-30

Opening a website, let's say Google, and selecting 'images', gives one screen of photos but scrolling down yields no more photos, just a blank screen. Most websites don't show all the info previously there. Such as stock numbers in the margins. Same

IE7 blocks Spry Menubar

-0001-11-30

With IE7 deliberately reset to default manufacturer's settings, I preview my page containing a Spry Menubar and a pop-up warning at the top of page states "to help protect your security, Internet Explorer has prevented this page from running scripts

Spry menubar does not work in IE

2015-10-11

I made a spry menubar to my website using dreamweaver cs3 on mac. Everything works fine with Opera, Firefox and Safari, but the menubar won't show on Internet Explorer. I've been trying to find out how to fix the problem but it still won't work prope

Spry Menubar-background problem

-0001-11-30

Hi, I have tried to search for this problem, and though I have found others with the same problem, there have been no answers (probably so obvious I missed it and they figured it out.) And I did update the Spry Menubar to the latest version. The Spry

Problems to add a background-image to the widget Spry MenuBar!

2015-10-11

With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page. But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif

Spry menubar submenu horizontal instead of vertical

-0001-11-30

I have spent two days trying to figure out why the submenu on my spry menubar goes horizontal instead of vertical.  I have watched youtube videos and all the tutorials automatically have them going vertical under each other.  My submenu bar goes left

SPry menubar floating submenu's

-0001-11-30

I've been tackling with this spry menubar trying to get it so that menu's float over content in div's or frames instead of positioning the content below the extended menu. Here is my website www.nathanielmcmahon.com I had it working in one browser be

Spry menubar IE6

-0001-11-30

I am working on this page http://www.spinsister.nl/TV3/index.htm which has a spry menubar at the top. Both FF and IE7 show the menu's as intented. In IE6 all looks well when the page is first opened, but when a menu link in the navbar or in the left

Spry Menubar, Vertical not showing in IE

-0001-11-30

Hi, I am using the vertical Spry menubar, and i have three levels of submenus... Main Menu->SubMenu->Sub-SubMenu IE show only the first two levels (Main Menu->SubMenu) but the third level is not being displayed. How can i fix this?The original Sp

Spry MenuBar Active

-0001-11-30

Is there a way to set the active state on the Spry MenuBar? Have looked through the forums and not found solution with Spry. I have this code set up: quote: <ul id="MenuBar5" class="MenuBarHorizontal"> <cfoutput> <li>

Images loaded fine in the previous version of firefox, but now do not open in firefox 5. It is our business' website. it opens and looks fine in explorer and other browsers.

2015-10-11

Images (actually graphics) loaded fine in the previous version of firefox, but now do not open in firefox 5. It is our business' website. it opens and looks fine in explorer and other browsers. However, please goto www.trinitystone.biz (using Firefox

Dreamweaver spry menubar vertical doesn't work properly in firefox 3.6.3 for windows

2015-10-11

The links in the menu items in the left hand sidebar (a Spry menubar vertical) do NOT work properly in Firefox 3.6.3 for Windows. They work when the home page is first loaded, but when you go to another page using the menu links and return to the hom

Why does Internet Explorer display an outline around the hotspot I just clicked on?

2015-10-11

hi all Why does Internet Explorer display an outline around the hotspot I just clicked on? what do i have to do to sort this? can anyone help please gmanhi hans-g thank you for your help and links, was banging my head off the wall the last day . will

Why won't Internet Explorer display current PDF page?

2015-10-11

Why can't my computer's Internet Explorer display the current PDF page?Dear acro123,     I fixed the problem!  I un-installed two different adobe programs (the current ver.11 and an old ver. 5, which I think caused the problems), went to the registry

Spry Menubar in table -problem in IE

-0001-11-30

I'm a newbie to web design and this software...having said that here is my issue: I inserted a horizontal Spry menu bar in a cell of a table. When viewed in Firefox, all is well. When viewed in IE, the Spry menubar is no longer in the cell but droppe

Inactive links on Firefox that work fine on Explorer

-0001-11-30

I am creating a landing page with links for English and Spanish. The links work fine on Explorer, but are inactive on Firefox. Can you check it out: http://mediamark.net/mls4panama/ ThanksThat code is in a DIV container that is hidden by the DIV cont

Using Spry MenuBar in a FrameSet

-0001-11-30

Hello, I would like to use a Spry MenuBar in a fixed top frameset and redirect the link to the bottom frame.  However, when I insert the menubar into the top frame, the Spry MenuBar "widget tab" will not show thus not allowing me to configure th

Spry MenuBar Help

-0001-11-30

Is there anyway to get the Spry MenuBar to align and work properly in each of the table cells, like the menu below it? I have placed each of the main buttons (home, core IT, option IT, biography and help) into a separate <td> cell. It's really annoy

Spry MenuBar - IE6 - how to make that submenu is shown above the parent element

-0001-11-30

Hi you all, I need the menubar to open the submenu above the parent element. Here´s what I did:I inserted a spry menubar and the only css-change I did was the one shown below in red "botom: 2em;" This works exactly as I need it to - in Safari, F