compatibilità ie8 e box-shadow

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Buongiorno, sto realizzando un sito in html5, ma naturalmente con le versioni di ie datate non è facilissimo, anzi!
Il mio problema è che ho il menù ed alcuni box che sono in rilievo con la funzione shadows, supportata da tutti, ma con ie7 ed ie 8 non riesco a sistemarla. Ho utilizzato il sistema via css allegando il file PIE.htc ma mi crea uno sfono nero e naturalmente non va bene. Chi mi sa dare qualche delucidazione? Ho provato anche altre forme su css come filter DXImage.... ma l'effetto me lo da sul testo non sul box.
Grazie
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, prova ad inserire questo logica condizionale nella pagina:

PHP:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 
Ultima modifica:

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Ciao, grazie intanto per rispondermi di domenica! :rolleyes:
questo è il codice completo di una pagina con box in rilievo
PHP:
<?php
ini_set('session.gc_maxlifetime',360);
session_start();
if(empty($_SESSION['user_loggato']))
   {
	   echo("Devi prima effettuare il login");
		header("Refresh: 3; URL= index.php");
	  }
?>
<!DOCTYPE HTML>
<html lang="it">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Denislive</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/stile2.css" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/lavalamp.js"></script>
<link href='http://fonts.googleapis.com/css?family=Quintessential' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
</head>
<body>
<section id="contenitore">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<?php
include_once "menu.php"
?>
<!--Menù rollover-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript" src="js/effettomenu.js"></script>
<div class="social"><div class="fb-like" data-href="https://www.facebook.com/denis.topino?fref=ts" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-font="tahoma"></div></div>
<div class="testo">
<br><blockquote> DA DECIDERE COSA METTERE NELLA HOME 
</div>
</section>
<footer><?php include_once 'footer.php' ?></footer>
</body>
</html>

dimenticavo, funzina su ie9 e successive, ma non su ie8 e ie7.

Grazie
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Ciao, guarda il contenuto è all'interno del div con classe testo e il suo css è questo
HTML:
@charset "utf-8";
/* CSS Document */

/*=====Compatibilità con Browser inferiori a IE 9=======*/
header, nav, section, aside, article, footer { display: block;}


html, body{
	height:		100%;
	}

body{
	background: #333 url(../bg.png) repeat top left;
	font-family:Arial;


.testo{
	width: 1010px;
	height: 67%;
	min-height: 300px;
	margin: 0 auto;
	margin-top: 100px !important;
	font-family: "tangerine Regular";
	color: #CCC;
	font-size: 17px;
	position: relative;
	font-size:15px;
	font-family:Arial;
	/*Ombreggiatura bordi*/
	-moz-box-shadow: 5px 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px 5px #000000;
	behavior: url(PIE.htc);
	}
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Prova così:
PHP:
<!DOCTYPE html>
 <html lang="it">
  <head>
  <meta charset="utf-8">
  <title>Testo nel box</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->  
 
 <style>
  @charset "utf-8";
  /* CSS Document */
  header, nav, section, aside, article, footer { display: block;}
  html, body{height:100%;}

  body{
   background: #333 url(../bg.png) repeat top left;
   font-family:Arial;
  }
 
 .testo{
	width: 1010px;
	height: 67%;
	min-height: 300px;
	margin: 0 auto;
	margin-top: 100px !important;
	font-family: "tangerine Regular";
	color: #CCC;
	font-size: 17px;
	position: relative;
	font-size:15px;
	font-family:Arial;
	/*Ombreggiatura bordi*/
	-moz-box-shadow: 5px 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px 5px #000000;
	behavior: url(PIE.htc);
   }
     
 </style>

 </head>
 <body>
   <div class="testo">Ecco il testo</div>
 </body>
</html>
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Domanda secca.
Vedo che richiami la libreria PIE dal css ma hai messo i file nella root del tuo server?
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Nel caso non dovessi aver risolto puoi utilizzare alcuni filtri proprietari della Microsoft.
Un esempio concreto:
Nel commento condizionale potrai sostituire i valori ottenendo il risultato che desideri.
l'ho appena provato e funziona ed è stato interessante. :)
Immetti i parametri del div e la logica condizionale nel tuo scrip e prova :)

PHP:
<style>
 
 @charset "utf-8";
  /* CSS Document */
  header, nav, section, aside, article, footer { display: block;}
  html, body{height:100%;}

  body{
   background: #333 url(../bg.png) repeat top left;
   font-family:Arial;
  }
 
 .testo{
	width: 1010px;
	height: 67%;
	min-height: 300px;
	margin: 0 auto;
	margin-top: 100px !important;
	font-family: "tangerine Regular";
	color: #FFF;
	font-size: 17px;
	position: relative;
	font-size:15px;
	font-family:Arial;
	/*Ombreggiatura bordi*/
	-moz-box-shadow: 5px 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px 5px #000000;
	
   }
   div {
	 width: 1010px;
	 height: 67%;
	 background: #CCC;
	 -moz-box-shadow:    5px 5px 5px 5px #000000;
	 -webkit-box-shadow: 5px 5px 5px 5px #000000;
	 box-shadow: 5px 5px 5px 5px #000000;
	}
     
 </style>
 
