Laker,
Thx for posting this information on the superfish menu problem in IE.
I am having some issues in IE with my rendering of the menu system
(see http://avalon.unisonagency.com/ if you're curious). Hopefully the
a tag newline problem may help my situation. If you know of anything
else I might do to get the menu to work in IE, please forward the
info.
THANKS!
-Greg Franklin in Barcelona
On Apr 7, 9:03 pm, Laker Netman <laker.net...@gmail.com> wrote:
> 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 forSuperfish. 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
