Click here to Skip to main content
15,914,160 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
My menu background color(#main-nav) is not showing in Google chrome and Firefox. But it is working fine with Internet Explorer. My CSS is:
C#
#main-nav {
  background: #7dad16;
  background: -moz-linear-gradient(top, #7dad16 0%, #547b00 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dad16), color-stop(100%,#547b00));
  background: -webkit-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -o-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -ms-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: linear-gradient(top, #7dad16 0%,#547b00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dad16', endColorstr='#547b00',GradientType=0 );
  float:none;
  width: 100%;
  z-index: 1000;
}

And aspx page is:
XML
<div id="main-nav">
                        <ul>
                            <li><a>Home</a></li>
                            <li><a>About</a>

                            </li>
                            <li><a>Activities</a>

                            </li>
                            <li><a>Contact Us</a>
                               </li>
                            <li><a>News</a></li>
                        </ul>
                    </div>

Please help me to solve this problem
Thanks
Posted

1 solution

XML
<style>
        #main-nav {
  background: #7dad16;
  background: -moz-linear-gradient(top, #7dad16 0%, #547b00 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dad16), color-stop(100%,#547b00));
  background: -webkit-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -o-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -ms-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: linear-gradient(top, #7dad16 0%,#547b00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dad16', endColorstr='#547b00',GradientType=0 );
  float:none;
  width: 100%;
  z-index: 1000;
}
    </style>



XML
<div id="main-nav">
                      <ul>
                          <li><a>Home</a></li>
                          <li><a>About</a>

                          </li>
                          <li><a>Activities</a>

                          </li>
                          <li><a>Contact Us</a>
                             </li>
                          <li><a>News</a></li>
                      </ul>
                  </div>


Its working fine. Recheck.

Here is the preview http://img692.imageshack.us/img692/346/v8no.jpg[^]
 
Share this answer
 
v2
Comments
jacobjohn196 2-Sep-13 8:25am    
Not working for me..My full CSS is:
body {
}
#main-nav {
background: #7dad16;
background: -moz-linear-gradient(top, #7dad16 0%, #547b00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dad16), color-stop(100%,#547b00));
background: -webkit-linear-gradient(top, #7dad16 0%,#547b00 100%);
background: -o-linear-gradient(top, #7dad16 0%,#547b00 100%);
background: -ms-linear-gradient(top, #7dad16 0%,#547b00 100%);
background: linear-gradient(top, #7dad16 0%,#547b00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dad16', endColorstr='#547b00',GradientType=0 );
float:none;
width: 100%;
z-index: 1000;
}
#main-nav ul {
font-family: 'Droid Sans', sans-serif;
font-size: .9em;
font-weight: bold;
list-style: none;
}
#main-nav ul li {
border-left: 1px solid #7dad16;
float: left;
}
#main-nav ul li:first-child {
border: none;
}
#main-nav ul li a {
color: #2b4001;
display: block;
padding: 20px;
position: relative;
width: 139px;
text-decoration: none;
text-shadow: 0 1px 1px #9fc255;
}
#main-nav ul li a span.drop-down {
background: url(../images/down-arrow_green_10x7.png) no-repeat;
height: 7px;
position: absolute;
right: 20px;
top: 24px;
width: 10px;
}
#main-nav ul li:hover {
background: #7dad16;
}
#main-nav ul li ul {
display: none;
}
#main-nav ul li:hover ul {
background: url(../images/trans_green-70.png);
display: block;
font-size: .9em;
font-weight: normal;
padding: 10px;
position: absolute;
}
#main-nav ul li ul li {
float: none;
display: block;
border-left: none;
position: relative;
}
#main-nav ul li ul li a {
width: 170px;
padding: 15px 10px;
border-top: dotted 1px #7dad16;
color: #fff;
}

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900