Vertical Spry Menu Bar - Width in IE

Question

I am working on a website in Dreamweaver and I am somewhat of a beginner to some aspects of web design.

I have a vertical Spry Menu Bar running along the left side of my page that is working fine in most browsers, except good old internet explorer. In most browsers, the items in the menu bar will fit to the width of the menu bar, but in internet explorer, the items are trimmed down to the size of the word they contain. In some situation they are trimmed so much that two menu items are on the same line. The same thing is happening for submenus as well.

Here is the site: http://www.lakeathleticboosterclub.com/ Go ahead and test it out for yourself in case I wasn't describing the problem very well, and here is the CSS that I am working with.

@charset "UTF-8";

/* SpryMenuBarVertical.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, a fixed width box with no margin 
or padding */
ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
}
/* 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: auto;
}
/* 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
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
left: -1000em;
top: 0;
width: auto;
}
/* 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
{
}

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

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: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
}
/* 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
{
background-color: #33C;
color: #FFF;
}

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

 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(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.MenuBarVertical 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.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;
}
}

Any help would be greatly appreciated.

Hello. My first guess: add `display: block;` or even `width: 100%` to `ul.MenuBarVertical li {...}` I have a feeling those elements are collapsing. — Steve Adams, Nov 25 '11 at 22:23
That worked quite well! I added it to the submenu ul.MenuBarVertical ul and it is working fine as you can see on the site. The one thing is though, longer words still wrap to make a second line on one submenu. Any idea there? — Ross Hays, Nov 26 '11 at 01:33
that's a tough call. Are the lines wrapping early? There's always the option of preventing wraps (`white-space: nowrap;` on the li's) but that can cause issues when you actually want the text to wrap. I suppose if you don't expect to need wrapping, nowrap may be an easy solution for now. EDIT: I just checked in IE. I see your issue. I'll post the solution momentarily! — Steve Adams, Nov 26 '11 at 04:40

score 0 · Accepted Answer · answered Nov 26 '11 at 05:03

Okay, so it seems you need to set ul.MenuBarVertical to have a width that will fill its container:

ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 100%;
}

However, the sidebar has no width either so now we need to add:

.sidebar1 {
    float: left;
    width: 218px; <-- This is changed
    background: #151B8D;
    padding-bottom: 10px;
    color: #fff;
}

And then that will screw up everything until we change this:

.content {
    padding: 10px 0;
    width: 790px; <-- Explicit width
    float: right; <-- Should make things a little more predictable
}

Since it doesn't actually have an explicit width, the rendered dimension of your sidebar depends entirely on how the browser decides to size everything. In IE, it just doesn't work out well. Using this method should do the trick!

Also, for posterity, here is the original fix from my comment:

add display: block; or even width: 100% to ul.MenuBarVertical li {...}

If this causes strange behaviour in the main container, it's likely due to content wrapping issues arising from using floats. You can resolve that with setting `overflow: hidden' to .container. It triggers browsers, including IE, to recognize the dimensions of floated content and wraps accordingly.

Hope this helps! If it's not quite there after this, let me know and I'll see if I can determine the issue.

I will give this a try tomorrow when I get back to my work computer and let you know. Thank you in advance, though. — Ross Hays, Nov 26 '11 at 05:23

Vertical Spry Menu Bar - Width in IE

1 Answers1