www.webdeveloper.com
Results 1 to 2 of 2

Thread: Issues with my gradient color javascript menu table

  1. #1
    Join Date
    Aug 2010
    Posts
    6

    Issues with my gradient color javascript menu table

    Hi i have this menu table that has a gradient effect and flips to a different color when mouse is over a cell of the table. It is working great for google chrome, the problem is it is not working for Internet Explorer, but it should work for internet explorer, firefox, chrome,and so on.. The code i got it from is: http://www.webdesignerwall.com/tutor...-css-gradient/

    The first cell should be black and grey then when i put move over it should change to grey baby blue. As i mentioned it works fine in chrome i am not sure if I missed read something, place the codes in the wrong area or if i am missing anything can someone take a look and see what i am missing and if it is working on other explorers.

    Thank you in advance

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
     <style type="text/css"> 
     
    #coolmenu{
    border: 1px  #9CF;
    width: 140px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
    background: -moz-linear-gradient(top,  #ccc,  #000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
    background: #999; /* for non-css3 browsers */
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
    }
     
    #coolmenu a{
    font
    : bold 13px Verdana;
    padding: 8px;
    padding-left:8px;
    display: block;
    width: 100%;
    color: #9CF;
    text-decoration: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
    background: -moz-linear-gradient(top,  #ccc,  #000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
    background: #999; /* for non-css3 browsers */
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
    }
     
    html>body #coolmenu a{ /*Non IE rule*/
    width: auto;
    }
     
    #coolmenu a:hover{
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#9CF));
    background: -moz-linear-gradient(top,  #ccc,  #000);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#9CF);
    background: #999; /* for non-css3 browsers */
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#9CF); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#9CF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #9CF); /* for firefox 3.6+ */
    
    color: white;
    }
     
    </style> 
    <center> 
    <div id="coolmenu" onmouseover="EvalSound('click')"; onclick="EvalSound('click2')"> 
     <a href="http://www.CometPrint.com/index_files/Pages/Animals/animal.html">Animals</a> 
     <a href="http://www.CometPrint.com/index_files/Pages/anniversary/anniversary.html">Anniversary</a> 
     <a href="index_files/Pages/baby shower/babyshower.html">Baby Shower</a>   
     <a href="index_files/Pages/birthday/birthday.html">Birthdays</a> 
      <a href="index_files/Pages/celebraties&amp;bands/celebraties&amp;bands.html">Celebrities &amp; Bands</a> 
      <a href="index_files/Pages/christmas/christmas.html">Christmas</a> 
      <a href="index_files/Pages/encouragement/encouragement.html">Encouragement</a> 
      <a href="index_files/Pages/engagement/engagement.html">Engagement</a> 
      <a href="index_files/Pages/fathersday/fathersday.html">Father's Day</a> 
      <a href="index_files/Pages/forkids/forkids.html">For Kids</a> 
      <a href="index_files/Pages/friendship/friendship.html">Friendship</a> 
      <a href="index_files/Pages/funny/funny.html">Funny</a> 
      <a href="index_files/Pages/getwell/getwell.html">Get Well</a> 
      <a href="index_files/Pages/graduation/graduation.html">Graduation</a> 
      <a href="index_files/Pages/halloween/halloween.html">Halloween</a> 
      <a href="index_files/Pages/hanukkah/hanukkah.html">Hanukkah</a> 
      <a href="index_files/Pages/motherday/mothersday.html">Mother's Day</a> 
      <a href="index_files/Pages/nature/nature.html">Nature</a> 
      <a href="index_files/Pages/other/other.html">Other</a> 
      <a href="index_files/Pages/Party/party.html">Party</a> 
      <a href="index_files/Pages/prayingforyou/prayingforyou.html">Praying For You</a> 
      <a href="index_files/Pages/romanceandlove/romanceandlove.html">Romance and Love</a> 
      <a href="index_files/Pages/sorry/sorry.html">Sorry</a> 
      <a href="index_files/Pages/sports/sports.html">Sports</a> 
      <a href="index_files/Pages/swimsuits models/swimsuitmodels.html">Swimsuits Models</a> 
      <a href="index_files/Pages/thanksgiving/thanksgiving.html">Thanksgiving</a> 
      <a href="index_files/Pages/thankyou/thankyou.html">Thank You</a> 
      <a href="index_files/Pages/valentinesday/valentinesday.html">Valentine's Day</a> 
      <a href="index_files/Pages/wedding/wedding.html">Wedding</a> 
      <a href="index_files/Pages/welcomehome/welcomehome.html">Welcome Home</a> 
    </div> 
    </center> 
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    There are no quotes in that type of filter for IE.
    The element must have hasLayout.
    http://www.webdeveloper.com/forum/sh...25&postcount=2

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles