0

I have a fairly new spry menu that has never shown correctly in IE. The main menu wraps to the second line. I have looked off and on for a couple of months and cannot find a solution that fixes it. Can someone tell me if there is even a fix for this and if so what it is? Here is the site in IE and my code. http://ofallonchamber.com/

ul.MenuBarHorizontal
{
    ;
    cursor: default;
    width: 100%;
    white-space: nowrap;
    display: inline;
    position: relative;
    list-style-type: none;
    top: 0;
    font-size: 100%;
    margin: 0px;
    float: left;
    height: 0;
    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
{
    position: relative;
    text-align: left;
    cursor: default;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-weight: bolder;
    font-style: normal;
    font-size: 100%;
    white-space: nowrap;
    display: block;
    clear: none;
    line-height: 6px;
    margin: auto;
    right: auto;
    bottom: auto;
    width: auto;
    padding-top: 0px;
    padding-right: 1px;
    padding-bottom: 0px;
    padding-left: 0px;
    border: 2.5px outset #6688B5;
    overflow: hidden;
    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;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: 1000em;
    float: left;

}
/* 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;
    top: 0px;
    float: left;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
    text-align: left;
    white-space: nowrap;
    display: block;
    float: left !important;
    font-size: 100%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-style: normal;
    line-height: 6px;
    font-weight: bolder;
    text-transform: none;
    position: relative;
    background-color: #F5F5F5;
    width: auto;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
    margin-top: -5%;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 95%;
    position: absolute;
}
/* 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
{


}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    color: #FFF;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    font-size: 100%;
    height: 100%;
    background-color: #3768A0;
    padding: 8px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{


}
/* 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-image: none;
    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(SpryMenuBarRightHover.gif);
    background-position: 95% 50%;
    background-repeat: no-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.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: none;
    background-position: 95% 50%;
    color: #021844;
    background-color: #FFF;
}
/* 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);
    float: left;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
}
`
3
Contributors
9
Replies
26
Views
4 Years
Discussion Span
Last Post by moregraphics
0

You're referring to the main menu at the top of page, under your banner image I presume? it doesn't show correctly in Chrome either.
The problem isn't with the spry menu itself, it is simply too long for area allocated to it and so it is wrapping. I'd combine two menu items, news and events for example so the menu isn't as wide.
Or widen your content area...

0

I agree with hericles. However, remember that you may also widen your menu area as well if the menu area is not directly rely on your content area.

0

In Dreamweaver the menu shows as shorter than the area (not as wide as the header and body). So I don't know why it views as too wide in the browser in IE or Chrome. It shows fine in Firefox as the perfect width. I had widened the header and body to 960 from 878, so the menu was showing as not wide enough in Firefox, I added a menu item (INFO) I will try taking out INFO and see if the menu shows the correct width. I will post again with my results. Thanks.

0

Okay, my boss wants to keep everything on the main menu. So we decided to change PHOTO GALLERY TO JUST "PHOTOS". Now it is viewing all on the same line in all browsers, but it is not wide enough. I've adjusted padding and margins where I think I should and it doesn't make it wider. I'm sure I'm just not changing something in the correct place. Any suggestions?

Chrome:
http://www.ofallonchamber.com/

IE:
http://ofallonchamber.com/

Firefox:
http://www.ofallonchamber.com/

ul.MenuBarHorizontal
{
    ;
    cursor: default;
    width: auto;
    white-space: nowrap;
    display: block;
    position: relative;
    list-style-type: none;
    top: 0;
    font-size: 100%;
    margin: 0px;
    float: none;
    height: 0;
    padding: 0px;
    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;
}
/* 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
{
    position: relative;
    text-align: left;
    cursor: default;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-weight: bolder;
    font-style: normal;
    font-size: 100%;
    white-space: nowrap;
    display: inline;
    clear: none;
    line-height: 6px;
    float: left;
    border: 2.4px outset #6688B5;
    height: auto;
    padding-top: 3px;
    padding-right: 4px;
    padding-bottom: 3px;
    padding-left: 3px;
    margin-top: 0px;
    margin-right: 2px;
    margin-bottom: 0px;
    margin-left: 0px;
}
/* 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;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: 1000em;
    float: left;

}
/* 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;
    top: 0px;
    float: left;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
    text-align: left;
    white-space: nowrap;
    display: block;
    float: left !important;
    font-size: 100%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-style: normal;
    line-height: 6px;
    font-weight: bolder;
    text-transform: none;
    position: relative;
    background-color: #F5F5F5;
    width: auto;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
    margin-top: -5%;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 95%;
    position: absolute;
}
/* 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
{


}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    color: #FFF;
    text-align: left;
    white-space: nowrap;
    text-decoration: none;
    font-size: 100%;
    height: 100%;
    background-color: #3768A0;
    padding: 8px;
    width: auto;
    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;
    margin-top: 0px;
    margin-right: 2px;
    margin-bottom: 0px;
    margin-left: 2px;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{


}
/* 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-image: none;
    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(SpryMenuBarRightHover.gif);
    background-position: 95% 50%;
    background-repeat: no-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.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: none;
    background-position: 95% 50%;
    color: #021844;
    background-color: #FFF;
}
/* 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);
    float: left;
    padding: 0px;
    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;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
}
0

The reason is that your list item does not automatically adjust its width to fill in the whole length of the menu area (table cell automatically does this).

Even you could find a correct width that fit one browser, it could still break in others because they have different element block concept (espeically with border width).

A solution may be to use JavaScript to adjust the size of your banner & content width to whatever browser it detects after the page is loaded. It is quite effective but would be difficult to maintain due to changes and differences in each browser. Also, clients must enable JavaScript or your page will look as its default set up (width 960px). Someone else may suggest a better solution for you.

0

Ok, I know what that is. For some reason the way you referred to it sounded like a program.

0

Can someone help me get my menu lined up again? I have no idea why it is too far to the left.

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

`

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
    cursor: default;
    width: auto;
    white-space: nowrap;
    display: inline;
    position: absolute;
    list-style-type: none;
    top: 298px;
    font-size: 100%;
    margin: 0px;
    float: left;
    height: auto;
    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;
    padding: 0px;
    right: auto;
    bottom: auto;
    left: 312px;
}
/* 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 
{
    position: absolute;
    text-align: left;
    cursor: default;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-weight: bolder;
    font-style: normal;
    font-size: 100%;
    white-space: nowrap;
    display: inline;
    clear: none;
    line-height: 6px;
    float: none;
    border: 0px outset #6688B5;
    height: auto;
    margin: 0px;
    padding: 3px;
    width: 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;
    z-index: 1020;
    cursor: default;
    width: auto;
    position: absolute;
    left: 1000em;
    float: none;

}
/* 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;
    top: 0px;
    float: left;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
    text-align: left;
    white-space: nowrap;
    display: block;
    float: none !important;
    font-size: 100%;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif, Biondi;
    font-style: normal;
    line-height: 6px;
    font-weight: bolder;
    text-transform: none;
    position: relative;
    background-color: #F5F5F5;
    width: auto;
    padding: 0px;
    margin: 0px;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
    margin-top: -5%;
    margin-right: 0%;
    margin-bottom: 0;
    margin-left: 95%;
    position: absolute;
    padding: 0px;
    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;
}
/* 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
{
    padding: 0px;
    margin: 0px;


}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    font-size: 100%;
    height: auto;
    background-color: #3768A0;
    width: auto;
    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;
    margin-top: 0px;
    margin-right: 3px;
    margin-bottom: 0px;
    margin-left: 2px;
    padding: 6.4px;
    position: relative;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{


}
/* 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-image: none;
    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(SpryMenuBarRightHover.gif);
    background-position: 95% 50%;
    background-repeat: no-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.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: none;
    background-position: 95% 50%;
    color: #021844;
    background-color: #FFF;
}
/* 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);
    padding: 0px;
    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;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
}

`

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.