compatibilità ie8 e box-shadow

Paperino78 · 20 Apr 2013

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 · 20 Apr 2013

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]-->

Paperino78 · 21 Apr 2013

helpdesk ha scritto:
Ciao, prova ad inserire questo logica condizionale nella pagina:

PHP:



L'avevo già inserita.

helpdesk · 21 Apr 2013

Ciao, e non ti funziona?
Posta il codice

Paperino78 · 21 Apr 2013

Ciao, grazie intanto per rispondermi di domenica!

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

helpdesk · 21 Apr 2013

Ciao, no voglio vedere semplicemente le regole css e il contenitore che vuoi visualizzare.

Paperino78 · 21 Apr 2013

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 · 21 Apr 2013

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 · 21 Apr 2013

Domanda secca.
Vedo che richiami la libreria PIE dal css ma hai messo i file nella root del tuo server?

helpdesk · 21 Apr 2013

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 · 21 Apr 2013

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 · 22 Apr 2013

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?

helpdesk · 22 Apr 2013

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 · 22 Apr 2013

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.

helpdesk · 22 Apr 2013

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 · 23 Apr 2013

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 · 26 Giu 2013

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 · 17 Ott 2013

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

compatibilità ie8 e box-shadow

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Allegati

Utente Attivo

Utente Attivo

Allegati

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Discussioni simili