15 replies [Last post]
Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

I am having issues with my menu I need it to overlay the text (be above) on this page and for the [email protected] link to work.

I tried using display:none instead of visibility:hidden but that did not work. If I try a z-index that will let the menu overlay the text but then FF sees that as masking and doesn't allow the email link to work.

What can I do here?

http://dev.kleidon.com/contact.asp

What is man that you should be mindful of him!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

FF and IE menu overlay issue

If you use visibility combine it with a z-index change. Beware that can get complex, as you need to alter the z-index at the level where the two conflicting elements have ancestors which are siblings.

The gold standard for vertical dropdown menus is suckerfish. If you hover over the third menu item "Gobioidei" you'll notice the dropdown covers some links in the text. When the submenu isn't there the links are clickable.

It uses alterations to the left offset value of the submenu to hide/show the submenu.

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

I saw that article about suckerfish, but it doesn't use images like have to use. Is there a way to do the suckerfish method and use images?

What is man that you should be mindful of him!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

FF and IE menu overlay issue

I shouldn't think using images would make any difference. The appear/disappear styles are on the <ul> element. What you do with the <li> or <a> elements is up to you.

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

I sure would like to see an example in action using images that have rollovers, or if you rollover it swaps an image out elsewhere on the page like here: http://dev.kleidon.com/portfolio_home.asp

What is man that you should be mindful of him!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

FF and IE menu overlay issue

I'm not sure what the images on the other part of the page have to do with this - thats handled by javascript. The grid_image is separate from the menu. There is nothing to stop you attaching the same javascript to the same menu item in a suckerfish menu (or any other menu).

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

aside from the grid image, I don't see how to get the rollover in the menu to work for each menu item. I'm just having a hard time understanding all of this. Sad

What is man that you should be mindful of him!

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

ok, here is what I have done, I made a test page so I can learn how to do this http://dev.kleidon.com/test.htm

The only issue I have is the space between the rollovers. How do I correct that?

What is man that you should be mindful of him!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

FF and IE menu overlay issue

You're still using visibility: hidden?

Control the margins and padding on the li element. There will be some default margin.

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

What should I use in lue of visibility:hidden? If I don't call this out the menu is always visible.

I tried fixing the spacing but it's not working. Can you help?

What is man that you should be mindful of him!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

FF and IE menu overlay issue

As I mentioned, right back at the top, Suckerfish uses offset left.

hidden: left: -9999px;
not hidden: left: 0;

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

I was looking at the source code for the suckerfish link you posted and I don't see those values anywhere on page I even did a search for them.

I tried your suggestion but I must not be doing something right.

What is man that you should be mindful of him!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

FF and IE menu overlay issue

Navarone wrote:
I was looking at the source code for the suckerfish link you posted and I don't see those values anywhere on page I even did a search for them.

Quote:
h1 {
height: 108px;
background: url(perciformes3.gif) bottom center no-repeat;
text-indent: -999em;
margin: 1em 0 0 0;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#scaffolding a {
text-decoration: none;
text-indent: -999em;
display: block;
height: 70px;
background: url(/images/hdlogo_flip2.gif) no-repeat;
background-position: 181px 0;
}

Verschwindende wrote:
  • CSS doesn't make pies

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

sorry... I trying to learn all this stuff, I was literally looking for the verbage

hidden: left: -9999px;
not hidden: left: 0;

if you would have said:
text-indent: -999em;
left: -999em;

I might have caught on to what you were wanting me to see.

Now that I see it, I still don't know how to use it. :oops:

What is man that you should be mindful of him!

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

I am not having any luck, I am not sure what to do! :?

maybe I'll try somewhere else. Crying

What is man that you should be mindful of him!

Navarone
Navarone's picture
Offline
Enthusiast
Akron, Ohio
Last seen: 14 years 36 weeks ago
Akron, Ohio
Timezone: GMT+5
Joined: 2005-11-29
Posts: 66
Points: 0

FF and IE menu overlay issue

ok, I made some progress and got this working in FF but I am having trouble getting my menu items to correctly space themselves on IE.

Any suggestions Shock

What is man that you should be mindful of him!