IE hiding drop down submenus

Discussion in 'HTML' started by Shelly, Nov 6, 2007.

  1. Shelly

    Shelly Guest

    In IE (7) the drop down submenus are hiding behind the element below it.
    They work fine in Firefox and Opera. I researched this issue on the web and
    found suggestions to state position and z-index in the css file. I already
    had position: relavive and a z-index set as high as 500. I changed to
    position: absolute, but that didn't help.

    Here are the important parts of the css file and style in the hope that
    someone can see something. The submenu is class item2 and the next element
    is item-03. I've include snippets of code, css and in-line style.

    menu code snippet:
    ==============
    <td>
    <a class="item1" href="javascript:void(0);">Top-level Item</a>
    <div class="section">
    <a class="item2" href="#"> Sub-level Item 1</a>

    <a class="item2" href="#"> Sub-level Item 2</a>
    </div>
    </td>

    inline snippet:
    ==========
    #index-03 {
    position:absolute;
    left:0px;
    top:134px;
    width:750px;
    height:436px;
    background-image: url(images/index_03.gif);
    border-right: 2px solid #7C6736;
    z-index:100
    }



    css snippet:
    ========
    ..ddmx .item2,
    ..ddmx .item2:hover,
    ..ddmx .item2-active,
    ..ddmx .item2-active:hover {
    padding: 3px 0px 4px 0px;
    color: #FFFFFF;
    text-decoration: none;
    text-indent:5px;
    width:179px;
    display: block;
    white-space: nowrap;
    position: relative;
    z-index: 500;
    }

    ..ddmx .item2 {
    background: #A7A4C1;
    }

    ..ddmx .item2:hover,
    ..ddmx .item2-active,
    ..ddmx .item2-active:hover {
    background: #414162;
    }

    ..ddmx .arrow,
    ..ddmx .arrow:hover {
    padding: 3px 16px 4px 8px;
    }

    ..ddmx .item2 img,
    ..ddmx .item2-active img{
    position: absolute;
    top: 4px;
    right: 1px;
    border: 0;
    }

    ..ddmx .section {
    border: 1px solid #A7A4C1;
    position: absolute;
    visibility: hidden;
    z-index: -1;
    }

    * html .ddmx td { position: relative; } /* ie 5.0 fix */
     
    Shelly, Nov 6, 2007
    #1
    1. Advertising

  2. Shelly

    Bone Ur Guest

    Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007 13:44:51
    GMT Shelly scribed:

    > In IE (7) the drop down submenus are hiding behind the element below
    > it. They work fine in Firefox and Opera. I researched this issue on
    > the web and found suggestions to state position and z-index in the css
    > file. I already had position: relavive and a z-index set as high as
    > 500. I changed to position: absolute, but that didn't help.
    >
    > Here are the important parts of the css file and style in the hope
    > that someone can see something.


    I see that you didn't post a url but instead posted these useless snippets
    which I shall forebearingly snip in the interests of posterity.

    > snip


    --
    Bone Ur
    Cavemen have formidable pheromones.
     
    Bone Ur, Nov 6, 2007
    #2
    1. Advertising

  3. Shelly

    Shelly Guest

    Bone Ur wrote:
    > Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007
    > 13:44:51 GMT Shelly scribed:
    >
    >> In IE (7) the drop down submenus are hiding behind the element below
    >> it. They work fine in Firefox and Opera. I researched this issue on
    >> the web and found suggestions to state position and z-index in the
    >> css file. I already had position: relavive and a z-index set as
    >> high as 500. I changed to position: absolute, but that didn't help.
    >>
    >> Here are the important parts of the css file and style in the hope
    >> that someone can see something.

    >
    > I see that you didn't post a url but instead posted these useless
    > snippets which I shall forebearingly snip in the interests of
    > posterity.


    OK, Cheeky, I have participated in news groups before and given plenty of
    help to people in the past so I am no newcomer to this type of thing. The
    protocol in the various newsgroups has always been to eliminate a direct
    reference to a particular site in the interest of protecting the client.
    That is why I didn't post the URL. Maybe it is different in THIS newsgroup,
    but I would be surprised if it is.

    That said, I posted the other than "useless" snippets. They pertain
    directly to the suggestions for a fix that I found on the net. I posted
    them because they already include those suggestions (high z-order, including
    a position attribute). I had hoped that someone with some other than snide
    complaining might be able to see something or suggest something. Meanwhile,
    you needn't "bust mah britches".

    If it is absolutely necessary to post a URL, I will go through the tedious
    labor of porting the stuff to a different site, blacking out client content,
    and then posting that URL.

    Shelly
     
    Shelly, Nov 6, 2007
    #3
  4. Shelly

    Shelly Guest

    Shelly wrote:
    > Bone Ur wrote:
    >> Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007
    >> 13:44:51 GMT Shelly scribed:
    >>
    >>> In IE (7) the drop down submenus are hiding behind the element below
    >>> it. They work fine in Firefox and Opera. I researched this issue on
    >>> the web and found suggestions to state position and z-index in the
    >>> css file. I already had position: relavive and a z-index set as
    >>> high as 500. I changed to position: absolute, but that didn't help.
    >>>
    >>> Here are the important parts of the css file and style in the hope
    >>> that someone can see something.

    >>
    >> I see that you didn't post a url but instead posted these useless
    >> snippets which I shall forebearingly snip in the interests of
    >> posterity.


    OK, I have proted it. The URL to look at is www.sheldonlg.com/test.html

    In Internet explorer, the drop down falls behind the text whereas in Firefox
    amd Opera it covers the text.

    Shelly
     
    Shelly, Nov 6, 2007
    #4
  5. Shelly

    upwebadmin Guest

    upwebadmin, Nov 6, 2007
    #5
  6. Shelly

    Shelly Guest

    upwebadmin wrote:
    > I don't see the problem with what you have but all my menu navigation
    > needs are typically solved by Dynamic Drive.
    > http://www.dynamicdrive.com/dynamicindex1/indexb.html
    >
    > Good luck


    If you click on "Services" the drop down menu falls behind "Test that is for
    testing". In Firefox and Opera it covers that text. I am using IE 7.0.

    When there is more text, it will completely hide the drop down menu. Again,
    the url is www.sheldonlg.com/test.html
     
    Shelly, Nov 6, 2007
    #6
  7. Shelly wrote:

    > OK, I have proted it. The URL to look at is
    > www.sheldonlg.com/test.html


    Dropdown? Oh wait. JavaScript must be available. There goes ~10% of
    your visitors, plus the Googlebot, who won't be able to navigate your
    site. Are you sure you want that? It's like turning off your web server
    for a month every year.

    > In Internet explorer, the drop down falls behind the text whereas in
    > Firefox amd Opera it covers the text.


    You should add a proper DOCTYPE to take IE out of Quirks Mode first,
    then see what it does.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Remove those HTML comment markers from your styles.
    No need for that Netscape 4 DreamWeaver script to reload the page. NN 4
    is used so seldom these days as to warrant not even considering it.

    There are other errors.
    <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sheldonlg.com%2Ftest.html>
    <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.sheldonlg.com%2Ftest.html>

    You say: .ddmx { font: 12px tahoma; ...
    Read this, please: http://k75s.home.att.net/fontsize.html

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Nov 6, 2007
    #7
  8. Shelly

    Shelly Guest

    Beauregard T. Shagnasty wrote:
    > Shelly wrote:
    >
    >> OK, I have proted it. The URL to look at is
    >> www.sheldonlg.com/test.html

    >
    > Dropdown? Oh wait. JavaScript must be available. There goes ~10% of
    > your visitors, plus the Googlebot, who won't be able to navigate your
    > site. Are you sure you want that? It's like turning off your web
    > server for a month every year.


    This is a customer requirement. 'Nuff said. Do you know of another way to
    have dropdown menus WITHOUT Javascript? I'm open to suggestions, but
    dropdowns are a must.

    >
    >> In Internet explorer, the drop down falls behind the text whereas in
    >> Firefox amd Opera it covers the text.

    >
    > You should add a proper DOCTYPE to take IE out of Quirks Mode first,
    > then see what it does.
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">


    I'll do this.

    >
    > Remove those HTML comment markers from your styles.
    > No need for that Netscape 4 DreamWeaver script to reload the page. NN
    > 4 is used so seldom these days as to warrant not even considering it.


    OK.

    >
    > There are other errors.
    > <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sheldonlg.com%2Ftest.html>
    > <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.sheldonlg.com%2Ftest.html>
    >
    > You say: .ddmx { font: 12px tahoma; ...
    > Read this, please: http://k75s.home.att.net/fontsize.html


    Thanks. I'll report back.
     
    Shelly, Nov 6, 2007
    #8
  9. Shelly

    Shelly Guest

    Beauregard T. Shagnasty wrote:
    > Shelly wrote:
    >
    >> OK, I have proted it. The URL to look at is
    >> www.sheldonlg.com/test.html

    >
    > Dropdown? Oh wait. JavaScript must be available. There goes ~10% of
    > your visitors, plus the Googlebot, who won't be able to navigate your
    > site. Are you sure you want that? It's like turning off your web
    > server for a month every year.
    >
    >> In Internet explorer, the drop down falls behind the text whereas in
    >> Firefox amd Opera it covers the text.

    >
    > You should add a proper DOCTYPE to take IE out of Quirks Mode first,
    > then see what it does.
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > Remove those HTML comment markers from your styles.
    > No need for that Netscape 4 DreamWeaver script to reload the page. NN
    > 4 is used so seldom these days as to warrant not even considering it.
    >
    > There are other errors.
    > <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sheldonlg.com%2Ftest.html>
    > <http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.sheldonlg.com%2Ftest.html>
    >
    > You say: .ddmx { font: 12px tahoma; ...
    > Read this, please: http://k75s.home.att.net/fontsize.html


    I fixed all those errors and it still has the problem
    (www.sheldonlg.com/test.html)/ As for fixed pixel size, I agree, but that
    is not what I am trying to fix here first.

    Shelly
     
    Shelly, Nov 6, 2007
    #9
  10. Shelly wrote:

    > This is a customer requirement. 'Nuff said. Do you know of another way to
    > have dropdown menus WITHOUT Javascript? I'm open to suggestions, but
    > dropdowns are a must.


    A must? Oh pshaw. I think they are quite annoying, as they flash about
    as I move the mouse from, say, scrollbar to Back button. I guess your
    customer is more interested in the glitz. :-(

    A few seconds at Google turns up these, and there are lots more:

    http://www.alistapart.com/articles/horizdropdowns
    http://www.cssplay.co.uk/menus/final_drop.html
    http://meyerweb.com/eric/css/edge/menus/demo.html
    http://www.seoconsultants.com/css/menus/tutorial/
    http://www.opencube.com/

    Now, I have not tried any of these, because I have always been able to
    talk my clients out of using them. Usually by taking them to a site like
    http://mlb.com or
    http://www.accuweather.com/
    and waving the mouse around a bit.

    They are also very difficult to use for anyone with motor deficiencies,
    or blind users, or people with text-only browsers, etc etc. Hopefully,
    no visitors who operate their computers by using a pencil in their mouth
    will visit your site. :-/

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Nov 6, 2007
    #10
  11. Shelly wrote:
    > upwebadmin wrote:
    >> I don't see the problem with what you have but all my menu navigation
    >> needs are typically solved by Dynamic Drive.
    >> http://www.dynamicdrive.com/dynamicindex1/indexb.html
    >>
    >> Good luck

    >
    > If you click on "Services" the drop down menu falls behind "Test that is for
    > testing". In Firefox and Opera it covers that text. I am using IE 7.0.
    >
    > When there is more text, it will completely hide the drop down menu. Again,
    > the url is www.sheldonlg.com/test.html
    >
    >


    Firstly, your using way to many absolutely positioned blocks. You layout
    is very brittle, seems to relate to an argument in another recent thread.

    Anyway for what it's worth:

    1) Remove all references to "z-index" in your stylesheet
    2) Remove absolute positioning on your "hidden" DIV

    From:
    #index-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:750px;
    height:101px;
    border-right: 2px solid #7C6736;
    }

    #index-03 {
    position:absolute;
    left:0px;
    top:134px;
    width:750px;
    height:436px;
    border-right: 2px solid #7C6736;
    }

    #index-06 {
    position:absolute;
    left:0px;
    top:101px;
    width:750px;
    height:33px;
    border-right: 2px solid #7C6736;
    }

    To:
    #index-01, #index-03, #index-06 {
    margin: 0;
    width:750px;
    border-right: 2px solid #7C6736;
    }
    #index-01 { height:101px; }
    #index-03 { height:436px; }
    #index-06 { height:33px; }


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 6, 2007
    #11
  12. Shelly

    Shelly Guest

    Thank you. That did it!

    Shelly

    Jonathan N. Little wrote:
    > Shelly wrote:
    >> upwebadmin wrote:
    >>> I don't see the problem with what you have but all my menu
    >>> navigation needs are typically solved by Dynamic Drive.
    >>> http://www.dynamicdrive.com/dynamicindex1/indexb.html
    >>>
    >>> Good luck

    >>
    >> If you click on "Services" the drop down menu falls behind "Test
    >> that is for testing". In Firefox and Opera it covers that text. I
    >> am using IE 7.0. When there is more text, it will completely hide the
    >> drop down menu.
    >> Again, the url is www.sheldonlg.com/test.html
    >>
    >>

    >
    > Firstly, your using way to many absolutely positioned blocks. You
    > layout is very brittle, seems to relate to an argument in another
    > recent thread.
    > Anyway for what it's worth:
    >
    > 1) Remove all references to "z-index" in your stylesheet
    > 2) Remove absolute positioning on your "hidden" DIV
    >
    > From:
    > #index-01 {
    > position:absolute;
    > left:0px;
    > top:0px;
    > width:750px;
    > height:101px;
    > border-right: 2px solid #7C6736;
    > }
    >
    > #index-03 {
    > position:absolute;
    > left:0px;
    > top:134px;
    > width:750px;
    > height:436px;
    > border-right: 2px solid #7C6736;
    > }
    >
    > #index-06 {
    > position:absolute;
    > left:0px;
    > top:101px;
    > width:750px;
    > height:33px;
    > border-right: 2px solid #7C6736;
    > }
    >
    > To:
    > #index-01, #index-03, #index-06 {
    > margin: 0;
    > width:750px;
    > border-right: 2px solid #7C6736;
    > }
    > #index-01 { height:101px; }
    > #index-03 { height:436px; }
    > #index-06 { height:33px; }
     
    Shelly, Nov 6, 2007
    #12
  13. Shelly wrote:
    > Thank you. That did it!


    A bit of advice: when in doubt, don't use position: absolute. Let the
    content flow whenever possible.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 6, 2007
    #13
  14. Shelly

    Bone Ur Guest

    Well bust mah britches and call me cheeky, on Tue, 06 Nov 2007 17:58:14
    GMT Shelly scribed:

    >>>> In IE (7) the drop down submenus are hiding behind the element
    >>>> below it. They work fine in Firefox and Opera. I researched this
    >>>> issue on the web and found suggestions to state position and
    >>>> z-index in the css file. I already had position: relavive and a
    >>>> z-index set as high as 500. I changed to position: absolute, but
    >>>> that didn't help.
    >>>>
    >>>> Here are the important parts of the css file and style in the hope
    >>>> that someone can see something.
    >>>
    >>> I see that you didn't post a url but instead posted these useless
    >>> snippets which I shall forebearingly snip in the interests of
    >>> posterity.

    >
    > OK, I have proted it. The URL to look at is
    > www.sheldonlg.com/test.html
    >
    > In Internet explorer, the drop down falls behind the text whereas in
    > Firefox amd Opera it covers the text.


    ? I don't see it...

    I even looked further in this thread, reading:

    > If you click on "Services" the drop down menu falls behind "Test that

    is > for testing". In Firefox and Opera it covers that text. I am using
    IE
    > 7.0.
    >
    > When there is more text, it will completely hide the drop down menu.


    In both ie6 and 7 on my box the dropdown is in front of the text (-as in
    opera and ff.) However, it appears not when i "click" on "Services" but
    when I hover over it, and clicking on it has no effect.

    However, I know you've made some changes since first-post.

    --
    Bone Ur
    Cavemen have formidable pheromones.
     
    Bone Ur, Nov 6, 2007
    #14
  15. Shelly

    rf Guest

    "Shelly" <> wrote in message
    news:...
    > In IE (7) the drop down submenus are hiding behind the element below it.
    > They work fine in Firefox and Opera. I researched this issue on the web
    > and found suggestions to state position and z-index in the css file. I
    > already had position: relavive and a z-index set as high as 500. I
    > changed to position: absolute, but that didn't help.
    >
    > Here are the important parts of the css file and style in the hope that
    > someone can see something. The submenu is class item2 and the next
    > element is item-03. I've include snippets of code, css and in-line style.
    >
    > menu code snippet:
    > ==============
    > <td>
    > <a class="item1" href="javascript:void(0);">Top-level Item</a>
    > <div class="section">
    > <a class="item2" href="#"> Sub-level Item 1</a>
    >
    > <a class="item2" href="#"> Sub-level Item 2</a>
    > </div>
    > </td>


    Apply the z-index to the container as well as the drop down menu. In this
    case it would be the <td>.

    This has solved this particular problem the last three times somebody raised
    it here :)

    --
    Richard.
     
    rf, Nov 6, 2007
    #15
  16. Shelly

    dorayme Guest

    In article <>,
    "Shelly" <> wrote:

    > If it is absolutely necessary to post a URL, I will go through the tedious
    > labor of porting the stuff to a different site, blacking out client content,
    > and then posting that URL.


    My sympathies. I think different people here have different
    reactions to quoting lots of code. Perhaps if you really find it
    hard to isolate the trouble a bit and just post that bit as a url
    on say a free server or your own, then a short explanation of
    your difficulties might soften hard hearts...

    --
    dorayme
     
    dorayme, Nov 7, 2007
    #16
    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. SirPoonga
    Replies:
    2
    Views:
    771
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,023
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    485
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    274
  5. Replies:
    3
    Views:
    291
Loading...

Share This Page