[RESOLVED]Solve this problem for crome

Hi!! coders,

               There is a problem in my project Actually i m creating a div that is define the performance of the user i mean negative as well as positive performance. I am fetching the value of negative performance as well as positive performance from the
database named field green and red rescpectively. And i want that if there will be value 80% inside the green and 20% inside the red then 80%bgcolor of button will be displayed as green and 20% bgcolor of the button will be  displayed as red. firstly using
the below css i definning the complete color of the div is red.

<style type=’text/css’>
                 .blue-circle {
                 font-size:11px;
                font-weight:bold;
                font-family:Arial, Helvetica, sans-serif;
                line-height:50px;
                text-align:center;
                width:206px;
                height:56px;
                text-transform : capitalize;
                text-decoration:none;
                 -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -khtml-border-radius: 10px;
                    border-radius: 10px;
                    
                  background:url("assets/images/cap.png") no-repeat scroll 0 50% #db2214;    
                }
                .blue-circle span {
                 display: block;
                 width:206px;
                height:56px;
                ine-height:50px;
                 background-repeat:no-repeat;
                 border-radius: 10px;
                 -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;
                    -khtml-border-radius: 10px;
                }
                .blue-circle span a {
                    color:#fff;
                    line-height:55px;}
                .blue-circle span a:hover {text-decoration:underline;}</style>

when m using the above class in the div then m filling the green color that will  come from the database dynamically. This is working perfectly in mozillaa firefox but not working in the google crome. How this can be possible.

Output in mozila firefox


output in side the google crome


div class="blue-circle"><span style=’background-image:-moz-linear-gradient(0% 100% , #4ED91B 100%, transparent 100%), none; opacity:.9; background-size:" + dt1.Rows[j]["green"].ToString() + "%;’><a class="tTip" title=’ <b>Correct answers:</b>" + dt1.Rows[j]["green"].ToString()
+ "%<br/> <b>Incorrect answers:</b>" + dt1.Rows[j]["red"].ToString() + "%’ href=’progress_basic_column.aspx?val=" + dt1.Rows[j]["topic_name"] + "’>" + dt1.Rows[j]["topic_name"].ToString().Replace("_", " ") + "</a></span></div>

Thanks

Bharat Bhushan

Hi,

bhushan_bharat

<span style=’background-image:-moz-linear-gradient(0% 100% , #4ED91B 100%, transparent 100%), none;

since, you are using only Firefox specific css style, it not works with chrome, try using
-webkit style or CSS standard rule.

check this site: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

Hi!! raju

           I already have been used this means webkit for the crome but its notworking. can u mofify the code of my <div>. I shall be very thankful to you.

Thankx

Bharat Bhushan.

Hi,

Check this site, u can generate one online:

http://www.colorzilla.com/gradient-editor/

(supported by browsers)

Leave a Reply