On Apr 7, 10:52 am, Laker Netman <laker.net...@gmail.com> wrote:
> I am working on a vertical, AJAX-produced dynamic menu that will has
> two levels of flyout sub menus.
>
> So far the menu works as expected in Firefox 3.0.8 and Safari 3.2.2,
> both on Windows, but not in IE7. The issue I'm dealing with is that
> the sub menus do not appear next to the higher level menu as they
> should. Instead the pop up "all over the place". Sorry to be vague,
> but there doesn't appear to be any pattern. Some sub menus overlap
> with the parent menu, some appear to the right with a wide gap (which
> varies from menu choice to menu choice) and vertically the sub menus
> start anywhere from the top of the screen to somewhere outside of the
> visible area. Some sub menu even have some gaps between groups on the
> list. That is choices A, B and C appear together, then a vertical gap
> of 50 or 60 pixels, followed by D, E, and F.
>
> Here is the CSS I'm [currently] using:
> #nav {
> position: relative;
> margin: 0px;
> padding: 0px;
> top: 126px;
> left: 2px;
> font-size: 10px;
>
> }
>
> /* Vertical menu */
> #nav ul { /* all lists */
> padding: 0px;
> margin: 0px;
> list-style: none;
> width: 148px;
> z-index: 5;
> }
>
> #nav li { /* all list items */
> border: none;
> position: relative;
> float: left;
> line-height: 27px;
> margin-bottom: -1px;
> width: 143px;
> height: 28px;
> }
>
> #nav li ul { /* second-level lists */
> position: absolute;
> padding: 0px;
> left: -999em;
> margin-left: 100px;
> margin-top: -50px;
> }
>
> #nav li ul ul { /* third-and-above-level lists */
> left: -999em;
> margin-top: -20px;
> }
>
> #nav li a {
> width: 135px;
> w\idth: 135px;
> display: block;
> color: white;
> font-weight: bold;
> text-decoration: none;
> background: url(/images/buttonOff.png);
> padding: 0 0.5em;
> }
>
> #nav li a:hover {
> color: black;
> background: url(/images/buttonHover.png);
> }
>
> #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul,
> #nav li.sfhover ul ul ul {
> left: -999em;
> }
>
> #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
> li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /*
> lists nested under hovered list items */
> left: auto;
> }
>
> /
> *****************************************************************************************************/
>
> And my Jquery call:
> $("ul#nav").superfish({
> animation: {height:'show'},
> dropShadows: false,
> delay: 1200
> });
>
> I have tried a variety of changes to the CSS, however nothing improves
> the situation in IE, and just ends up breaking things in Firefox and
> Safari.
>
> I'd appreciate any help on this issue. Sorry, I don't have a web-
> facing URL available, but I hope my explanation has been clear enough.
>
> Thanks,
> Laker
Okay, lucky me, I get to answer my own question :)
(First, one thing I neglected to mention originally: the page is
rendering in standards-complaint mode in all browsers using HTML 4
"Strict".)
It appears to be an issue with IE and how the CFscript is generating
the unordered list for Superfish. I had to re-write a portion of the
ColdFusion to close the anchors used as menu titles on the same line
as they were generated. Here's an example:
<ul id="nav">
<li><a href="">Learning Aids</a>
<ul>
<li><a href="/items.cfm/LearningKits">Learning Kits</a></li>
<li><a href="/items.cfm/booksAndVideos">Books &
Videos</a></li>
</ul></li><li>
WORKS FINE, HOWEVER
<ul id="nav" class="qmmc">
<li><a href="">Learning Aids
</a><ul>
<li><a href="/items.cfm/LearningKits">Learning Kits
</a></li><li><a href="/items.cfm/booksAndVideos">Books &
Videos</a></li>
</ul></li><li>
DOES NOT, even though it's syntactically identical....
Cheers,
Laker
