Guys I don't know much about CSS. I have made a math calculator with js and style it with css. When I'm opening the web page in chrome it displays nicely. But when I open it with firefox or IE the design gets distort. Can somebody tell me how to make my calculator in same way when I'm opening it with all the browsers?
Here I'm inserting my CSS code. Plz if you can edit it to supports for all the browsers.
.calculator
{
width:350px;
height:400px;
background-color:#1e252e;
padding-top:10px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
border:2px solid #456;
margin:auto;
border-color:#567 #000 #000 #456;
background:#1e252e;
}
h1 {
font: 65px/75px bolder "MS Serif", "New York", serif;
letter-spacing: 10px;
color: #fff;
position:absolute;
left:400px;
text-shadow:0px 3px 1px rgba(0,0,0,.8),0px 4px 20px rgba(0,0,0,.8);
-moz-transition: 1.5s;
-webkit-transition: 1.5s;
transition: 1.5s;
}
h1:hover {
color: #003;
text-shadow: 0 -3px 1px rgba(255,255,255,.8),
0px 4px 20px rgba(0,0,0,.8);
-moz-transition: 1.1s;
-webkit-transition: 1.1s;
transition: 1.1s;
}
.calculator td
{
height:16.66%;
}
.calc_td_result
{
text-align:center;
}
.calculator .calc_result, .calculator .calc_result:focus
{
width:90%;
text-align:right;
display: inline-block;
border: 1px solid black inset;
border-radius: 5px;
padding: 0px 4px 1px 4px;
font-family:Digital-7;
font-size: 2em;
color:#0fb;
height:38px;
text-align:right;
background:#000;
border:2px solid #567;
border-color:#123 #456 #456 #123;
margin:2px 2px;
outline:none;
}
.calc_td_btn
{
width:25%;
height:90%;
border-radius:5px;
}
.calc_btn
{
width:85%;
height:85%;
font-size:20px;
font-family:Orbitron;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
border-radius:5px
}
.calculator .calc_btn,
.calculator .calc_btn:link,
.calculator .calc_btn:visited,
.calculator .calc_btn:hover,
.calculator .calc_btn:active
{
color:#a6aaaf;
background:#000 url(../images/button-bg-dark.gif) left top repeat-x;
border:1px solid #000;
border-color:#3f444f #222 #223 #3f444f;
text-shadow:none;
}
.calculator .calc_btnOver,
.calculator .calc_btnOver:link,
.calculator .calc_btnOver:visited,
.calculator .calc_btnOver:hover,
.calculator .calc_btnOver:active
{
color:#c6cacf;
border-color:#889 #000 #334 #778;
text-shadow:none;
}
.calculator .calc_btnActive,
.calculator .calc_btnActive:link,
.calculator .calc_btnActive:visited,
.calculator .calc_btnActive:hover,
.calculator .calc_btnActive:active
{
color:#fff;
border-color:#bbb #000 #223 #999;
text-shadow:-.1em 0 .1em #000, .1em 0 .1em #000, 0 -.1em .1em #000, 0 .1em .1em #000, 0 0 .3em #fff, 0 0 .5em #fff, 0 0 .6em #fff;
}
.calculator .calc_btnGrayed,
.calculator .calc_btnGrayed:link,
.calculator .calc_btnGrayed:visited,
.calculator .calc_btnGrayed:hover,
.calculator .calc_btnGrayed:active {
color:#555;
border-color:#444 #222 #222 #333;
text-shadow:none;
}
.calculator .digitButton {
border-color:#047;
}
.calculator .memoryButton {
border-color:#740;
}
.calculator .operatorButtonBasic {
border-color:#354;
}
.calculator .memoryButton .button,
.calculator .operatorButtonClearEntry .button,
.calculator .operatorButtonClear .button,
.calculator .operatorButtonNegate .button
{
font-size:12px;
font-weight:bold;
line-height:22px;
}