...

View Full Version : CSS menu mouseover issues



mranster
06-08-2007, 07:39 PM
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

koyama
06-09-2007, 01:43 AM
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:


<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:


#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:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This one is causing your page to be rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html). Not good.

I recommend that you use this one instead:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

mranster
06-09-2007, 02:00 AM
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.

mranster
06-09-2007, 05:35 AM
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.

koyama
06-09-2007, 02:03 PM
Your menu is looking much better.

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:


.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;
}


<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 (http://developer.mozilla.org/en/docs/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.

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:


<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum