Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Cell Hover in IE

    Hi,

    How can I change the following menu embed code so it works in IE as well as other major browsers?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    
    <style type="text/css"> 
    .tablemenu { 
                font-family: "Century Gothic"; 
                font-size: 14px; 
                font-weight: bold; 
                font-style: normal; 
                text-align:center; 
                color: #FFFFFF; 
                background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png');
    } 
    .overmenu{ 
                cursor: pointer; 
                color: #FFFFFF; 
    } 
    
    #cell{background-image:url('../Images/MenuBckg.png'); background-repeat:repeat-x;} 
    #cell:hover{background-image:none; background-color:#999999;} 
    </style> 
    </head> 
    <body> 
    
    <table style="width: 900px; height: 50px" class="tablemenu"> 
    <tr> 
    <td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com'" >Home</td> 
    <td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/profile'" >Perfil</td> 
    <td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/servicios'" >Servicios</td> 
    <td id="cell" class="overmenu" onclick="parent.location='http://blog.loquemasimporta.com'" >Blog</td> 
    <td id="cell" class="overmenu" onclick="parent.location='http://dir.mortellmarsol.com'" >Directorio</td> 
    <td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Chat</td> 
    <td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Programas</td> 
    <td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/contact'" >Contacto</td> 
    </tr> 
    </table> 
    
    
    </body> 
    </html>

    Thanks in advance!
    Rain Lover

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    All of those td tags have the same id of "cell". But each id has to be unique; they can't be shared like that.

    Perhaps you mean to have "cell" as a class and apply it, plus the "overmenu" class, to each td. If so, just change your style declarations from #cell to .cell, and in each <td>, have it like this:

    Code:
    <td class="cell overmenu" ...

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by auslin View Post
    All of those td tags have the same id of "cell". But each id has to be unique; they can't be shared like that.

    Perhaps you mean to have "cell" as a class and apply it, plus the "overmenu" class, to each td. If so, just change your style declarations from #cell to .cell, and in each <td>, have it like this:

    Code:
    <td class="cell overmenu" ...
    Thanks for the answer! I tried the following code, but it still doesn't work in IE6:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    
    <style type="text/css"> 
    .tablemenu { 
                font-family: "Century Gothic"; 
                font-size: 14px; 
                font-weight: bold; 
                font-style: normal; 
                text-align:center; 
                color: #FFFFFF; 
                background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png');
    } 
    .overmenu{ 
                cursor: pointer; 
                color: #FFFFFF; 
    } 
    
    .cell{background-image:url('../Images/MenuBckg.png'); background-repeat:repeat-x;} 
    .cell:hover{background-image:none; background-color:#999999;} 
    </style> 
    </head> 
    <body> 
    
    <table style="width: 900px; height: 50px" class="tablemenu"> 
    <tr> 
    <td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com'" >Home</td> 
    <td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/profile'" >Perfil</td> 
    <td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/servicios'" >Servicios</td> 
    <td class="cell overmenu" onclick="parent.location='http://blog.loquemasimporta.com'" >Blog</td> 
    <td class="cell overmenu" onclick="parent.location='http://dir.mortellmarsol.com'" >Directorio</td> 
    <td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Chat</td> 
    <td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Programas</td> 
    <td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/contact'" >Contacto</td> 
    </tr> 
    </table> 
    
    
    </body> 
    </html>

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    IE6 does not support the :hover psuedo class unless it's invoked on an "anchor"

    so

    Code:
    .foo:hover { // } /* will not work in ie6 */
    
    a.foo:hover { // } /* will work in ie6 */
    there are various hacks with javascript

    as it's a TD you can't realistically convert each cell to an anchor (well you could, but is it worth it?)

    So you have the choice of

    ignoring IE6 entirely

    finding a javascript hack

    using jquery ~

    adjust the Bold parts for your own uses..probably "cell" as the selector and "overmenu" as the hover class.
    Code:
    $("td.cell").hover(
      function () {
        $(this).addClass("overmenu");
      },
      function () {
        $(this).removeClass("overmenu");
      }
    );
    jquerys quite elegant but again, do you really want to bother with it just for ie6

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Code:
    as it's a TD you can't realistically convert each cell to an anchor (well you could, but is it worth it?)
    That's what I'd like to do, but I don't know how.

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    You could put an anchor in each of the TDs, like this for the first one as an example:

    Code:
    <td onclick="parent.location='http://www.loquemasimporta.com'">
       <a href="#" class="overmenu cell">Home</a>
    </td>
    If the 'hoverable' link then needs to occupy all of the parent (TD), try adding the following to the CSS:

    Code:
    td         { height: 100%; }
    td .cell   { display: block; height: 100%; }

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    200
    Thanks
    23
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by auslin View Post
    You could put an anchor in each of the TDs, like this for the first one as an example:

    Code:
    <td onclick="parent.location='http://www.loquemasimporta.com'">
       <a href="#" class="overmenu cell">Home</a>
    </td>
    If the 'hoverable' link then needs to occupy all of the parent (TD), try adding the following to the CSS:

    Code:
    td         { height: 100%; }
    td .cell   { display: block; height: 100%; }
    It doesn't work.
    I made some changes and I'm almost there!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head>
    <title>Menu</title>
    
    <style type="text/css"> 
    table {width:900px; height:50px; font:bold 14px Century Gothic; text-align:center; background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png')}
    a {display:block; height:50px; color: #FFFFFF; text-decoration:none}
    a:hover {background-color:#999999} 
    </style> 
    
    </head> 
    <body> 
    
    <table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td><a href="http://www.loquemasimporta.com">Home</a></td>
    <td><a href="http://www.loquemasimporta.com/profile">Perfil</a></td>
    <td><a href="http://www.loquemasimporta.com/servicios">Servicios</a></td>
    <td><a href="http://blog.loquemasimporta.com">Blog</a></td>
    <td><a href="http://dir.mortellmarsol.com">Directorio</a></td>
    <td><a href="http://www.loquemasimporta.com/home/tv">Chat</a></td>
    <td><a href="http://www.loquemasimporta.com/home/tv">Programas</a></td>
    <td><a href="http://www.loquemasimporta.com/contact">Contacto</a></td>
     
    </tr> 
    </table> 
    
    
    </body> 
    </html>

    Now all I need to do is vertically centering the text. Any thoughts?

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there Rain_Lover,

    I answered this earlier for you over at DD forums.

    Try adding line-height:50px; to your a set of rules.

    coothead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •