Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS
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;
		}
		
		/*** 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 13-Jan-13 16:30pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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[^]
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 539
1 Maciej Los 300
2 DamithSL 233
3 Sergey Alexandrovich Kryukov 209
4 BillWoodruff 200
0 OriginalGriff 7,168
1 Sergey Alexandrovich Kryukov 6,377
2 DamithSL 5,461
3 Manas Bhardwaj 4,876
4 Maciej Los 4,450


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 13 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100