Regole diverse di background per IE e FF

**fcw5** · 03-05-2007, 11:19

Salve a tutti,

ho questo sito:
www.vnetsoftware.it/massimo/index.html

Visualizzato con IE 7 e FF si vede perfetto, purtroppo ho usato png trasparenti ignorando il fatto che IE 6 e inferiori non le leggono.
Ho cercato in rete e:
- per il div che contiene la scritta rossa ho risolto con un JS in quanto l'immagine è inserita col tag IMG direttamente sul codice html;
- per il div che contiene il disegno del fabbricato avevo quasi risolto con questa regola su CSS (l'ultima in basso), perchè l'immagine è inserita come background nel CSS:

div#sfondo {
height: 762px;
margin: 10px 10px 10px 0px;
width: 960px;
background-image: url(immagini/sfondo.png);
background: none;
background-repeat: no-repeat;
background-position: 0px 120px;
padding-top: 10px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod='scale', src='immagini/sfondo.png');
}

Il problema è il seguente: dovendo scrivere background: none; ed eliminando background-image: url(immagini/sfondo.png); , FF non vede più l'immagine di sfondo, se non la elimino su IE 7 vedo 2 immagini ripetute (non so perchè, ma le posiziona in due punti diversi), ma FF insiste a non visualizzarlo, forse comanda NONE. E' possibile aggiungere la regola background-image: url(immagini/sfondo.png); in modo che la veda solo FF?

Ultima cosa,

il codice html è il seguente:
[...]
<link href="massi.css" rel="stylesheet" type="text/css"/>

<script defer type="text/javascript" src="pngfix.js"></script>

<title>Massimo Allegro Architetto</title>
</head>

<body>
<div id="sfondo">
<div id="Hcorpo">[img]immagini/logo.png[/img]</div>
<div id="Hmenu">
<p class="Hmenu">progetti[img]immagini/puntini.gif[/img]contatti</p>
</div>
</div>
</body>

</html>

Dopo che ho inserito la regola per IE 6 (filter: progid:DXImageTransform...) non riesco più a cliccare sui link CONTATTI e PROGETTI, con IE, sapete dirmi xchè?

Grazie
Fcw

**Immaginando** · 03-05-2007, 12:41

magari non ho capito bene...

ma xche' non usi i commenti condizionali anche x i css?!

cosi' fai vedere lo sfondo a FF e poi con dei css a doc x IE nascondi lo sfondo.

**fcw5** · 03-05-2007, 13:02

Ci sto provando da stamani!

Ho trovato la soluzione per lo sfondo, il codice funziona, purtroppo uso i commenti condizionali su HTML, ma a secondo di come li scrivo ho diverse risposte dai browser.
Mi spiego meglio, se scrivo questo:



<!--[if it IE 7]>
<style type="text/css">
div#sfondo {
background: transparent none no-repeat 0px 120px;
filter: progid

XImageTransform.Microsoft.AlphaImageLoader(sizingM ethod='scale', xsrc='logo.png');
}
</style>
<![endif]-->

Dovrei vedere su IE 7 e FF tutto secondo il CSS e con versione inferiori a IE 7 col codice scritto nell'html. Non so perchè ma IE mi legge i commenti! cioè li vedo scritti in alto alla home page e il codice non ha alcun effetto.
Se scrivo così:

<script type="text/javascript" src="pngfix.js"></script>

La scritta le vedo con sfondo trasparente su tutti i browser, ma penso sia inutile aggiungere i commenti e , giusto?

Se fo la stessa cosa con l'ultimo commento, non vedo più lo sfondo su FF e IE 7.
Se aggiungo degli spazi così <!-- [if it IE 7] > IE non scrive più il codice nella home, ma non ha lo stesso alcun effetto.

Come si fa ad aggiungere un commento condizionali sui CSS? Sull'HTML non ci riesco.

Grazie
Fcw

**Mich_** · 03-05-2007, 15:15

Stai tentando di modificare la sintassi di IE?

Ecco alcuni esempi corretti di CC:

codice:

<!--[if IE]>

<!--[if gte IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Riscrivo la parte in neretto, usando le maiuscole, solo per chiarire i caratteri che si devono usare:

codice:

[IF LTE IE 5.5]

Non confondere la lettera i (come imbuto) con la l (come libro).

**fcw5** · 03-05-2007, 15:50

Grazie Mich_ mi hai fatto notare che avevo scritto male il commento

Adesso è tutto scritto giusto, solo che il contenuto del commento non funziona

<!--[if IE 6]>
<style type="text/css">
div#sfondo {
background: transparent none no-repeat 0px 120px;
filter

rogid

XImageTransform.Microsoft.AlphaImageLoader(sizingM ethod='scale', xsrc='logo.png');
}
</style>
<![endif]-->

Qui ho un pc su cui è montato win 2000 2 IE 6, stamani riusciva a vedere tutti gli sfondi trasparenti, poi a forza di modifiche... adesso riesco a far funzionare solo il JS.

Qualcuno può spiegarmi come funzionano i commenti condizionali?

Se scrivo <!--[if IE 6]> vuol dire che SOLO IE legge il contenuto, e fin qui va bene, ma sempre IE legge anche il successivo <link href="massi.css" rel="stylesheet" type="text/css"/>?
Quale codice div#sfondo ha la precedenza in questi casi? quello scritto nel commento o quello scritto nel css?
Se creo un commento per IE7 linkandolo a massi.CSS, ma tengo lo stesso questo codice per FF <link href="massi.css" rel="stylesheet" type="text/css"/>, ottengo dei risultati?

Grazie a tutti
Fcw

**Mich_** · 03-05-2007, 16:04

Viene usato il codice che viene definito per ultimo. In pratica una ridefinizione sovrascrive una precedente.

Quindi PRIMA si mette il CSS generico/standard e POI si inseriscono le "correzioni" per IE.

Il commento e` un oggetto del codice HTML, al parser CSS non viene passato.
Cioe` al parser CSS viene passato il codice richiamato dai <link> o incluso negli <style> nell'ordine trovato, ed il CSS non puo` sapere dove era contenuta la stringa che sta analizzando.

Per fare delle prove, da` a qualche elemento (blocco) dei colori di sfondo o dei bordi evidenti (e diversi tra i vari pezzi del CSS)

**fcw5** · 03-05-2007, 16:34

Ce l'ho fatta

Grazie Mich_ sei stato gentilissimo, ti posso chiedere un'ultima cosa che non è strettamente inerente al titolo?

In questo codice:

filter

rogid

XImageTransform.Microsoft.AlphaImageLoader(sizingM ethod="scale", src="immagini/sfondo.png");

Se scrivo "scale", lui mi adatta lo sfondo a tutta le pagina, cosa che non avviene su IE7 e FF come da CSS, al suo posto cosa dovrei scrivere per avere l'immagine della sua dimensione reale?

Grazie di nuovo

Fcw

**Mich_** · 03-05-2007, 16:56

Mi spiace: dei filtri di IE non ne capisco nulla.
Forse trovi info precise sul sito di MSDN.

**fcw5** · 03-05-2007, 17:08

Grazie lo stesso, sto giusto leggendo la pagine dal sito di MS, purtroppo ho provato tutti gli attributi concessi, ma credo che il problema sia nella posizione dell'immagine, non essendo più in background non so dove altro specificare la sua posizione

Comunque il più è fatto

peccato che IE6 sia ancora troppo usato.

Ciao Fcw

Discussione: Regole diverse di background per IE e FF

Strumenti discussione

Ricerca discussione

Visualizza

Regole diverse di background per IE e FF

Permessi di invio