Incompatibilità tra CSS, FF ed IE

**cicciofarmaco** · 08-03-2006, 19:10

Salve gente, sto realizzando un sito ma sto riscontrando problemi di compatibilità tra i css ed i browser FF ed IE. Nel primo la visualizzazione è ottima, nel secondo è modificata!?

Alla luce di qst incompatibilità tra i css e i browsers più noti, mi sorge una semplice quanto esemplificativa domanda. Quando si realizza un sito web con i css, per quale browser bisogna settarlo?

Grazie, Francesco..

**floyd46** · 08-03-2006, 19:55

ciao
dovresti prima di tutto vedere come rende il sito in FF e poi in IE,
magari apportando modifiche con i commenti condizionali per il secondo.
Cmq avresti potuto ottenere la stessa pagina (ne ho vista solo una)
anche se non avessi usato le tabelle.
Floyd

**cicciofarmaco** · 08-03-2006, 20:07

Originariamente inviato da floyd46
ciao dovresti prima di tutto vedere come rende il sito in FF e poi in IE, magari apportando modifiche con i commenti condizionali per il secondo.

Non sono a conoscenza di qst commenti condizionali.. Di cosa si tratta?

Cmq avresti potuto ottenere la stessa pagina (ne ho vista solo una)
anche se non avessi usato le tabelle.
Floyd

In che modo??

**felixsuperstar** · 08-03-2006, 22:16

quale sarebbe la pagina?
i comemmenti condizionali sono utili quando non vi é alcun modo per risolvere l'incompatibilità tra i vari browser..in pratica sono righe di css aggiuntive che vengono lette solo dal browser specificato..se posti pagina o codice possiamo aiutarti...

**cicciofarmaco** · 08-03-2006, 22:20

link pagina

codice:

BODY {
	MARGIN: 0px;  TEXT-ALIGN: center; FONT-SIZE: 11px; COLOR: #ffffff; TEXT-COLOR: #333333;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; background-image: url('bg.bmp');

}
A:link {
	COLOR: #004e90; TEXT-DECORATION: none
}
A:visited {
	COLOR: #004e90; TEXT-DECORATION: none
}
A:hover {
	COLOR: #666666; TEXT-DECORATION: none
}
A:active {
	COLOR: #004e90; TEXT-DECORATION: none
}
A.link_menu {
	FONT-WEIGHT: italic; FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;}
	
