Weird z-index problem (images overlay dynamic menus)

  • Thread starter EnigmaticSource
  • Start date
E

EnigmaticSource

Currently, I am designing a site using CSS driven vertical menus, it
works well in everything but MSIE. The menus seem to work well
enough, except that they float behind the images, but above the text.
The problem does not occur in Firefox, Konqueror, or Opera. I'm a bit
lost for what the cause could be.

Demonstration URL: http://delta.teamcenturion.com

Thanks in advance for the help.

-- Mark C. Roduner, Jr.
 
R

rf

EnigmaticSource said:
Currently, I am designing a site using CSS driven vertical menus, it
works well in everything but MSIE.

You can't really call it a CSS menu in IE as you are using javascript (in a
htc) to "drive" it. Without javascript the menu is invisible.
The menus seem to work well
enough, except that they float behind the images, but above the text.
The problem does not occur in Firefox, Konqueror, or Opera. I'm a bit
lost for what the cause could be.

Try z-index: 99 on both the ul containing the menu *and* the li that
contains that ul.
 
E

EnigmaticSource

Thanks, it worked nicely. Oh and good call for spotting me cheating
with the .htc It's the only way I could get my code to look halfway
pretty and make it load in IE6 at all.
 
R

rf

EnigmaticSource said:
Thanks, it worked nicely. Oh and good call for spotting me cheating
with the .htc It's the only way I could get my code to look halfway
pretty and make it load in IE6 at all.

There *is* another way.

It involves using some conditional comments to enclose the dropdown <ul> in
a table that is stuck inside an <a>, for IE6 and below only. Other browsers
see an <a> and a <ul> inside a <li>, with the hover applied to the <li>.

Of course a table inside an <a> is not actually valid but then IE is not
actually a valid browser so I don't mind spitting invalid HTML at it. It
works and that is enough. No other browser sees the invalid HTML anyway.

IE5.x also gets a few of its own CSS hacks to make it behave.

I have one myself that I'm refurbising (so it adjusts itself to the users
font face and size, plus a few other things). It'll be ready for display in
about a week if you are interested. 100% CSS (no javascript anywhere).
Tested in IE5.5, IE6, IE7, Firefox, Opera and Windows Safari. Should work in
most other browsers as well. Plus it's completely search engine friendly.
 
E

EnigmaticSource

Sounds like a pain to generate programmatically, but I'm always
interested in new techniques. I just _hate_ having to write hacks
into my codebase because someone at Microsoft decided that standards
don't matter. I just wish for the day when there is a _clean_ way to
do anything the standards allow.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top