font-family ie diverso da firefox

**wiulma** · 07-02-2006, 11:24

ciao a tutti, sto facendo delle prove sul mio sito.
utilizzo un font particolare, e per evitare problemi ho definito nel mio font-family anche un carattere standard, in modo da non aver problemi di visualizzaizone.

solo che con firefox vedo tutto correttamente, invece, con ie non vedo le scritte se tolgo il font particolare. è come se ie non leggesse il secondo font del font-family e,visto che non trova il primo, non mi fa vedere niente.

posto il css:

grazie!

-------------- CODE ----------------

BODY
{
BACKGROUND-IMAGE: url(Sfondo.jpg);
font-family: Flintstone,Verdana;
}

.homeBody {
background-image: url(sfondoColor.gif);
background-repeat: repeat;

}

A.textArancio
{
font-size: larger;
COLOR: #ff8000;

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

TEXT-DECORATION: none;

}
A.textVerde
{
FONT-WEIGHT: bold;
COLOR: green;

TEXT-DECORATION: none
}
A.textVerde:hover
{
FONT-WEIGHT: bold;
COLOR: green;

TEXT-DECORATION: none
}

A.link_menu
{
BORDER-TOP-WIDTH: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px;
text-decoration: none;
vertical-align: middle;

}

.img_menu
{
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px;
border: 0;

}
TABLE.pageTitle
{
BORDER-RIGHT: red solid;
BORDER-TOP: red solid;
BORDER-LEFT: red solid;
BORDER-BOTTOM: red solid

}
TD.pageTitle
{
BORDER-RIGHT: teal solid;
BORDER-TOP: teal solid;
BORDER-LEFT: teal solid;
BORDER-BOTTOM: teal solid;
BACKGROUND-COLOR: paleturquoise;

}

.tableList {
}

.tableFoto {
width: 100%;
vertical-align: top;
height: 100%;

}

.linkMenu
{
BORDER-RIGHT: solid;
BORDER-TOP: solid;
BORDER-LEFT: solid;
COLOR: Black;
BORDER-BOTTOM: solid;
BACKGROUND-COLOR: White;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
border: thin solid;
font-weight: 500;
padding-left: 0;
padding-right: 0;
font-size: small;
height: 20;
vertical-align: middle;

}

.linkMenuHover
{
BORDER-RIGHT: solid;
BORDER-TOP: solid;
BORDER-LEFT: solid;
COLOR: White;
BORDER-BOTTOM: solid;
BACKGROUND-COLOR: #F1EBAF;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
border: thin solid;
font-weight: 500;
font-size: small;
padding-left: 0;
padding-right: 0;
height: 20;

}

.linkMenu.visited
{
BORDER-RIGHT: solid;
BORDER-TOP: solid;
BORDER-LEFT: solid;
COLOR: White;
BORDER-BOTTOM: solid;
BACKGROUND-COLOR: #F1EBAF;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
border: thin solid;
font-weight: 500;
font-size: small;
padding-left: 0;
padding-right: 0;
height: 20;

}

.linkMenuActive
{
BORDER-RIGHT: #C0E1EB solid;
BORDER-TOP: #C0E1EB solid;
BORDER-LEFT: #C0E1EB solid;
COLOR: White;
BORDER-BOTTOM: #C0E1EB solid;
BACKGROUND-COLOR: #C0E1EB;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
border: thin solid #C0E1EB;
font-weight: 500;
font-size: small;
padding-left: 0;
padding-right: 0;
height: 20;

}

.linkMenuActive:hover
{
BORDER-RIGHT: #C0E1EB solid;
BORDER-TOP: #C0E1EB solid;
BORDER-LEFT: #C0E1EB solid;
COLOR: White;
BORDER-BOTTOM:#C0E1EB solid;
BACKGROUND-COLOR: #C0E1EB;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
border: medium solid #C0E1EB;
font-weight: 500;
font-size: small;
padding-left: 0;
padding-right: 0;
height: 20;

}

.linkMenuActive.vivited
{
BORDER-RIGHT: #C0E1EB solid;
BORDER-TOP: #C0E1EB solid;
BORDER-LEFT: #C0E1EB solid;
COLOR: White;
BORDER-BOTTOM:#C0E1EB solid;
BACKGROUND-COLOR: #C0E1EB;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
border: medium solid #C0E1EB;
font-weight: 500;
font-size: small;
padding-left: 0;
padding-right: 0;
height: 20;

}

.simpleLink
{
text-decoration: none;

border: 0;
color: Aqua;
border-style: none;
}

.simpleLink:hover
{
TEXT-DECORATION: none;

border: 0;
color: Aqua;
border-style: none;
}

.simpleLink.visited
{
TEXT-DECORATION: none;

border: 0;
color: Aqua;
border-style: none;
}

BODY.menuBody
{
background-repeat: repeat-x;
background-position: center;
background-image: url(sfondeVert.GIF);
vertical-align: middle;
margin-top: 7;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;

}

.tableFoto {
vertical-align: top;
border: 0;

}

.tableList {
}

.scrollImage {

}

.2scrollImage {
width: 100%;
height: 100%;
}

.smallImage {
width: 40;
height: 30;
}

.textGiallo
{
FONT-WEIGHT: bold;
COLOR: #E7E800;

TEXT-DECORATION: none;
}

.textBlu
{
FONT-WEIGHT: bold;
COLOR: Blue;

TEXT-DECORATION: none;
}

.textRosso
{
FONT-WEIGHT: bold;
COLOR: #EE0000;

}

.textArancio
{
FONT-WEIGHT: bold;
COLOR: #ff8000;

TEXT-DECORATION: none;
}

.contornoArancio {
border-bottom-color: #ff8000;
border-bottom-width: medium;
border-left-color: #ff8000;
border-left-width: medium;
border-right-color: #ff8000;
border-right-width: medium;
border-top-color: #ff8000;
border-top-width: medium;
border-bottom-style: solid;
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
height: 380px;
border-width: 5;
border-spacing: 0;

}

.contornoVerde {
border-bottom-color: green;
border-bottom-width: medium;
border-left-color: green;
border-left-width: medium;
border-right-color: green;
border-right-width: medium;
border-top-color: green;
border-top-width: medium;
border-bottom-style: solid;
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
height: 370px;
overflow: scroll;
border-spacing: 0;
border-width: 5;

}

.contornoVerdeNoScroll {
border-bottom-color: green;
border-bottom-width: medium;
border-left-color: green;
border-left-width: medium;
border-right-color: green;
border-right-width: medium;
border-top-color: green;
border-top-width: medium;
border-bottom-style: solid;
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
height: 370px;
border-spacing: 0;
border-width: 5;

}

.titleList {

font-size: x-large;
}

.frameList {
width: 99%;
height: 340px;
border: 0;

}

.imgList {
width: 200px;
height: 150px;
border-bottom: solid #ff8000;
border-top: solid #ff8000;
border-left: solid green;
border-right: solid green;
border-spacing: 0;

}

.simpleImg {
border: 0;
border-spacing: 0;
}

------------- FINE CODE -----------

**Mich_** · 07-02-2006, 12:20

Non ho guardato tutto il CSS, ma solo la prima definizione del font.

Sei sicuro che il browser abbia (riconosca) il Verdana?
i "sacri testi" consigliano di inserire anche un font generico alla fine:
font-family: Flintstone, Verdana, arial, sans-serif;

Altro dubbio: Verdana si scrive con la maiuscola? Perche` gli altri si scrivono con la minuscola.

**andrea.paiola** · 07-02-2006, 12:28

esempio generico di definizione cross-browser:

codice:

html, body{font-family: Verdana, sans-serif; font-size: 100%}

dovrebbe andare bene

si, verdana si scrive con la maiuscola

**wiulma** · 07-02-2006, 12:49

niente...ho aggiunto anche gli altri 2 caratteri, ma con ie continuo a non vedere niente, con firefox sempre tutto ok.

vi posto uno dei testi che non vedo:

<td id="linkFoto" class="linkMenu" onMouseover="javascript:cssHover('linkFoto')" onMouseOut="javascript:cssOut('linkFoto');">
<a href="foto.asp" onclick="caricaPage('linkFoto')" target="frameCorpo" class="simpleLink">
<FONT >
<FONT color=#008000>F</FONT>
<FONT color=#ff8000>O</FONT>
<FONT color=#008000>T</FONT>
<FONT color=#ff8000>O</FONT>
</FONT>
</a>
</td>

**Mich_** · 07-02-2006, 13:15

Ma che linguaggio usi?

Perche` ci sono diversi errori in quanto scrivi.