<!--[if IE]>
   <style type="text/css">
     div {
        filter: 
           progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=5)
           progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=7)
           progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=7)
           progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=5);
        }
 </style>
<![endif]-->
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Grazie mille helpdesk! Proverò i tuoi consigli.
Il file PIE l'ho inserito nella root del server, o meglio in locale, comunque vedo gli effetti solo che non sono quelli che speravo. Appena riesco a fare delle prove ti aggiorno.
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Eccomi, alllora ho inserito il filtro per ie però purtroppo come già scritto nel mio primo post, la modifica me la da sul testo che scrivo e non sul box. Mi spiego meglio. Ho un div con all'interno un testo normalissimo. Associo a questo div una classe che chiamo testo, ma quando vado ad associare il filtro mi crea un'ombra sul testo non sul box. Quindi non me ne faccio nulla! cosa posso fare?
 

Allegati

  • Immagine.JPG
    Immagine.JPG
    20,6 KB · Visite: 279

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao io l'ho provato online e funziona :)
Prova a metterlo così vedrai che funziona ma elimina il richiamo il PIE
nel css:

PHP:
 !DOCTYPE html>
 <html lang="it">
 <head>
 <meta charset="utf-8">
 <title>Testo nel box</title>

 <style>
  @charset "utf-8";
  /* CSS Document */
  header, nav, section, aside, article, footer { display: block;}
  html, body{height:100%;}

  body{
   background: #333 url(../bg.png) repeat top left;
   font-family:Arial;
  }
 
 .testo{
	width: 1010px;
	height: 67%;
	min-height: 300px;
	margin: 0 auto;
	margin-top: 100px !important;
	font-family: "tangerine Regular";
	color: #FFF;
	font-size: 17px;
	position: relative;
	font-size:15px;
	font-family:Arial;
	/*Ombreggiatura bordi*/
	-moz-box-shadow: 5px 5px 5px 5px #000000;
	-webkit-box-shadow: 5px 5px 5px 5px #000000;
	box-shadow: 5px 5px 5px 5px #000000;
	
   }
   div {
	 width: 1010px;
	 height: 67%;
	 background: #CCC;
	 -moz-box-shadow:    5px 5px 5px 5px #000000;
	 -webkit-box-shadow: 5px 5px 5px 5px #000000;
	 box-shadow: 5px 5px 5px 5px #000000;
	}
     
 </style>
 <!--[if IE]>
   <style type="text/css">
     div {
        filter: 
           progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=5)
           progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=7)
           progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=7)
           progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=5);
        }
 </style>
<![endif]--> 
 
</head>

<body>

  <div class="testo">
    <p> Ecco il testo</p>
  </div>


</body>
</html>
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Questo è l'effetto che crea, ma ho dovuto modificare alcuni parametri. Il markup è questo
PHP:
<!DOCTYPE HTML>
<html lang="it">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>Titolo</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/stile2.css" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/lavalamp.js"></script>
<link href='http://fonts.googleapis.com/css?family=Quintessential' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 <style type="text/css">
   div.testo, sdt_menu {
     width: 1010px;
     height: 67%;
	 background: #333 url(bg.png) no-repeat top left;
     -moz-box-shadow:    5px 5px 5px 5px #000000;
     -webkit-box-shadow: 5px 5px 5px 5px #000000;
     box-shadow: 5px 5px 5px 5px #000000;
    }
     
 </style>
 <!--[if IE]>
   <style type="text/css">
     .testo {
        filter: 
           progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=0,strength=5)
           progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=7)
           progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=180,strength=7)
           progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=270,strength=5);
        }
 </style>
<![endif]--> 
</head>
<body>

il css è rimasto lo stesso. E l'effetto che da è questo
Però ho dovuto ripetere lo sfondo nel box interessato altrimenti non appariva nulla. Il problema è però che se volessi fare lo stesso effetto anche sul menù non riesco a farlo anche seguendo lo stesos modo.
 

