Weird z-index problem (images overlay dynamic menus)

Discussion in 'HTML' started by EnigmaticSource, Oct 5, 2007.

  1. 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.
     
    EnigmaticSource, Oct 5, 2007
    #1
    1. Advertising

  2. EnigmaticSource

    rf Guest

    "EnigmaticSource" <> wrote in message
    news:...
    > 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.

    --
    Richard.
     
    rf, Oct 5, 2007
    #2
    1. Advertising

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


    On Oct 5, 6:19 am, "rf" <> wrote:
    > "EnigmaticSource" <> wrote in message
    >
    > news:...
    >
    > > 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.
    >
    > --
    > Richard.
     
    EnigmaticSource, Oct 5, 2007
    #3
  4. EnigmaticSource

    rf Guest

    "EnigmaticSource" <> wrote in message
    news:...
    > 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.

    --
    Richard.
     
    rf, Oct 5, 2007
    #4
  5. 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.

    On Oct 5, 7:04 am, "rf" <> wrote:
    > "EnigmaticSource" <> wrote in message
    >
    > news:...
    >
    > > 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.
    >
    > --
    > Richard.
     
    EnigmaticSource, Oct 5, 2007
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian Lowe

    overlay text on uploaded picture

    Brian Lowe, Jun 21, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    661
    Brian Lowe
    Jun 24, 2004
  2. image overlay

    , Sep 9, 2005, in forum: Java
    Replies:
    1
    Views:
    539
    jan V
    Sep 9, 2005
  3. news.west.cox.net

    Select menus above flyout menus? help?

    news.west.cox.net, Dec 8, 2004, in forum: HTML
    Replies:
    8
    Views:
    808
  4. Andy

    Overlay Red X on jpeg images?

    Andy, Apr 7, 2004, in forum: Javascript
    Replies:
    5
    Views:
    142
  5. Tomasz Chmielewski

    sorting index-15, index-9, index-110 "the human way"?

    Tomasz Chmielewski, Mar 4, 2008, in forum: Perl Misc
    Replies:
    4
    Views:
    321
    Tomasz Chmielewski
    Mar 4, 2008
Loading...

Share This Page