Menu
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: [url]http://www.webdesignerwall.com/tutorials/cross-browser-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
[code=html]
<!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&bands/celebraties&bands.html”>Celebrities & 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>