A.link_menu:hover {
	FONT-WEIGHT: italic; FONT-SIZE: 9px; COLOR: #004e90; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; }

.footer {
	FONT-SIZE: 9px; PADDING-BOTTOM: 5px; COLOR: #003471; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}



.box_sx {
	BORDER-RIGHT: #004e90 1px solid; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #004e90 1px solid; 
	PADDING-LEFT: 2px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 10px; 
	PADDING-BOTTOM: 2px; 
	MARGIN-LEFT: 0px; 
	BORDER-LEFT: #004e90 1px solid; 
	WIDTH: 170px; 
	COLOR: #004e90; 
	MARGIN-RIGHT: 0px; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #004e90 1px solid; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #ffffff; 
	TEXT-ALIGN: left
}
.box_date_sx {
	FONT-WEIGHT: normal; 
	FONT-SIZE: 10px; 
	COLOR: #003471; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #f0f8ff; 
	TEXT-ALIGN: left
}
.boxTitle_sx {
	BORDER-TOP-WIDTH: 1px; 
	PADDING-RIGHT: 2px; 
	PADDING-LEFT: 2px; 
	FONT-WEIGHT: bold; 
	BORDER-LEFT-WIDTH: 1px; 
	FONT-SIZE: 12px; 
	BORDER-BOTTOM-WIDTH: 1px; 
	PADDING-BOTTOM: 2px; 
	COLOR: white; 
	PADDING-TOP: 2px; 
	BACKGROUND-COLOR: #004e90; 
	TEXT-ALIGN: left; 
	BORDER-RIGHT-WIDTH: 1px
}






.box_center {
	BORDER-RIGHT: #004e90 1px solid; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #004e90 1px solid; 
	PADDING-LEFT: 2px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 9px; 
	PADDING-BOTTOM: 2px; 
	MARGIN-LEFT: 0px; 
	BORDER-LEFT: #004e90 1px solid; 
	WIDTH: 380px; 
	COLOR: #004e90; 
	MARGIN-RIGHT: 0px; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #004e90 1px solid; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #ffffff; 
	TEXT-ALIGN: left
}
.box_date_center {
	FONT-WEIGHT: normal; 
	FONT-SIZE: 10px; 
	COLOR: #004e90; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #ffffff; 
	TEXT-ALIGN: left
}
.boxTitle_center {
	BORDER-TOP-WIDTH: 1px; 
	PADDING-RIGHT: 2px; 
	PADDING-LEFT: 2px; 
	FONT-WEIGHT: bold; 
	BORDER-LEFT-WIDTH: 1px; 
	FONT-SIZE: 12px; 
	COLOR: #ffffff; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BORDER-BOTTOM-WIDTH: 1px; 
	PADDING-BOTTOM: 2px; 
	COLOR: #ffffff; 
	PADDING-TOP: 2px; 
	BACKGROUND-COLOR: #004e90; 
	TEXT-ALIGN: center; 
	BORDER-RIGHT-WIDTH: 0px
	}


.box_dx {
	BORDER-RIGHT: #004e90 1px solid; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #004e90 1px solid; 
	PADDING-LEFT: 2px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 10px; 
	PADDING-BOTTOM: 2px; 
	MARGIN-LEFT: 4px; 
	BORDER-LEFT: #004e90 1px solid; 
	WIDTH: 170px; 
	COLOR: #004e90; 
	MARGIN-RIGHT: 0px; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #004e90 1px solid; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #ffffff; 
	TEXT-ALIGN: left
}
.box_date_dx {
	FONT-WEIGHT: normal; 
	FONT-SIZE: 10px; 
	COLOR: #003471; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #f0f8ff; 
	TEXT-ALIGN: left
}
.boxTitle_dx {
	BORDER-TOP-WIDTH: 1px; 
	PADDING-RIGHT: 2px; 
	PADDING-LEFT: 2px; 
	FONT-WEIGHT: bold; 
	BORDER-LEFT-WIDTH: 1px; 
	FONT-SIZE: 12px; 
	BORDER-BOTTOM-WIDTH: 1px; 
	PADDING-BOTTOM: 2px; 
	COLOR: white; 
	PADDING-TOP: 2px; 
	BACKGROUND-COLOR: #004e90; 
	TEXT-ALIGN: left; 
	BORDER-RIGHT-WIDTH: 1px
}















div#container{  
width: 760px; min-width:300px; margin:0 auto; text-align: center;
}

/*minitabs start here*/

ul#minitabs{
list-style: none;margin: 0; padding: 7px 0; border-top: 4px solid #00aee7; 
font-weight: bold; font-size: 12px; text-align: left; white-space: nowrap;
}
ul#minitabs li{display: inline; margin: 0 3px;
}
ul#minitabs a{text-decoration: none; padding: 0 0 0 0; border-top: 4px solid #ffffff; color: #999999;
}
ul#minitabs a#current{ border-color:#f57e20; color: #006699;
}
ul#minitabs a:hover{ border-color: #cccccc; color: #666666;
}


.table{ 
background-image: url(testata.jpg); height: 200px;
}
.table_gen{ 
background-color: #FFFFFF;
}


/*Example CSS for the two demo scrollers*/

#pscroller1{

height: 100px;
BORDER-RIGHT: #004e90 1px solid; 
PADDING-RIGHT: 2px; 
BORDER-TOP: #004e90 0px solid; 
PADDING-LEFT: 2px; 
FONT-WEIGHT: italic; 
FONT-SIZE: 10px; 
PADDING-BOTTOM: 2px; 
MARGIN-LEFT: 0px; 
BORDER-LEFT: #004e90 1px solid; 
WIDTH: 170px; 
COLOR: #004e90; 
MARGIN-RIGHT: 0px; 
PADDING-TOP: 2px; 
BORDER-BOTTOM: #004e90 1px solid; 
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
BACKGROUND-COLOR: #ffffff; 
TEXT-ALIGN: left
}
.someclass{ //class to apply to your scroller(s) if desired
}

