Css σε firefox και IE

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Css σε firefox και IE

Δημοσίευση από rafinos » 08 Φεβ 2012 10:52

Γεια σας παιδιά υπάρχει τρόπος ο παρακάτω .css κώδικας να μπορεί να λειτουργήσει στο περίπου στο IE;;;
Στο chrome και firefox δουλεύουν πάνω κάτω το ίδιο... (καλύτερα από όλα στο firefox)

Στον IE από την άλλη τα περισσότερα δεν δουλεύουν... :(

Και επίσης αν πρέπει να αλλαχτεί τελείως για τον IE υπάρχει τρόπος να χρησιμοποιείται άλλο αρχείο για τον IE;;;

*Δεν χρειάζεται να απαντήσεται για όλο το αρχείο φυσικά δείτε δυο-τρία styles...

Κώδικας: Επιλογή όλων

	html{
		overflow-y:scroll;
	} 
	
	body{
		font-family: Arial, Helvetica;
		background:url(images/background.png) repeat-x;
	}
	
	td{
		height: 40px;
	}
	
	fieldset { 
		margin: 10px;
		border: 1px solid #003366;
		display: inline-block;
		background-color: white;
	}
		
	legend {
		background-color: white;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		font-size: 20px;
		font-weight: bold;
		border: 1px solid #003366;
		color: #003366;
	}

	hr{
		border: 1px solid;
		color: #003366;
	}
	
	label {
		float: right;
		margin-right: 10px;
		margin-left: 10px;
		color: #003366;
		font-size:13px;
		font-weight: bold;
		display:inline-block;
	}
	
	input[type="text"] {
		margin-left: 10px;
		margin-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
		padding-right: 5px;
		background-color: #efefef;
		border: 1px solid #898989;
		font-size:16px;
		width:220px;
	}
	
	input[type="text"]:focus{ 
		background-color: #e2e2e2;
		border: 1px solid #898989;
	}
	
	input[type="password"] {
		margin-left: 10px;
		margin-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
		padding-right: 5px;
		background-color: #efefef;
		border: 1px solid #898989;
		font-size:16px;
		width:220px;
	}
	
	input[type="password"]:focus{ 
		background-color: #e2e2e2;
		border: 1px solid #898989;
	}
	
	select {
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #efefef;
		border: 1px solid #898989;
		font-size:16px;
	}
	
	select:focus {
		background-color: #e2e2e2;
		border: 1px solid #898989;
	}

	input[type="submit"]{
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
		background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
		background-color:#ededed;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #898989;
		display:inline-block;
		color:#003366;
		font-family:Arial;		
		font-size:15px;
		font-weight:bold;
		padding:4px 20px;
		text-decoration:none;
	}
	
	input[type="submit"]:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
		background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
		background-color:#dfdfdf;
	}
	
	input[type="submit"]:active {
		position:relative;
		top:1px;
	}
	
	input[type="button"]{
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
		background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
		background-color:#ededed;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #898989;
		display:inline-block;
		color:#003366;
		font-family:Arial;		
		font-size:15px;
		font-weight:bold;
		padding:4px 20px;
		text-decoration:none;
	}
	
	input[type="button"]:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
		background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
		background-color:#dfdfdf;
	}
	
	input[type="button"]:active {
		position:relative;
		top:1px;
	}
	
	textarea{
		margin-left: 10px;
		margin-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
		padding-right: 5px;
		background-color: #efefef;
		border: 1px solid #898989;
		font-size:16px;
		height: 100px;
		width:  300px;
	}
	
	textarea:focus{ 
		background-color: #e2e2e2;
		border: 1px solid #898989;
	}
	
	
	a:link {
		text-decoration: none;
		color: #003366;
		font-size: 13px;
	}
	
	a:visited{
		text-decoration: none;
		color: #003366;
		font-size: 13px;
	}
	
	a:active{
		text-decoration: none;
		color: #003366;
		font-size: 13px;
		font-weight: bold;
	}
	
	a:hover{
		text-decoration: underline;
		color: #003366;
		font-size: 13px;
	}
	
	#check {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 12px;
		background-color: #ffebe8;
		border: 1px solid #dd3c10;
		color: #003366;
		text-align: center;
		clear: both;
	}
	
	.info {
		padding-right: 5px;
		padding-left: 5px;
		font-size:13px;
	}
	
	.address_basic{
		padding-right: 5px;
		padding-left: 5px;
		text-align: right;
		color: #003366;
		font-size:13px;
		font-weight: bold;
		vertical-align: text-top;
	}
	
	#heading{
		color: #003366;
		font-size: 16px;
		font-weight: bold;
	}
	
	#links{
		width: 100%;
		display: inline-block;
	}
	
	#home a{
		background-color: white;
		background-image: url(images/links/homepage_gray.png);
		background-repeat: no-repeat;
		background-position: center; 
		float: left;
		width: 150px;
		text-indent: -9999px;	
		height: 50px;
		text-decoration:none;
		border: 1px solid #898989;
		margin: 10px 5px;
	} 

	#home a:hover{
		background-image: url(images/links/homepage.png);
		background-position: center;
		border: 1px solid #003366; 
	}
	
	#register a{
		background-color: white;
		background-image: url(images/links/register_gray.png);
		background-repeat: no-repeat;
		background-position: center; 
		float: left;
		width: 150px;
		text-indent: -9999px;	
		height: 50px;
		text-decoration:none;
		border: 1px solid #898989;
		margin: 10px 5px;
	} 

	#register a:hover{
		background-image: url(images/links/register.png);
		background-position: center;
		border: 1px solid #003366; 
	}
	
	#profile a{
		background-color: white;
		background-image: url(images/links/profile_gray.png);
		background-repeat: no-repeat;
		background-position: center; 
		float: left;
		width: 150px;
		text-indent: -9999px;	
		height: 50px;
		text-decoration:none;
		border: 1px solid #898989;
		margin: 10px 5px;
	} 

	#profile a:hover{
		background-image: url(images/links/profile.png);
		background-position: center;
		border: 1px solid #003366; 
	}
	
	#logout a{
		background-color: white;
		background-image: url(images/links/logout_gray.png);
		background-repeat: no-repeat;
		background-position: center; 
		float: right;
		width: 150px;
		text-indent: -9999px;	
		height: 50px;
		text-decoration:none;
		border: 1px solid #898989;
		margin: 10px 5px;
	} 

	#logout a:hover{
		background-image: url(images/links/logout.png);
		background-position: center;
		border: 1px solid #003366; 
	}
	
	.married{
		font-size:13px;
		color: #003366;
		font-weight: bold;
		display: block;
		text-align: center;
	}
	
	.kids{
		font-size:13px;
		color: #003366;
		font-weight: bold;
		display: block;
		text-align: center;
	}
	
	#children{
		width: 50px;
		text-align: center;
	}

	#required{
		color: #003366;
		displa: block;
		font-weight: bold;
		vertical-align: bottom;
		font-size: 12px;
		height: 20px;
	}
	
	#address_type{
		width:220px;
	}
	
	#table_heading{
		text-align: center;
		background: white;
		color: #003366;
		font-size: 20px;
		font-weight: bold;
	}
	
	.description{
		padding-top: 15px;
		text-align: right;
		color: #003366;
		font-size:13px;
		font-weight: bold;
		vertical-align: text-top;
	}
	
	#from{
		width: 50px;
		text-align: center;
	}
	
	#year{
		width: 60px;
		text-align: center;
	}
	
	#to{
		width: 50px;
		text-align: center;
	}
	
	.basic {
		padding-right: 5px;
		padding-left: 5px;
		text-align: right;
		color: #003366;
		font-size:13px;
		font-weight: bold;
	}
	
	input[type="submit"].edit {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
		background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
		background-color:#ededed;
		border:1px solid #898989;
		display:inline-block;
		color: #003366;
		font-family:arial;
		font-size:11px;
		font-weight:normal;
		padding:2px 10px;
		text-decoration:none;
	}
	
	input[type="submit"].edit:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
		background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
		background-color:#dfdfdf;
	}
	
	input[type="submit"].edit:active {
		position:relative;
		top:1px;
	}
	
	input[type="submit"].delete {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
		background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
		background-color:#ededed;
		border:1px solid #898989;
		display:inline-block;
		color:red;
		font-family:arial;
		font-size:11px;
		font-weight:normal;
		padding:2px 10px;
		text-decoration:none;
	}
	
	input[type="submit"].delete:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
		background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
		background-color:#dfdfdf;
	}
	
	input[type="submit"].delete:active {
		position:relative;
		top:1px;
	}
	
	.buttons{
		padding-top: 15px;
	}
	
	.form{
		padding:0;
		margin:0;
	} 
	
	.studies{
		padding: 10px;
		color: #003366;
		font-size:15px;
		font-weight: bold;
	}

	.dist_burs{
		padding: 10px;
		color: #003366;
		font-size:15px;
		font-weight: bold;
	}
	
	.scientific_act{
		padding: 10px;
		color: #003366;
		font-size:15px;
		font-weight: bold;
	}
	
	.sel_list{
		width: 220px;
	}
	
	#number{
		width: 60px;
		text-align: center;
	}
	
	#volume{
		width: 60px;
		text-align: center;
	}
	
	#from_page{
		width: 60px;
		text-align: center;
	}
	
	#to_page{
		width: 60px;
		text-align: center;
	}

rafinos
Δημοσιεύσεις: 301
Εγγραφή: 15 Μάιος 2011 00:20
Επικοινωνία:

Css σε firefox και IE

Δημοσίευση από rafinos » 08 Φεβ 2012 14:32

Δείτε τη διαφορά.... καταραμένη Microsoft!!!!

Εικόνα

Εικόνα

Με αυτό
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

σαν να έφτιαξε κάπως...

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες