Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to maintain browser compatability with Gradient in css?
    primarykey
    data
    text
    <p>I am developing a website using html , css and javascript . The buttons display differently in every browser . Here are the screenshots for different browser of the same page :</p> <p>Internet Explorer : <img src="https://i.stack.imgur.com/2BPxv.png" alt="enter image description here"></p> <p>Firefox : <img src="https://i.stack.imgur.com/65ZV1.png" alt="enter image description here"></p> <p>I actually intend it to display as it displays in firefox . Here Some of the css code i am using :</p> <pre><code>#button{ float: left; width: 500px; height: 50px; line-height: 50px; background-color: #06C; padding-left: 20px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0); -moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0); box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #60B842), color-stop(0.85, #7FD13D) ); background-image: -moz-linear-gradient( center bottom, /* change these to change the button colors */ #B58515 0%, #DC9E1F 85% ); /* change this to change the text color and font type */ color:#fff; font-family:arial,helvetica,sans-serif; font-size:17px; font-weight:bold; text-shadow:1px 1px 1px #4c9434; } #button:hover{ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #6DD14B), color-stop(0.85, #85DB40) ); background-image: -moz-linear-gradient( center bottom, /* change these colors to change the mouse hover colors */ #E17100 0%, #FF9326 85% ); box-shadow:0 2px 0 #5EA839; } </code></pre> <p>There maybe some issues with using the gradient . Can someone suggest me any changes or another ways to code so that the webpage looks the same in different browsers ?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload