Vertical Spry Menu Bar - Width in IE - css

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.

Answer 1

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.