PDA

View Full Version : Spry menu vertical submenu IE 8 display problem


tahsin1982
05-02-2011, 11:58 PM
Hi all,

Please accept my apology if this has been asked before and I would really appreciate if someone can help me out.

I made this website (http://themarketingscience.com/clients/DufferinIronandRailings/index.html) which is still not complete yet and I have some problem with the spry menu as my client want the sub down menu to be shifted up more as the default was a bit low so I adjusted the margin and it looks fine on chrome and firefox but IE8 nothing changes.

I am not really an expert on IE hacks code thats why i am posting this here.

Here is the code for the spry.

ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 8em;
}
/* 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 same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 9.8em;
border: 1px solid #6A6B41;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: -50px;
margin-top: -10%;
margin-right: 0;
margin-bottom: 0;
margin-left: 100%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: 10em;
margin-right: 15px;
}

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

DESIGN INFORMATION: describes color scheme, borders, fonts

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

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
color: #666734;
text-decoration: none;
font-family: "Times New Roman", Times, serif;
background-image: url(../webRoot/RootImage/images/logoBg.png);
background-repeat: repeat-x;
font-size: 14px;
font-weight: bold;
padding-top: 0.3em;
padding-right: 0.75em;
padding-bottom: 0.3em;
padding-left: 0.75em;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
color: #666734;
background-image: url(../webRoot/RootImage/images/logoBg2.png);
background-repeat: repeat-x;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
color: #FFF;
background-image: url(../webRoot/RootImage/images/logoBg2.png);
background-repeat: repeat-x;
}

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

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.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(../webRoot/RootImage/images/logoBg.png);
background-repeat: repeat;
}

/* 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.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(../webRoot/RootImage/images/logoBg2.png);
background-repeat: repeat-x;
color: #FFF;
}

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

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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

Thanks :)

DWcourse
05-03-2011, 03:27 AM
It looks the same in IE and Firefox to me.

tahsin1982
05-03-2011, 03:29 AM
Thanks for replying ar eyou using IE8? cause my IE8 the sub menu margin does not work :(

DWcourse
05-03-2011, 03:33 AM
Whoops sorry. Let me look again.

tahsin1982
05-03-2011, 03:36 AM
No prob :)

DWcourse
05-03-2011, 03:45 AM
I see your issue now. I wasn't looking at IE.

For the horizontal position, try setting the width in ul.MenuBarVertical to 9.8em so that it matches the width you set for ul.MenuBarVertical li.

tahsin1982
05-03-2011, 04:03 AM
Hi Thanks for replying,

http://themarketingscience.com/clients/DufferinIronandRailings/index.html

This is what I got after changing the ul.MenuBarVertical to 9.8em.

http://themarketingscience.com/clients/DufferinIronandRailings/index.html

Unfortunately the submenu is still not shifting up liek I originally set the code for below

ul.MenuBarVertical ul
{
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: -50px;
margin-top: -10%;
margin-right: 0;
margin-bottom: 0;
margin-left: 100%;
}

It works fine on all browser except IE8 I am totally lost at this.

DWcourse
05-03-2011, 04:15 AM
actually I believe top: -50px; is responsible for most of the movement of your submenus so why not delete that and try it strictly with margins. Something like this:

margin: -90px 0 0 100%;

tahsin1982
05-03-2011, 04:50 AM
http://themarketingscience.com/clients/DufferinIronandRailings/index.html

It worked but it still looks slightly different than mozilla and firefox but its still better than what it was before. Thank you so much for your help once again. :)