Hi and thanks in advance for any help you folks can give me. This is a fantastic forum and I've found a lot of cool information on it.
http://mind-body-spirit-central.com/ is the first website I've done from scratch, using Dreamweaver CS4. Dreamweaver finds no browser compatibility issues, and the vertical spry menu in the left column works perfectly in Firefox, Opera, Safari, IE7, IE8, and K-Meleon.
However, when viewing the pages in IE6, waving your mouse over the menu bar causes it to drop down the page, and in that position links disappear as you mouse over them. You can't use the menu for navigation because of these problems. As a result I've had to put code on the pages to auto-detect pre-IE7 versions of IE and direct those visitors to a page recommending IE upgrades as well as other browsers. I would really like to know, though, what's causing this and how to fix it so visitors aren't inconvenienced.
I made width and cosmetic changes to the menu that I don't think should affect it. But, hey, what do I know? I also put a left margin in the ul.MenuBarVertical to center the menu directly under the graphic above it. I've zeroed that margin and tested in IE6 and the problem's still there. The W3C CSS Validator lists five Spry CSS errors and one warning, all on lines I haven't touched. I'm not sure how to fix those, either.
My hair isn't growing back nearly as fast as I'm pulling it out. Can anyone help? Thanks in advance if you can. Hope the CSS is sufficient for finding the problem:
@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
{
padding: 0;
list-style-type: none;
font-size: 12px;
cursor: default;
width: auto;
font-weight: bold;
margin-left: 14px;
font-family: Verdana, Geneva, 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 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: 180px;
float: left;
}
/* 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%;
z-index: 1020;
cursor: default;
width: 180px;
position: absolute;
left: -1000em;
float: none;
}
/* 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: 180px;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 0px 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: #FFF;
padding: 0.5em 0.75em;
color: #4a5185;
text-decoration: none;
text-align: left;
}
/* 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;
text-align: left;
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
}
/* 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%;
text-align: left;
}
/* 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;
float: left;
background: #FFF;
}
}