.box_news {
	BORDER-RIGHT: #004e90 1px solid; 
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #004e90 1px solid; 
	PADDING-LEFT: 2px; 
	FONT-WEIGHT: bold; 
	FONT-SIZE: 10px; 
	PADDING-BOTTOM: 2px; 
	MARGIN-LEFT: 0px; 
	BORDER-LEFT: #004e90 1px solid; 
	WIDTH: 170px; 
	COLOR: #004e90; 
	MARGIN-RIGHT: 0px; 
	PADDING-TOP: 2px; 
	BORDER-BOTTOM: #004e90 0px solid; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #ffffff; 
	TEXT-ALIGN: left
}
.box_body {
	FONT-WEIGHT: normal; 
	FONT-SIZE: 10px; 
	COLOR: #333333; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	BACKGROUND-COLOR: #ffffff; 
	TEXT-ALIGN: left
}

A.link_1{
	COLOR: #f57e20; TEXT-DECORATION: underline; FONT-WEIGHT: bold; 
}

A.link_1:hover {
	COLOR: #f57e20; TEXT-DECORATION: none; FONT-WEIGHT: bold; 
}

A.link_2{
	COLOR: #ffffff; TEXT-DECORATION: none; FONT-SIZE: 12px; BACKGROUND-COLOR: #999999; FONT-WEIGHT: bold;
}

A.link_2:hover {
	COLOR: #ffffff; TEXT-DECORATION: none; FONT-SIZE: 12px; BACKGROUND-COLOR: #f57e20; FONT-WEIGHT: bold;
}



A.calend{
	COLOR: #f57e20; TEXT-DECORATION: none; FONT-SIZE: 10px; BACKGROUND-COLOR: #ffffff; FONT-WEIGHT: italic;
}

A.calend:hover {
	COLOR: #ffffff; TEXT-DECORATION: none; FONT-SIZE: 10px; BACKGROUND-COLOR: #f57e20; FONT-WEIGHT: bold;
}

A.accessibilita{
	COLOR: #ffffff; TEXT-DECORATION: none; FONT-SIZE: 12px; BACKGROUND-COLOR: #ffffff; 
}

A.accessibilita:hover {
	COLOR: #ffffff; TEXT-DECORATION: none; FONT-SIZE: 12px; BACKGROUND-COLOR: #f57e20; 
}
.text {
	COLOR: #333333;
}

.copyright{
TEXT-ALIGN: center; FONT-SIZE: 11px; TEXT-COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

Ecco fatto..

**cicciofarmaco** · 10-03-2006, 13:51

Aiutooooo..

**Mich_** · 13-03-2006, 09:54

Ho cercato di capire qualcosa, ma il link non e` funzionante (pagina index mancante).
Per quanto riguarda il codice postato, non capisco se sono due CSS diversi, o e` inserito in un'unica pagina.

Comunque ci sono errori di sintassi: non esiste il tag <A> (maiuscolo): in qualche linguaggio (quelli vecchi o transitional) e` accettato, ma non come selettore nel CSS (ci sono browser che non lo accettano).

Inoltre per capire il CSS e` necessario vedere il codice HTML: il C del CSS sta per "cascading", "a cascata". Vuol dire che lo stile di un elemento padre influenza l'elemento figlio.

**cicciofarmaco** · 13-03-2006, 12:04

link nuovo

Vuol dire che lo stile di un elemento padre influenza l'elemento figlio.

E quindi?..scusami ma non ho capito!

**Mich_** · 13-03-2006, 12:40

Stai usando un miscuglio di linguaggi che non vanno molto d'accordo fra loro.

La mia impressione e` che hai rubato pezzi ed idee da siti fatti un po` in fretta (oppure che usi un editor non aggiornato), per cui l'insieme non e` molto coerente.

Ad esempio la formattazione HTML:
<table width="760" height="200" border="0" align="center" cellpadding="0" cellspacing="0">
fa a pugni con le dichiarazioni analoghe del CSS (chi deve vincere incaso di conflitto?): dovresti eliminare le formattazioni HTML.

Anche l'uso delle tabelle per formattare: non e` programmazione moderna: e` HTML2 (quando non c'era altro modo, ma parliamo di oltre dieci anni fa).

**cicciofarmaco** · 13-03-2006, 13:27

..ma allora devo modificare il codice html o il css?

Discussione: Incompatibilità tra CSS, FF ed IE

Strumenti discussione

Ricerca discussione

Visualizza

Incompatibilità tra CSS, FF ed IE

Re: Incompatibilità tra CSS, FF ed IE

Re: Re: Incompatibilità tra CSS, FF ed IE

Permessi di invio