SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flyout menu ALMOST working

    I have a vertical flyout menu on my web site at http://www.bridgeaholics.com/test.html. The menu is taken from THE JAVASCRIPT ANTHOLOGY by Edwards & Adams, Site Point Press, 2006.

    All the menu items are links and some of them are themselves submenus.

    The html code is just a series of nested <ul>s and <li>s, and the css that styles the menu text color and text background when the mouse passes over a menu item is an ID (#hilinks) located in the linked style sheet, http:www.bridgeaholics.com/styles.css; in particular

    #hilinks a:hover {
    color : yellow;
    background-color : #003399;
    text-decoration : none;
    font-size : 75%;
    }

    This is applied to a <div> block that encloses the entire nested menu list as follows:

    <div class="topleft" id="hilinks">

    (The Class "topleft" positions the menu structure near the top left of the left column.)

    Now #hilinks works absolutely perfectly with Safari, Opera 9 and Foxfire 1.5.0.4. All these Mac browsers change the blue text and pale background of the menu links to yellow text and deep blue background when the mouse is over the links.

    Bizarely, IE for windows changes the text color to yellow correctly, but does NOT change the pale background of any menu item that has a submenu once an item has been visited. IE does, however, change the background to deep blue IF the menu item is a toplevel menu item and has no submenu nested below it.

    I am completely perplexed at how IE could correctly render the text color but not the background color, and then only sometimes fail to do it.

    Has somebody some suggestions for how to make IE behave consistently and change the background as I want? Yellow text on pale background is virtually unreadable, as you can see if you look at my test page at

    http://www.bridgeaholics.com/test.html

    Do note that the first time through the fly-out menu, it APPEARS to work correctly (go to about us/our products/spoons/dessert spoons/silver spoons). But the next time you try to go to the same item, the blue background no longer comes up, so I am left with yellow text on pale tan background, which is virtually unreadable.

    (http://www.bridgeaholics.com/vertical.css has been modified very slightly from the Edwards-Adams book, as the menu didnt work with the code from the book.)

  2. #2
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anybody help with this problem? Do you need more information? Thanks.

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not really seeing your problem. Would you mind explaining it in a bit more detail?

    By the way, I think you should be aware that you have at least one cross-browser compatibility issue concerning the width of the container in IE.

    James


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •