Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS menu mouseover issues

    Hi everyone,

    I wonder if someone would be willing to look at this and tell me where I'm going wrong.

    It is a two-level horizontal CSS/javascript menu. The upper level has a background image to appear behind every menu (span) item when you mouseover it, and a javascript event makes the related submenu items appear.

    I've done this a million times in all sorts of ways, and this is the closest I've come to having it be like I want.

    MY CURRENT PROBLEM:
    Try sliding your cursor along the submenu items. Sometimes they function smoothly, but other times the behavior from the upper menu will be triggered instead.

    So for example, if you were triggering the "web designs" submenu, and trying to get to "portfolio" below it, you couldn't because the menu would jump to the submenu for "web hosting."

    http://www.antheliadesigns.com/getdivright.html


    I really appreciate any feedback!
    Miranda

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by mranster View Post
    So for example, if you were triggering the "web designs" submenu, and trying to get to "portfolio" below it, you couldn't because the menu would jump to the submenu for "web hosting."
    Try to temporarily add the red part to see the problem:
    Code:
    <span class="upnav"><a href="#" style="background: red;"
     onmouseover="toggle_visibility('webhosting');">Web<br>Hosting</a></span>
    Your anchor elements are much too large due a mistake in your style sheet:
    Code:
    #menu, #menu a	{
    		height: 6em;
    		text-align: center;
    		font-family: Georgia, Palatino, serif;
    		color: #330000;
    		font-size: 1.2em;
    		font-variant: small-caps;
    }
    .upnav, .upnav a {
    		float: left;
    		width: 7.5em;
    		padding-left: 1em;
    		height: 2em;
    		text-decoration: none;
    }
    Generally, using some temporary background color is a good way to identify problems like this.

    As a side note, you have specified this document type:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    This one is causing your page to be rendered in quirks mode. Not good.

    I recommend that you use this one instead:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    THANKYOU! I will try this.

    The height declaration in my menu, menu a style is there to keep the menu box from changing sizes. Without some height there, the menu first loads only tall enough for the first tier of menu items, and then suddenly expands once the behavior triggers the second tier.

    Any suggestions for how to achieve both goals? The menu box a constant size and the link targets discreet?

    Thank you again for your suggestions. I will work with these.

  • #4
    New Coder
    Join Date
    Jun 2007
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, koyama! Using your suggestions, I am now at this, which is exactly what I wanted except for some work I still need to do on my graphics.

    http://www.antheliadesigns.com/getdivright.html

    I did try changing my doctype, but for some reason, that forces the background image in my hover items to double.

    http://www.antheliadesigns.com/getdivrightstrict.html

    So maybe I'm just not ready for StrictTime yet.

    Thanks a bunch! I've been working on this for days; it's the first menu I ever tried writing the CSS for from scratch. I was going nuts.

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Your menu is looking much better.
    Quote Originally Posted by mranster View Post
    I did try changing my doctype, but for some reason, that forces the background image in my hover items to double.
    That is because your styles are saying that on hover there should a background image for both the span element and the anchor element. Look what you have:
    Code:
    .upnav:hover, .upnav a:hover {
    		height: 3.15em;
    		float: left;
    		width: 7.5em;
    		padding-left: 1em;
    		background: url(images/css_images/menu_fandango.gif);
    		background-repeat: no-repeat;
    		background-position: top center;
    		text-decoration: none;
    		color: #330000;
    		font-size: 1.2em;
    }
    Code:
    <span class="upnav"><a href="#" onmouseover="toggle_visibility('webdesign');" > Web<br>Design</a></span>
    Then why is there no “doubling” of the background image without the doctype in Firefox? That is because in Firefox's quirk mode, :hover styles are disabled in certain cases: Mozilla Quirks Mode Behavior. Quote from that source:
    The :hover pseudoclass will only be applied to links, images, and form controls, unless the selector includes tag names, ids, or attributes.
    Quote Originally Posted by mranster View Post
    So maybe I'm just not ready for StrictTime yet.
    I would recommend that you stick with the strict document type. Alternatively, you could use a transitional document type which is still better than “no document type” because it at least does not trigger quirks mode:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    Also, don't forget to validate your HTML as well as your CSS. It is not always easy to spot the cause of an error, but start fixing the errors you can, then repost a link to your page and I'm sure someone here can help you with the remaining errors.


  •  

    Posting Permissions

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