CSS menu problems with IE 7

Discussion in 'HTML' started by jcandamo, Jun 6, 2009.

  1. jcandamo

    jcandamo Guest

    I have a CSS that is giving me a hard time in IE 7, works in Chrome
    and Firefox 3. I'm not a CSS expert, any help will be greatly
    appreciated. The problem occurs when hovering over the second level,
    it dissapears instead of triggering the rollover event

    My general CSS has:

    /* 1st level for all browsers */
    ..menu {
    font-family: arial, sans-serif;
    width:106px;
    height:33px;
    position:absolute;
    font-size:11px;
    top:160px;
    width:749px;
    }
    ..menu ul li a, .menu ul li a:visited {display:block; text-
    decoration:none; color:#FFCC00; width:104px; height:21px; text-
    align:center; border:1px solid #CCCCCC; border-width:1px 1px 0 0;
    background:#333333; line-height:19px; font-size:11px; font-
    weight:normal; }

    ..menu ul {padding:0; margin:0; list-style-type: none; }
    ..menu ul li {float:left; margin-right:1px; position:relative;}
    ..menu ul li ul {display: none;}

    /* not Internet Explorer */
    ..menu ul li:hover a {color:#FFFFFF; background:#000000;}
    ..menu ul li:hover ul {display:block; position:absolute; top:22px; left:
    0px; width:105px;}
    /* 2nd level pull-out static */
    ..menu ul li:hover ul li a.hide {background:#333333; color:#FFCC00;}
    /* 2nd level pulled */
    ..menu ul li:hover ul li:hover a.hide {width:150px; background:#000000;
    color:#FFFFFF;}
    ..menu ul li:hover ul li ul {display: none;}
    /* 2nd level static */
    ..menu ul li:hover ul li a {display:block; background:#333333;
    color:#FFCC00; width:150px;}
    ..menu ul li:hover ul li a:hover {background:#000000; color:#FFFFFF;} /
    * HERE hover 2nd level*/
    ..menu ul li:hover ul li:hover ul {display:block; position:absolute;
    left:151px; top:0; color:#000000;}
    /* 3rd level */
    ..menu ul li:hover ul li:hover ul li a {display:block; width:200px;
    background:#333333; color:#FFCC00;}
    ..menu ul li:hover ul li:hover ul li a:hover {background:#000000;
    color:#FFFFFF;}

    My IE CSS has:

    ..menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
    ..menu ul li a:hover ul li a.hide {display:none; color:#00FF00;
    background:#00FF00;}

    /* 1st level hover */
    ..menu ul li a:hover {color:#FFFFFF; background:#000000;}
    ..menu ul li a:hover ul {display:block; position:absolute; top:21px;
    left:0px; width:105px;}
    /* 2nd level pull-out static */
    ..menu ul li a:hover ul li a.sub {background:#333333; color:#FFCC00;}
    /* 2nd level static HERE */
    ..menu ul li a:hover ul li a {display:block; background:#333333;
    color:#FFCC00; width:150px; height:20px; top:0px;}
    ..menu ul li a:hover ul li a ul {visibility:hidden; }
    /* 2nd level hover */
    ..menu ul li a:hover ul li a:hover {background:#000000; color:#FFFFFF;}
    ..menu ul li a:hover ul li a:hover ul {visibility:visible;
    position:absolute; left:150px; top:0; color:#000;}
    /* 3rd level static */
    ..menu ul li a:hover ul li a:hover ul li a {display:block; width:200px;
    background:#333333; color:#FFCC00;}
    ..menu ul li a:hover ul li a:hover ul li a:hover {background:#000000;
    color:#FFFFFF;}

    table.IEmenu {border-collapse:collapse; border:0; margin:0; padding:0;
    top:0;}

    My HTML has:

    <!--#include virtual="/css/grlmenu.txt"-->
    <div class="menu" align="center" style="margin-left:15px; margin-
    top:0px">
    <ul>
    <li><a class="hide" href="P.html">P</a>
    <!--[if IE]>
    <a href="P.html">P
    <table class="IEmenu"><tr><td>
    <![endif]-->
    <ul>
    <li><a href="Kr.html" title="K">K</a></li>
    <li><a href="C.html" title="C">C</a></li>
    <li><a href="O.html" title="O<">O</a></li>
    <li><a class="hide" href="N.html" title="N">N</a>
    </ul>
    <!--[if IE]>
    </td></tr></table>
    </a>

    <![endif]-->
     
    jcandamo, Jun 6, 2009
    #1
    1. Advertising

  2. jcandamo wrote:
    > I have a CSS that is giving me a hard time in IE 7, works in Chrome
    > and Firefox 3. I'm not a CSS expert, any help will be greatly
    > appreciated. The problem occurs when hovering over the second level,
    > it dissapears instead of triggering the rollover event
    >
    > My general CSS has:


    <snip code>

    URL, URL URL...don't post code!


    > My HTML has:
    >
    > <!--#include virtual="/css/grlmenu.txt"-->


    For exactly this reason! Who knows what you have in the SSI

    > <div class="menu" align="center" style="margin-left:15px; margin-
    > top:0px">
    > <ul>
    > <li><a class="hide" href="P.html">P</a>
    > <!--[if IE]>
    > <a href="P.html">P
    > <table class="IEmenu"><tr><td>
    > <![endif]-->
    > <ul>


    Okay! Right there for your IE specific markup, your cannot nest a TABLE
    within a A element. A TABLE is a *block* element and A (links) can only
    contain inline elements.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 6, 2009
    #2
    1. Advertising

  3. jcandamo

    richard Guest

    On Fri, 05 Jun 2009 22:53:19 -0400, "Jonathan N. Little"
    <> wrote:

    >jcandamo wrote:
    >> I have a CSS that is giving me a hard time in IE 7, works in Chrome
    >> and Firefox 3. I'm not a CSS expert, any help will be greatly
    >> appreciated. The problem occurs when hovering over the second level,
    >> it dissapears instead of triggering the rollover event
    >>
    >> My general CSS has:

    >
    ><snip code>
    >
    >URL, URL URL...don't post code!
    >
    >
    >> My HTML has:
    >>
    >> <!--#include virtual="/css/grlmenu.txt"-->

    >
    >For exactly this reason! Who knows what you have in the SSI
    >
    >> <div class="menu" align="center" style="margin-left:15px; margin-
    >> top:0px">
    >> <ul>
    >> <li><a class="hide" href="P.html">P</a>
    >> <!--[if IE]>
    >> <a href="P.html">P
    >> <table class="IEmenu"><tr><td>
    >> <![endif]-->
    >> <ul>

    >
    >Okay! Right there for your IE specific markup, your cannot nest a TABLE
    >within a A element. A TABLE is a *block* element and A (links) can only
    >contain inline elements.



    He's also trying to create a table within the nest of the UL which
    ain't gonna work.

    <a href="P.html">P
    should be <a href="P.html">P</a>

    The if/end if is totally wrong as well.

    I believe he is attempting to create a table in place of the UL if the
    browser is IE. In which case the if/end if should be placed before the
    UL stuff for other browsers.

    To be more proper, you should simply redirect to another page that is
    more suited to IE users.
     
    richard, Jun 6, 2009
    #3
    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. Miguel Dias Moura
    Replies:
    3
    Views:
    4,310
    Bruno Sirianni
    Apr 3, 2004
  2. Vilmar
    Replies:
    0
    Views:
    470
    Vilmar
    May 27, 2004
  3. itzikkl
    Replies:
    0
    Views:
    5,774
    itzikkl
    Mar 27, 2005
  4. hestres

    CSS drop-down menu problems

    hestres, Mar 6, 2007, in forum: HTML
    Replies:
    3
    Views:
    558
    Jonathan N. Little
    Mar 6, 2007
  5. Replies:
    1
    Views:
    217
    Randy Webb
    Feb 19, 2006
Loading...

Share This Page