Sent by Akins, Chris on 28 February 2005 14:02
Alright, here comes a real challenge - at least for me. Read carefully,
as it's involved, but I say "thanks" in advance to anyone who can offer
insight.
This issue concerns IE on the PC (what else) which the project is geared
toward. The page works as intended in Firefox and Safari on the Mac, my
main test environment.
Page and CSS are here:
www.springfieldmogov.org/Site/index2.html
www.springfieldmogov.org/Site/images/styles.css
I'm using the Auto Layers behavior on the main buttons on this page to show
the pop-up menus. As the Auto Layers tutorial page says, one must also
apply the behavior to surrounding elements in case the user slides off the
trigger without moving over another trigger. So, on my page, I applied the
Auto Layer behavior to not only the 5 buttons, but also the image slice
above "Getting Started", below "Real Event" and between "Table of Contents"
and "Real Event."
I also needed to apply the Auto Layers behavior to something in case the
user slides the mouse off to the right of each button. No problem, I just
applied it to the "col1" div which holds the welcome text and photo.
Everything works great this way, except in IE PC. In that browser the pop-up
menus only stay open as long as the mouse is actually over the text of the
<a> tags unless (get this) there is no content underneath the link area.
This is somewhat hard to describe, but you can see what I'm up against if
you do the following carefully:
Mouse over the "Exercise" button and SLOWLY move the pointer over the word
"Anthrax" then continue slowly to the right. The menu will disappear as soon
as it gets off the last letter in the word.
Now mouse over the "Exercise" button and slide the pointer onto the pop-up
menu but keep it near the left edge of the menu so you can move down to the
"Signs" option. Once on "Signs" move the pointer slowly to the right and
notice the menu DOES NOT go away when you get to the right of the word. The
hover effect goes away (which is another issue I'd like to solve too), but
the menu stays put.
The same thing happens on any pop-ups that extend over the photo at the
bottom of the page. As long as the pointer is on top of the actual text of
the link, the menu stays open, but if the pointer comes off the link text
AND there happens to be content under the menu, then the menu goes away.
This means that the user can't move between menu items if they are over an
area that has ANY content underneath.
Is there any way around this that anyone can think of? I've tried adding
width and/or height declarations to the CSS for the <a> tags, but that
didn't solve the problem and actually introduced other problems. I tried
wrapping the menu div in another div that had the Auto Layers behavior set
to show the menu div, thinking that might override the effect, but that
didn't work. I also tried playing with the z-index on the menu div, but
that didn't work.
One response on the Project VII CSS forum suggested this at the end of my
head section:
<!--[if IE 6]>
<style>
..popMenu li a {height: 1em;}
</style>
<![endif]-->
That page can be seen at: www.springfieldmogov.org/Site/index.html
It does the same as adding width or height declarations to the <a> in the
CSS itself, which I've already tried. The first two elements now act like
block, but only those, and the border between them is now gone.
Any other ideas?
I apologize that this is so long, but wanted to give full details of the
complex problem and what I've tried.
This project is due very soon, and I just don't know how to solve this one.
Not sure if it's more CSS I need somewhere or some other implementation of
the behavior.
Any help is appreciated.
Chris
--
Christopher Akins
City of Springfield, MO-Public Information Office
www.springfieldmogov.org
The box said "Windows 2000 or better. So I bought a Mac!"
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/