4 replies [Last post]
d-jay
Offline
Regular
Adelaide
Last seen: 9 years 20 weeks ago
Adelaide
Timezone: GMT+9.5
Joined: 2005-07-11
Posts: 12
Points: 0

NOTE: this part has been solved. Please see post below titled "Revised Code..."

I have a problem with a menu bar I am trying to get working, I have looked around the internet and this forum and fiddled around with it for a few days. I could easily have missed something and apologise if there is a similar problem up here.

The menu bar works fine in Firefox, but in IE when I rollover the first tier of the menu and try to go to the links in the second tier I can't.

If I remove the padding on the second tier links (#nav li ul) then I can rollover them with my mouse, however I would like the second tier to be lower down.

Can anyone suggest the reason why in IE it doesn't work.
Maybe there is a better way to do this?

Files are attached.

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 6 years 29 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Menu bar padding difference between IE and Firefox?

is this a suckerfish menu??

As far as I know IE doesn't support pseudo:hover on any elements except for the a element.

One time I did the suckerfish tutorial and you had to include a bit of javascript to make it work in IE because if this problem.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 9 years 25 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

Menu bar padding difference between IE and Firefox?

Unsuccessful in re-creating your situation using your code, however, it sounds like you want to position level two menu items something like this:

http://www.positioniseverything.net/css-dropdowns.html

Take a look at the above and see whether the authors' description of "sticky hover zones" covers your requirements.

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop

d-jay
Offline
Regular
Adelaide
Last seen: 9 years 20 weeks ago
Adelaide
Timezone: GMT+9.5
Joined: 2005-07-11
Posts: 12
Points: 0

Menu bar padding difference between IE and Firefox?

Yes it is based on the suckerfish menus.

I have it set up with the css in a seperate file from the html.

There is a javascript file linked too (see below).

I changed the background to black in the above example, so you can see the menu items.

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

d-jay
Offline
Regular
Adelaide
Last seen: 9 years 20 weeks ago
Adelaide
Timezone: GMT+9.5
Joined: 2005-07-11
Posts: 12
Points: 0

Revised Code...

The sticky hover zones are interesting, however i'm not sure that it fixes the problem... I managed to solve it another way:

I have made the images above and below the bar to appear as the background of a div, this now (with some other tweaks) allows the dropdowns to appear in IE.

My new problem is:
This page displays fine in firefox, however in IE it produces a larger gap between the menu bar and the content area.
Also in IE5.5 you are unable to rollover the dropdowns, however it is possible in IE5 and IE6... wierd

(Oh and in Opera the dropdowns are vertical, still gotta work on this)

Can anyone figure out how to reduce the gap without affecting the operation of the dropdowns, and the appearance of the menu bar?

The images and code are attached for convenience. (Images should be placed in the same folder as the .htm file).