locked
Drop Down Menus created in EW 4 Don't Work on AOL Browser RRS feed

  • Question

  • I did read through and did several searches on my problem in the various forums, and never found the same situation or an answer. 

    Here is my problem.  We have always designed our sites in Dreamweaver, but have a client who wanted us to use EW4 so they could perform maintenance when we were done.  We purchased EW4 and I'm actually pretty impressed with it so far.  However, we have had one major issue come up that I can't seem to find a way around.  I used the suggested articles from Microsoft on building CSS drop down menus.  Loved the articles, it went very smooth and works great--everywhere but IE7 and AOL.  Our clients really do want the drop down menus to work on AOL IE7 is not as much of an issue since most people have upgraded to 8 by now). 

    Is there something we can build into our code that will fix the compatibility issue?  When I run the compatibility report, this is the message it comes up with on the menu: 

    FrontPage Web Components sometimes have browser compatibility problems. Consider using other alternatives instead." and it refers to our includes line for the drop down menu.  Now...not sure if the problem is with the includes line, or with the menu itself, but the menu itself is pretty straightforward css.

    <!--webbot bot="Include" TAG="BODY" U-Include="_includes/menu.html" -->

    Need help!!!

    Monday, February 28, 2011 12:50 AM

Answers

  • woooooohoooooo!

    Changed the ul li ul li a style to position: relative and it FIXED THE PROBLEM!!!!  This is such a big relief!!  Thank you all for helping us work through, and it was also due to the thread at http://social.expression.microsoft.com/Forums/en-US/web/thread/401ecb31-d20c-4859-a95d-7ba97c7ca3a7

    So as much as it must seem a little futile sometimes, it really is such a huge help to have these forums.  I think it just helps to keep us change our focus because we can get stuck.

    Thank you all!

    • Marked as answer by micja Sunday, March 6, 2011 1:43 AM
    Sunday, March 6, 2011 1:42 AM

All replies

  • What article?  Post a link, otherwise we have no idea what menu you are using.

    Also, what browser are you talking about when you say "AOL"?

    The include has nothing to do with your issue.  That's a design time include, handled by EW, not by the server or browser.  The actual page the browser sees has all the markup from the include, and all that's left is the HTML comment <!--   --> about it, which browsers ignore.

    Monday, February 28, 2011 1:09 AM
  • Hi Kathy, thanks for replying.

    Followed these instructions as well as a video tutoria.  I believe this was the article http://expression.microsoft.com/en-us/dd279540.aspx however, it was a while back so it might not be the exact one.  I was using the tutorials here on the microsoft site.

    The web browser is AOL 9.5.

    The web site is at http://www.pokergives.org

    The drop downs work in Safari, Opera, FF, IE8, but not in AOL 9.5 which my client uses, and she says she knows "a lot of people who use it" so just having her switch isn't an option.

    Thanks for the help!

    Monday, February 28, 2011 2:38 AM
  • AOL has probably blocked that script. A lot of stuff doesn't work correctly on AOL for that reason. Consider using other alternatives instead.
    Monday, February 28, 2011 2:41 AM
  • Do you have any suggestions for alternative script?

     

    Monday, February 28, 2011 2:57 AM
  • Do you have any suggestions for alternative script?

     


    One that will work in Firefox. If the works there it will usually work in any browser.
    FWIW there is no such thing as an AOL borwser, AOL browser is a modified version of Internet Explorer.

     


    Expression Web MVP
    Monday, February 28, 2011 3:27 AM
  • Thanks.  Guess I will have to do more checking around.  The menu bar works great in Firefox.  I had tested the pages in IE, Firefox, Safari, Opera and Chrome, and it worked (works) perfectly in all of them.  It is only a problem for people accessing from what AOL lists as "AOL 9.5"...so as you say, it must be something they block.
    Monday, February 28, 2011 3:56 AM
  • I use Project Seven's css express menu though if you have any of their menu extensions for Dreamweaver you can use those  adding them to the page through the Dreamweaver interface. The client can than add or remove menu items to it unordered list in theHTML in Expression Web. Dreamweaver will understand EW DWT syntax though EW doesn't understand or update the Instance Editable syntax used by Dreamweaver MX and later versions.

     You will find many of the Pros on this forum use both applicationssince each is stronger than the other in certain areas


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Monday, February 28, 2011 5:39 AM
  • Looks like my only option is going to be to rewrite the menu.  css express looks like a good way to start.  Have to admit I was hoping I could alter what I have already put together, but sometimes building from scratch is faster than remodeling.
    Monday, February 28, 2011 10:07 PM
  • Looks like my only option is going to be to rewrite the menu.  css express looks like a good way to start.  Have to admit I was hoping I could alter what I have already put together, but sometimes building from scratch is faster than remodeling.

    If you decide to go with the CSS Express menu (good choice), and you want to eliminate the need to add the javascript fix for IE6, see my post in this thread about "Whatever:hover," a small (2.8kb) IE behavior file (.htc file) that adds support for the :hover pseudo-class on arbitrary elements to all versions of IE. You will then need no other javascript for the CSS Express menu to work for all browsers.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Monday, February 28, 2011 10:35 PM
  • Hi Paladyn,

    Like a goofball I asked a question about your reply in the thread you linked to.  I will repeat it here, if that's okay, so I can keep from hopping around.  I apologize for the dual post.

    So let me see if I understand this correctly?  Here is how I have our menu set up.  I created an html "menu" page with all the code on that html page for the drop down menus.  I then coded the actual pages I want the menus to show up on with includes for the menu.  It might be possible for me to place the csshover3.htc file in the root directory of the site, then simply add the code in the body tag of the "menu" html page:

    body {
       behavior: url("csshover3.htc");
       background-image:myGradient;
       font-size:100%;
       etc...
    }

    and this may direct the AOL version of IE (presumably 7) to perform or accept the hover (drop downs) behaviors for all the pages with the includes?

    Am I understanding this correctly?

    If that's the case, I would be pretty happy.  I am not anxious to rewrite the entire menu when it works so well everywhere except AOL--especially since there is not gaurantee that the new menu would fare any better.  I did, however, go to the P7 site and followed the tutorial on the page and never got the menu to work--in spite of basically copying and pasting it so I could get the process down.

    Thank you for taking time to deal with the questions of newbies like me.

    Michelle

    • Edited by micja Thursday, March 3, 2011 4:19 AM incomplete question
    Thursday, March 3, 2011 4:17 AM
  • This is one of those cases where trying it is faster than waiting for an answer, I would think.
    • Edited by KathyW2 Thursday, March 3, 2011 3:02 PM
    Thursday, March 3, 2011 6:17 AM
  • True, which is why I did go ahead and try it...and apparently xhtml didn't like it.  I was working in EW4 and added

    body {
       behavior: url("csshover3.htc");
       }

    and EW shows the error: "In xhtml 1.0 transitional the attribute 'url("csshover3.htc");' is not permitted in the body tag."

    I'm including the code for the menu in case anyone can see anything I can do to get around this problem.  The menu bar works everywhere except for AOL...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>navbar</title>
    <link href="drop-down.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body body style="width: 1000px">
    <ul>
    	<li><a href="../index.html">Home</a></li>
    	<li><a href="../donate.html">Donate</a>
    	<ul>
    		<li><a href="../challenge.html">The Challenge</a></li>
    		<li><a href="../donate.html">Donate Funds</a></li>
    	</ul></li>
    	<li><a href="../about.html">About</a><ul>
    		<li><a href="../mission.html">Mission</a></li>
    		<li><a href="../founders.html">Meet the Founders</a></li>
    		<li><a href="../board.html">Advisory Board</a></li>
    		<li><a href="../thank_you.html">Thank You</a></li>
    	</ul></li>
    	<li><a href="../charities.html">Charities</a><ul>
    		<li><a href="../more_charities.html">More Charities</a></li>
    	</ul></li>
    	<li><a href="../getinvolved.html">Get Involved</a><ul>
    		<li><a href="../donate.html">Donate</a></li>
    		<li><a href="../events.html">Events</a></li>
    		<li><a href="../natlpoker.html">National Poker Month</a></li>
    	</ul></li>
    	<li><a href="../news.html">News</a><ul>
    		<li><a href="../projects.html">Projects</a></li>
    		<li><a href="../gallery.html">Gallery</a></li>
    	</ul></li>
    	<li><a href="../contact.html">Contact</a></li>
    </ul>
    
    </body>
    
    </html>
    

     

    Thursday, March 3, 2011 6:34 AM
  • Presumably you added the code snippet to the stylesheet. If so, that is correct and the error message should be ignored. Whether it fixes the AOL problem I cannot answer.

    This line may also give problems:

    <body body style="width: 1000px">

    "body" is repeated - should only be there once.

    Also, going off topic, a 1000px width is likely to produce horizontal scroll bars for a significant number of users, such as those using 1024px (or smaller) width monitors. In my opinion, 970px is a better width.


    Ron Symonds
    Microsoft MVP (Expression Web)

    www.rxs-enterprises.org/fp
    Thursday, March 3, 2011 8:11 AM
  • Thanks Ron, sorry, I think I accidently added the second "body" in there when I was placing the code on the forum.  I checked and it isn't in the original pages.  I will ignore the error message and see what I come up with.  I agree with you on the size, we were somewhat locked in by the former designer's choices, this was mostly a redesign and some of the stuff the client wanted to keep. I like to keep most of ours down around 940.

    Friday, March 4, 2011 1:38 AM
  • I really thought we had this one.  I feel like I am sooo close, but not quite there.  Here is the freaky part.  I took your advice, Scott, and used the Whatever:hover .htc file first on a duplicate menu on a test site, and viola! it worked!  Pulled up the AOL "browser" and pulled up the menu and the drop downs all worked!  I was so excited because I then followed the exact same procedure and put the code into the site menu, uploaded, and still no drop downs.  I even put the body url coding in both the dropdown.css and the main.css in case it would pick up from one and not the other...no change.  Just don't understand why it works on the test site and not the real site.

    test site:  droznik.com/menu.html

    real site: pokergives.org

    This is just so frustrating. I am stumped.  I put the code in the main.css file, no change.  Put it in the dropdown.css, no change.  Put it on an individual page, no change.

    Knowing that that dropdowns will work with the code, but only when it is on a page by itself, then it almost has to be something I have on my pages themselves to keep the drop downs from coming down in AOL.  Evidently it is something that doesn't affect other browsers, but does bother whatever it is (IE7 emulation?) AOL uses.

    I appreciate all the help I have received so far...

    Friday, March 4, 2011 7:32 AM
  • I suspect that this is a pathing issue. The example given, behavior: url("csshover3.htc"); is for the behavior file located in the same folder as the referencing document. If the reference is in an embedded <head> style section, the behavior file should be in the same folder as the HTML page.

    If it is referenced from an external style sheet, contained in a folder named "/CSS," then the behavior file should also be placed in /CSS for that path to resolve, since paths in CSS are relative to the CSS, not the HTML (they are only one and the same if the CSS is embedded in the HTML).

    For reasons known only to you, you have the path to the behavior file in your CSS as "nav_bar/nav_bar/csshover3.htc". GOK where on earth that folder is located, because it certainly isn't on your server. When you enter http://pokergives.org/nav_bar/nav_bar/csshover3.htc into the address line (which is what that URL resolves to from the location of the CSS file), you get a 404 error.

    Resolve your pathing issues and the behavior will work just fine, just as it did on your test page. Since your "drop-down.css" file is located in the root with the HTML pages, make sure that the "csshover3.htc" file is also located there, then change the URL in your CSS file like so

    body {
       behavior: url("nav_bar/nav_bar/csshover3.htc");
       behavior: url("csshover3.htc");
    }

    That URL will correctly resolve to the actual location of the behavior, and the menu will work. I do not have that POS AOL browser installed, and categorically refuse to install it, so I have not tested this. However, I am confident that it will work for you. Give it a shot and report back...  ;-)

    cheers,
    scott

    P.S. Don't include the strikethrough line above in your CSS. It's just there to show you which line in your drop-down.css file is to be changed.
    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Friday, March 4, 2011 4:27 PM
  • Scott, I appreciate so much the patience you have with me on this.  I tried it, and unfortunately still doesn't resolve.  I am going to show the drop_down.css, and see if maybe it is just not in good order?

    I think it had the "navbar" part in the path because originally I had the menu.html and the drop-down.css style sheet in a file folder named "nav_bar".  The night I was trying your suggestions I wondered if having it in a subfolder on the site mite be the reason it wasn't working (though I did make sure--like you said--that the csshover3.htc file was in the root of the site) so I moved the menu.html and drop-down.css files into the root as well, and neglected to change the path in the style sheet. 

    When that didn't work, I then tried adding the behavior line to the main.css to see if it picked it up there.  No luck.  Tonight, I crossed my fingers and hoped you caught the problem, and fixed the path in both places.  Still no luck.  Took it off of the main.css to make sure duplication wasn't causing a problem.  Again no luck.

    I am betting it is something simple staring me in the face, and I'm sure I will feel completely stupid when (I'm being optimistic) it becomes obviousl...but so far...not getting lucky. 

    I understand if you can't keep looking at it, but I want you to know I do appreciate the efforts.  I'm still working on it.

    body {
      behavior: url("csshover3.htc");
    }
    ul {
    	padding: 0px;
    	margin: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	text-decoration: none;
    	color: #FFFFFF;
    }
    ul li {
    	display: inline;
    	float: left;
    	width: 142px;
    	list-style-type: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12;
    	font-weight: bold;
    	background-color: #FFFFFF;
    	text-align: center;
    	color: #FFFFFF;
    }
    ul li a {
    	background-color: #216DB5;
    	color: #FFFFFF;
    	text-decoration: none;
    	line-height: 30px;
    	width: 142px;
    	display: block;
    }
    ul li a:link {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: normal;
    	text-decoration: none;
    	color: #FFFFFF;
    }
    ul li a:visited {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: normal;
    	text-decoration: none;
    	color: #FFFFFF
    }
    ul li a:hover {
    	background-color: #0092F7;
    }
    ul li ul li a {
    	background-color: #0092F7;
    }
    ul li ul li a:hover {
    	background-color: #085184;
    	color: #FFFFFF;
    }
    ul li ul {
    	visibility: hidden;
    }
    ul li:hover ul {
    	visibility: visible;
    }
    
    
    Saturday, March 5, 2011 12:11 AM
  • OK, since I can't actually see your folder structure, I can only suggest one other thing. I just checked, and csshover3.htc is in fact located in your site root. Therefore, to eliminate any issues of pathing that may exist, create an embedded <style> section in the <head> of your home page, like so

    <style type="text/css">

    body {
       behavior: url("csshover3.htc");
    }

    </style>

    Or, just add the body rule to an existing style section if one exists.

    If that doesn't get it, then your issue is not with early IE's lack of support for :hover on arbitrary elements. You have tested the behavior successfully, and I have tested its efficacy with a test page (though not in AOL) displayed in the IEs.

    In that case, there is a cause unknown for the problem that you're having, and since it seems only to be observable in AOL, an application and browser that I will have nothing to do with, I cannot troubleshoot and test any further. I hope that the suggestion above resolves the issue, but if not, good luck. There's not much more I can do.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Saturday, March 5, 2011 2:18 AM
  • Hi Scott, I understand completely. 

    Just to report for the sake of everyone's information--it is actually not working in IE7 either...so rather than just being an AOL problem, I get the same results in IE7. 

    If I test the menu.html in IE7 by itself, not as a part of any pages, the menu works fine (with your whatever:hover code embedded, thanks). 

    The menu.html is put onto the various pages by using the EW4 includes.  When I run a compatibility check for IE7 on the pages, ever page comes up with the error: "FrontPage Web Components sometimes have browser compatibility problems. Consider using alternatives instead."

    The line of code referred to for the compatibility issue is

    <!--webbot bot="Include" TAG="BODY" U-Include="_includes/menu.html" -->

    which is the line of code created when I use EW4 to place the "includes" for the menu.html.

    Is there a way to hand code the includes element that would be more compatible for IE7? 

    You can see the menu by itself at www.pokergives.org/menu.html and it works fine in IE7

    but as part of a page www.pokergives.org it doesn't work in IE7 (and therefore not in AOL)

    Thanks,

    Michelle

    Saturday, March 5, 2011 10:50 PM
  • I've already told you that error means nothing.  It's just looking at the "webbot" word and spitting out a generic warning.  This is NOT a server side webot.  As I said before - I'll say it again - the page the server sees contains only your regular page content, the included content, and HTML comments which are ignored.  Test this yourself:  Outside of EW, open one of the pages that uses an include with Notepad.  Look what's in it.  EW doesn't show you the inclulded content in Code View because you are not supposed to edit the include from the pages it's used in, but it's there.

    Don't let this red herring put you down a wasted path.

     

    And, since "If I test the menu.html in IE7 by itself, not as a part of any pages, the menu works fine (with your whatever:hover code embedded, thanks). "  you have something in your page styles that conflicts with the menu if it doesn't work in your pages.

    If you can't spot it, use trial and error:  Start with the page that works, and, piece by piece, add your site content and styling, previewing in IE7 every time.  When it stops working, you've added the conflicting style and can narrow it down.

    Saturday, March 5, 2011 11:26 PM
  • Thanks Kathy, I am going to do some of that today. What a process.

    On a side note, I ran a W3C validation, and it came back with an error: Property behavior doesn't exist : url("csshover3.htc") url("csshover3.htc")

    Yet, as Scott said, the csshover3.htc IS in my site root...not sure what that means, but it is interesting.

    Back to rebuilding piece by piece

    Sunday, March 6, 2011 12:42 AM
  • Behaviors are Microsoft-proprietary, and only work in Internet Explorer. Naturally, being non-standard, the validator flags it. Ignore it. You already know it's non-standard. Validation is a tool, not a religion. It's very handy for catching problems and troubleshooting, but occasionally flags things that are immaterial, or that are beyond your control (e.g. errors in third-party elements; the BBB Online icon code doesn't validate, for example).

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Sunday, March 6, 2011 1:04 AM
  • I think that web design is the new mystery writing. Deconstruction of the "crime" to figure out who is the culprit.

    So, I thought I might try Kathy's idea in reverse first.  I copied one of the pages and started removing elements, divs, etc from the page, one by one, uploading, testing in IE7.  When I got down to where the only thing left was the footer, I could see what is happening.  The drop downs are actually operating, but they are falling behind anything below the navbar.

    www.pokergives.org/nav.html

    I've tried auto, inherit, and numbers from 1 to 100 in the z-index, and it still falls behind the footer.  I've applied the different z-index settings first to the nav bar and when that didn't work, applied them to the footer.  The footer is another "includes" page, but theoretically that shouldn't matter because it is actually the div containing the footer that it is falling behind.

    And Scott, thanks for the confirmation for me on the validator...I wasn't sure.

    Sunday, March 6, 2011 1:31 AM
  • woooooohoooooo!

    Changed the ul li ul li a style to position: relative and it FIXED THE PROBLEM!!!!  This is such a big relief!!  Thank you all for helping us work through, and it was also due to the thread at http://social.expression.microsoft.com/Forums/en-US/web/thread/401ecb31-d20c-4859-a95d-7ba97c7ca3a7

    So as much as it must seem a little futile sometimes, it really is such a huge help to have these forums.  I think it just helps to keep us change our focus because we can get stuck.

    Thank you all!

    • Marked as answer by micja Sunday, March 6, 2011 1:43 AM
    Sunday, March 6, 2011 1:42 AM
  • Kathy thanks for the detective work and suggestions.  The deconstruction method worked great to show me what was actually ocurring.  I posted the answer below, but wanted to thank you for your suggestions.
    Sunday, March 6, 2011 2:16 AM