By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,034 Members | 960 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,034 IT Pros & Developers. It's quick & easy.

Link styles being over written in Opera

KeredDrahcir
100+
P: 426
I'm trying to create a menu using a list. I want it to look like lerge boxes with a graduated fill and it works fie on Firefox, Google Chrome, Safari and Internet Explorer my not Opera. In Opera the boxes come up in blue. Is this something to do with them being links and if so, how do I fix it?
Expand|Select|Wrap|Line Numbers
  1. <div class="mainmenu">
  2.   <ul>
  3.     <li class='menu'><a href='link' class='active'>Home</a></li>
  4.     <li class='menu'><a href='link' class=''>Page</a></li>
  5.       ...other pages
  6.     <li class='menu'><a href='link' class=''>Page</a></li>
  7.   </ul>
  8. </div>
Expand|Select|Wrap|Line Numbers
  1. .mainmenu{
  2.     background-color:#131b59;
  3.     border: 1px solid #B9B3A4;
  4.     border-radius: 8px 8px 8px 8px;    
  5. }
  6. .mainmenu ul{
  7.     padding:0;
  8.     margin:10px 0 10px 0;
  9.     list-style:none;
  10. }
  11. .mainmenu li{
  12.     padding:0 0 0 10px;
  13.     margin:0 0 0 0;
  14.     background:#131b59;
  15.     background-image:-moz-linear-gradient(top,#815d39,#b08f66);
  16.     background-image:-webkit-gradient(linear,left top,left bottom,from(#815d39),to(#b08f66));
  17. filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#815d39,endColorStr=#b08f66);
  18.     height:35px;
  19.     line-height:35px;
  20.     text-align:left;
  21.     border:1px solid #ffffff;
  22.     border-bottom:1px #333333 solid;
  23. }
  24. .mainmenu li a{
  25.     font-family:arial;
  26.     font-size:13px;
  27.     font-weight:bold;
  28.     color:#FFFFFF;
  29.     text-decoration:none;
  30. .mainmenu li:hover{
  31.     background-image:-moz-linear-gradient(top,#f0ce42,#815d39);
  32.     background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ce42),to(#815d39));
  33. filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#f0ce42,endColorStr=#815d39);    
  34. }
Aug 13 '12 #1

✓ answered by ariful alam

You have to use
Expand|Select|Wrap|Line Numbers
  1. background-image:-o-linear-gradient(top,#815d39,#b08f66);
for .mainmenu li

and
Expand|Select|Wrap|Line Numbers
  1. background-image:-o-linear-gradient(top,#f0ce42,#815d39);
for .mainmenu li:hover

-o-linear-gradient for Opera
-moz-linear-gradient for Mozilla
-webkit-gradient for webkit (Chrome, Safari)

Hope it's help you. :)

Share this Question
Share on Google+
2 Replies


ariful alam
100+
P: 185
You have to use
Expand|Select|Wrap|Line Numbers
  1. background-image:-o-linear-gradient(top,#815d39,#b08f66);
for .mainmenu li

and
Expand|Select|Wrap|Line Numbers
  1. background-image:-o-linear-gradient(top,#f0ce42,#815d39);
for .mainmenu li:hover

-o-linear-gradient for Opera
-moz-linear-gradient for Mozilla
-webkit-gradient for webkit (Chrome, Safari)

Hope it's help you. :)
Aug 13 '12 #2

KeredDrahcir
100+
P: 426
Worked perfectly. Thank you ever so much. You're a hero.
Aug 14 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.