Click here to Skip to main content
15,867,750 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
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.

CSS
.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;
		}
		
		/*** digit buttons ***/
		.calculator .digitButton {
			border-color:#047;
		}

	/*** memory buttons ***/
		.calculator .memoryButton {
			border-color:#740;
		}

	/*** basic arithmetic buttons ***/
		.calculator .operatorButtonBasic {
			border-color:#354;
		}

	
	/*** smaller text for some buttons ***/
		.calculator .memoryButton .button,
		.calculator .operatorButtonClearEntry .button,
		.calculator .operatorButtonClear .button,
		.calculator .operatorButtonNegate .button
		{
			font-size:12px;
			font-weight:bold;
			line-height:22px;
		}
Posted

1 solution

This is a common issue, many people struggle when designing the web site for cross browser compatibility. Specially with IE versions.

following article will help you to fix your issue

http://www.catswhocode.com/blog/15-techniques-and-tools-for-cross-browser-css-coding[^]
http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs[^]
http://sheet.shiar.nl/browser[^]
http://msdn.microsoft.com/en-us/library/bb250394(v=vs.85).aspx[^]
 
Share this answer
 

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