Spry Vertical Menu Falls Down the Page in IE6
by Marc Sullivan
on
Jul 4, 2009 at 5:36:37 pm
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. */
/* 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;
}
/* 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;
}
/* 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%;
}
/* 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;
}
}
Re: Spry Vertical Menu Falls Down the Page in IE6 by Richard Williams on Jul 4, 2009 at 8:12:59 pm
lol... that was easily sorted!
Ok, i am unable to see IE6 form here. There is nothing wrong with your spry per say, that i am almost sure of. So, going on what you have posted, and using my powers of GUESSING, i think, the problem itself is something to do with the style sheets. Does the whole div jump down would you say?
I am guessing that the trigger is a width setting that is not set somewhere, and so when it is activated, the browser is left to interprut it itself. I have seen this a few times in IE6 using stlye sheets. I would try putting in actual width settings in the spry CSS to start with, rather than using auto width settings anywhere.
If this still does not work, check the other settings in your other style sheet. Still no joy, then post back and i'll have to check it myself from IE6
Re: Spry Vertical Menu Falls Down the Page in IE6 by Marc Sullivan on Jul 4, 2009 at 8:45:37 pm
Hey Richard,
Thanks for the assurances on the W3C. Thanks for your help, too.
I'm rather a newb and not sure which div you're referring to? If you mean the spry menu itself, yes it all drops. If you mean the left column, no, it stays in place.
I tried removing "width: auto;" from ul.MenuBarVertical with no success. This is the only auto width I see in Spry.
The page CSS has three containers, all fixed widths, and three columns, all fixed width to give a three-column page where the column lengths extend in unison. Column1 nests inside container1. Containers 2 and 3 nest inside container1, and columns 2 and 3 nest inside containers 2 and 3 respectively.
(This is the first from-scratch style sheet I have ever created, so it's feasible I may have made errors)
Let me know if you're going to use IE6 and I'll have the auto-detect redirect disabled on the index page?
Here's my stylesheet if you'd like to look it over:
Re: Spry Vertical Menu Falls Down the Page in IE6 by Richard Williams on Jul 4, 2009 at 9:36:08 pm
thanks man.
i don't need you to change anything, or disable the divert don't worry, and i can access all the other files too so no worries, i have already looked over them but i need to give it a bit more time.
Just one thing though, did you delete the width auto or did you give it a setting? I meant give it a setting of 180px or something rather than remove it
Re: Spry Vertical Menu Falls Down the Page in IE6 by Marc Sullivan on Jul 4, 2009 at 10:23:59 pm
Yeah, you are, and I'll attest to it.
Oh, the irony. Today is Independence Day here in America and I've been bailed out of trouble by a very generous Englishman. To top that off -- and I'm serious about this -- my great-great-great-great is reputed to have fired the first shot of what we call the Revolutionary War, while leading a raid on the arsenal at Fort William and Mary in Portsmouth, New Hampshire.
Times have changed, and today we can be best of friends.
Tell you the truth, I think he's spinning in his grave over what's become of this country. But that's politics, and not a subject for this forum. I refer you to the Zeitgeist movie, viewable at Google Videos.
Re: Spry Vertical Menu Falls Down the Page in IE6 by Richard Williams on Jul 4, 2009 at 11:38:56 pm
Dude, I'm SOOOOO ignorant.
Up until just now whilst googling it, i didn't even know that the American Independance was about Independance from the British Empire.
I'm so embarrassed, but enjoying the history lesson. Going to read up on a bit more. You are right that this forum is not for Political chat, but hey, its independance day, who's going to moan?
So tell me, is that why all bad guys in American Films have an English accent? :o)
Re: Spry Vertical Menu Falls Down the Page in IE6 by Marc Sullivan on Jul 5, 2009 at 12:00:10 am
Hmm. I hadn't noticed the thing about English Accents. Southern (US) accents, New Yawk accents, some German accents, a smattering of English accents amongst our villains. Probably the all-time best villain was Heath Ledger in the latest Batman film, and he had a generic American accent. You can, though, do a delightfully threatening sneeeer with an English accent. Don't you think?
We LOVE English accents over here. More and more news anchors here have English accents. You gain instant credibility if you have an English accent. It sounds so educated to us un-edur-cated 'Muricans. I, for one, am very attracted to women with English accents. Whoo-wee.