Nei CSS (come pure in XHTML) i tag vanno scritti minuscoli:
body {
BACKGROUND-IMAGE: url(Sfondo.jpg); /* questo puo` anche stare maiuscolo, anche se e` sconsigliato */
font-family: Flintstone,Verdana;
}

Il tag <font> non esiste piu` (qualche browser potrebbe non riconoscerlo).

Sei sicuro di non ridefinire i font in qualche definizione CSS piu` interna? O in qualche attributo HTML?

**wiulma** · 07-02-2006, 15:13

e cosa devo usare al posto di font?

l'unica definizione di stile prima della parte di codice che ti mandato è la seguente:

<table width="90%" align="center">

**Mich_** · 07-02-2006, 15:39

Qualsiasi altro tag puo` fare la funzione del <font>, con opportuno CSS; se non sai cosa usare puoi servirti dello <span>.

**wiulma** · 07-02-2006, 15:41

ok, allora intanto sostituisco font con <span>.

hai altri suggerimenti?

**Mich_** · 07-02-2006, 15:47

Se la pagina e` in linea, posta il link.
Ho l'impressione che ci sia qualche grosso problema di sintassi o di semantica in quella pagina, ma non riesco a capire quale, da quello che scrivi.

**wiulma** · 07-02-2006, 15:49

ti posto il codice della pagina:

<html>
<head>
<link REL="stylesheet" TYPE="text/css" HREF="../images/main.CSS">
<title>Ultras Unione</title>
</head>
<body class="menuBody">
<script language="javascript">
var arrMenu = new Array(6);

arrMenu[0] = 'linkHome';
arrMenu[1] = 'linkFoto';
arrMenu[2] = 'linkFanza';
arrMenu[3] = 'linkAmici';
arrMenu[4] = 'linkLinks';
arrMenu[5] = 'linkStoria';

function caricaPage (strID) {
for (i = 0;i< arrMenu.length;i++) {
app = document.getElementById(arrMenu[i]);
if(strID==arrMenu[i]) {
app.className = 'linkMenuActive';
} else {
app.className = 'linkMenu';
}
}
}

function cssHover(strID) {
for (i = 0;i< arrMenu.length;i++) {
app = document.getElementById(arrMenu[i]);
if(app.className != 'linkMenuActive') {
if(strID==arrMenu[i]) {
app.className = 'linkMenuHover';
} else {
app.className = 'linkMenu';
}
}
}
}

function cssOut(strID) {
app = document.getElementById(strID);

if (app.className=='linkMenuHover')
app.className='linkMenu';
}

</script>

<table width="90%" align="center">
<tr>
<td id="linkHome" class="linkMenu" onMouseover="javascript:cssHover('linkHome')" onMouseOut="javascript:cssOut('linkHome');">
<a href="principale.asp" onclick="caricaPage('linkHome')" target="frameCorpo" class="simpleLink" >
[img]../images/mnu_home.gif[/img]
</a>
</td>
<td id="linkFoto" class="linkMenu" onMouseover="javascript:cssHover('linkFoto')" onMouseOut="javascript:cssOut('linkFoto');">
<a href="foto.asp" onclick="caricaPage('linkFoto')" target="frameCorpo" >
<span color=#008000>F</span>
<span color=#ff8000>O</span>
<span color=#008000>T</span>
<span color=#ff8000>O</span>
</a>
</td>

</tr>

</table>
</body>
</html>

Discussione: font-family ie diverso da firefox

Strumenti discussione

Ricerca discussione

Visualizza

font-family ie diverso da firefox

Permessi di invio