Allegati

  • Immagine.JPG
    Immagine.JPG
    18 KB · Visite: 262

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, si come ti avevo detto dovevi cambiare i parametri nella logica condizionale in base alle tue esigenze.
Credo che si possa fare anche per il menù ora digito dall'Ipad domani proverò a creare un esempio :)
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Ciao, grazie per l'impegno che hai nel consigliarmi la strada da fare. Tornando al problema del menù è che dando gli stessi parametri al menù, che è costituito da un ul ed una classe associata, mi sballa il menù e me lo porta su due righe. Bo strano! :book: Appena riesco posto una foto. Per ora grazie:)
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
ciao, periodo impegnato e quindi alcune cose le ho lasciate indietro.
Tornando al discorso ho risolto il problema del menù che mi veniva tagliato, diversamente nel form che ho creato in html5 magicamente quando lo visualizzo in IE8 non vedo le caselle di input della checkbox! :(.
Sai darmi qualche dritta?
 

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
62
Udine
www.stilisticamente.com
Prova anche questo codice:
Codice:
/*	CSS3 - does not work on IE less than version 10	*/
	/*	Border radius	*/
-webkit-border-radius: 0px 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px 0px;
-o-border-radius: 0px 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px 0px;
	/*	Box shadow	*/
-webkit-box-shadow: 0px 0px 5px  #000000;
-moz-box-shadow: 0px 0px 5px  #000000;
box-shadow: 0px 0px 5px  #000000;

	/*	From IE6 to IE8 Specific Code	*/
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(
		OffX=0,
		OffY=0, 
		Color=#000000
	);

/* ********************************************************
*	Only from IE9 and above,
*	then treat with caution and always check the result.
********************************************************* */
border-collapse: separate;
Provato e funziona almeno su IE8
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Compatibilità IE8 :contains() jQuery 0
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
O compatibilità versioni diverse di MySQL MySQL 0
asevenx Problema compatibilità browser con @media screen HTML e CSS 2
I Piccolo roblema di compatibilità mobile.. help! PHP 1
G Compatibilità Firefox Javascript 0
M Compatibilità HTML e CSS 0
filomeni compatibilità IE Javascript 3
StarFish Compatibilità HDD e ram per portatili (Sony Vaio e HP pavilion) Hardware 0
F Compatibilità IE HTML e CSS 4
felino Forzare la compatibilità di Internet Explorer HTML e CSS 0
F compatibilità tra browser HTML e CSS 3
A Aiuto compatibilità browser! HTML e CSS 2
asevenx problema barra menu e compatibilità browser WordPress 6
F Realizzo siti in HTML puro, massima compatibilità Offerte e Richieste di Lavoro e/o Collaborazione 1
P attuale compatibilità HTML5 con i principali browser HTML e CSS 6
P sito e compatibilità con IE9 HTML e CSS 3
A Risoluzione siti internet e compatibilità browser HTML e CSS 1
X Compatibilità php PHP 2
T Problema compatibilità browser HTML e CSS 6
P Problema compatibilità Internet Explorer HTML e CSS 1
I Problema compatibilità CSS HTML e CSS 1
borgo italia html5: dubbi sulla compatibilità HTML e CSS 20
A IE 8 problema visualizzazione e compatibilità Javascript 0
S MySql 5.1 VS MySql 5.0 e compatibilità query MySQL 2
K compatibilità crossbrowser tra opera e firefox HTML e CSS 2
danlupo Problema Layout Compatibilità HTML e CSS 6
A Nuova versione di PHP e vecchi siti: problemi di compatibilità? PHP 1
A problemi compatibilità Flash 9
D Problema compatibilità browser HTML e CSS 2
M Problema "grandezza" link e compatibilità IE: HELP! HTML e CSS 4
S con cosa pubblicare il sito e controllo compatibilità browser HTML e CSS 3
L [AJAX] compatibilità e funzionamento FF e IE Ajax 2
P Problema compatibilità con i browser HTML e CSS 8
SolidSnake4 compatibilità css con ff e ie HTML e CSS 10
B Altezza TD con IE e FF [era:compatibilità IE con Mozilla] HTML e CSS 1
P Problemi di compatibilità PHP 0
S browser:problemi di compatibilità... Javascript 0
Y Compatibilità Firefox e Opera con JavaScript Javascript 0
L compatibilità browser rollover Javascript 1
K Compatibilità sito-browser HTML e CSS 12
F compatibilità sito HTML e CSS 9
MarcoGrazia Problema con bootstrap, saltata tutta la paginazione in IE8 HTML e CSS 1
M problema css con ie8! help HTML e CSS 0
D Problema Con Sito Internet Su Ie8 HTML e CSS 3
L Cross-Browser | problema font tra FF e IE8 HTML e CSS 0
I IE8 non permette gli script. Javascript 2
R Problema visualizzazione alcune pagine con ie8 et similia HTML e CSS 6
PoLe Upload ASP.NET non funziona con IE8 ASP.NET 2
V Mailchimp - box di testo: cambia da solo il testo inserito Email Marketing 2

Discussioni simili