FORUMS: list search recent posts

Horizontal Spry menu - Problem in IE

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Jean Bienvenu
Horizontal Spry menu - Problem in IE
on Jan 31, 2011 at 9:06:47 pm

I found this forum whilst looking for a solution for a positioning problem of a horizontal Spry menu in IE. Submenus were not displaying vertically.

Richard Williams suggestion of adding

ul.MenuBarHorizontal li ul li{
clear: left;
}

in the CSS sorted that out but the submenu is still not displaying as it should (and does in FF, Chrome, Safari and Opera).

Please take a look at the example page http://www.sougia.info/ and let me know what I should do in order for IE to display submenus of equal width. I guess that it is a question of margin or padding somewhere but I cannot get it going.

Thank you.


Return to posts index


Richard Williams
Re: Horizontal Spry menu - Problem in IE
on Jan 31, 2011 at 11:28:52 pm

Hi Jean,

OK, you can do this by overriding some of the other settings.

Add the following you your CSS, at the very bottom is fine.

ul.MenuBarHorizontal#AFE li {
width: auto;
}
ul.MenuBarHorizontal#AFE ul {
width: auto;
}

ul.MenuBarHorizontal#AFE ul li {
display: block;
float: none;
width: auto;
white-space: nowrap;
}

ul.MenuBarHorizontal#AFE a.MenuBarItemSubmenu {
padding: 0.5em 2em 0.5em 0.75em;
}

For other people reading this, the AFE represents this persons MenuBar1, what is normally called MenuBar1 automatically when you insert a spry menu, so replace the AFE with MenuBar1, or whatever title appears on your menu that you wish you affect in this way.

These rules will override the width settings in the CSS rule as they are more specific than the exisiting rules, so there is no need to dlete out the 8.2em standard settings it will just take care of it.

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)


Return to posts index

Jean Bienvenu
Re: Horizontal Spry menu - Problem in IE
on Jan 31, 2011 at 11:58:47 pm

Wonderful! Problem solved.

It's 2AM here so too late to exactly work out WHY it works but I'll get back to it in the morning.

Thanks a lot Richard


Return to posts index


Anne Chen
Re: Horizontal Spry menu - Problem in IE
on Mar 1, 2011 at 8:41:34 pm

Hi Richard and COW Community,

I have the same problem: horizontal spry menu works well in Chrome, etc., but not IE. The menu goes clear off the page to the very right.

I've tried all the different suggestions Richard and Abraham have recommended, but it still won't work. For example, clear: left, deleting Background: FFF, etc. I've probably messed up something higher up in the code that is making their fixes not usable.

I would really appreciate your help. Here's my code:

----

@charset "UTF-8";

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

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

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

LAYOUT INFORMATION: describes box model, positioning, z-order

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

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* 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: 19px;
position: relative;
text-align: center;
cursor: pointer;
width: 100%;
float: center;
}
/* 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: 100%;
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: 100%;
}
/* 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: #FFF;
padding: 0.5em 0.75em;
color: #d21920;
text-decoration: none;
font-size: 16px;
font-weight: normal;
}
/* 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: #FFF;
color: #d21920;
}
/* 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: #FFF;
color: #d21920;
}

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

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: no-repeat;
background-position: 95% 50%;
font-size: 19px;
font-weight: bold;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

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

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

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

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
}
}
/* HACK FOR IE: to make sure the sub menus show right below the main menu, adding clear: left */
ul.MenuBarHorizontal li ul li
{
clear: left;
}


--
Thank you.


Return to posts index

Richard Williams
Re: Horizontal Spry menu - Problem in IE
on Mar 2, 2011 at 6:39:57 pm

Without seeing your page, its difficault to understand exactly what you are trying to achieve... from what i can see here, you are using a horizontal menu and changing the CSS to make it look like a vertical menu... which begs the question why you dont just use a vertical menu...?

I assume you have a containing div for your menu with a fixed width. What is happening is in safari, the width of the menu AND the submenus is following the width of your container, whereas in IE, only the menu is follwing the DIV width, the submenu is following its rule from the css.. which is to have the menu and submenu 100% width. the 100% is filling the div of your container, but the submenu is filling to 100% of the page width.

To change this, set the width of the ul.MenuBarHorizontal ul and ul.MenuBarHorizontal li to the same width as the DIV container, or just fix the width of them both to the same setting.

Hope this helps. If not then please show me your page so i can get an understanding of what you are trying to achieve.

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)


Return to posts index

Anne Chen
Re: Horizontal Spry menu - Problem in IE
on Mar 2, 2011 at 7:17:51 pm

Hi there,

Okay, finally figured it out, so no need to reply to my question.

I changed width from 100% to auto:

/* 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: auto;
position: absolute;
left: -1000em;
}


Return to posts index


Ling Tee
Re: Horizontal Spry menu - Problem in IE
on Sep 16, 2011 at 2:03:53 am

I used this method in my menu bar, but it seems that the menu bar is not reactive when i mouse over the white space beside the short text. Is there any way to rectify this?


Return to posts index

Kevin Richards
Re: Horizontal Spry menu - Problem in IE
on Oct 2, 2011 at 1:06:11 pm

I was having a similar problem with my menu bar. In IE it was being displayed vertically instead of horizontal as it should. Your suggested fix, or the others did not resolve the issue, but here is what I did to fix it. Just in case someone else needs the help. In the spry CSS the width property for the menu bar was set to auto.

ul.MenuBarHorizontal
{
margin: 0px 0px 0px 5px;
padding: 20px 0px 0px 0px;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-align: center;
}

I specified a width and that resolved the issue for me.

ul.MenuBarHorizontal
{
margin: 0px 0px 0px 5px;
padding: 20px 0px 0px 0px;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 780px;
text-align: center;
}

Also my menu was within a table and so I had to also increased the colspan inline as well to accommodate the width of the menu bar. Hope this may help someone.


Return to posts index

Jim Haugh
Re: Horizontal Spry menu - Problem in IE
on Jul 16, 2013 at 6:08:51 pm

Richard,

Your a genius! Just what the Spry Menu Bar Doctor ordered. Your a life saver.

Jim


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]