Problema con sfondo iframe trasparente su IE [era: Pagina PHP compatibile IE...]

**araim** · 21-05-2011, 16.06.11

Ciao ragazzi, sto facendo un sito internet ed ho problemi con il template. Su FIREFOX e CHROME ed OPERA si vede bene, su IE no. IE ha una pagina personalizzata, eppure gli iframe di molte pagine hanno sfondo bianco piuttosto che trasparenza per visualizzare lo sfondo.

Mi aiutate??

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="./js_moo/mootools.js"></script>
	<script type="text/javascript" src="./js_moo/fx_slide.js"></script>
	<script type="text/javascript" src="./js_moo/accordion.js"></script>
	<script type="text/javascript" src="./js_moo/mouseenter_leave.js"></script>

<title>Terre di Leonesse - Comunità virtuale medievale fantasy</title>

<script type="text/javascript">

// ADATTA LA PAGINA ALLO SCHERMO
	self.resizeTo(screen.availWidth,screen.availHeight);	

// RIDIMENSIONAMENTO DELLA PAGINA SUL LOGIN

function sizepage() {

	space = document.getElementById('pagina');
	space.setAttribute('style', 'left: 300px;');

		}


	// SCRIPT DEL VESSILLO

function page() {
	
		space = document.getElementById('pagina');
		lft = space.style.left;
			
		if(lft=='300px') { space.setAttribute('style','left: 0px;'); } else { space.setAttribute('style','left: 300px;'); }
	
	}

</script>
<link rel="stylesheet" type="text/css" href="./template/ie/style.css" />

</head>

<body onload="sizepage()">

	<div id="pagina"> <iframe name="mainFrame" width="100%" height="100%" frameborder="0" allowtransparency="false"></iframe> </div>	
    
    <div id="bg_rosso">
    
    <div id="luogo"><iframe name="luogo" src="./luogo.php" width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="false"></iframe></div>
        <div id="navbar"><iframe name="navbar" src="./navbar.php" width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="false"></iframe></div>
    </div>
    
    <div id="drappo_rosso">
    	<div id="drappo_hide"> 
		
                        <div id="drappo_hd">
                            <b class="toggler">Di Guardia</b>
                            <div class="element">
                                <iframe name="guardiaSmall" width="235" height="250" frameborder="0" scrolling="no" allowtransparency="false" src="userlist.php"></iframe>   
                            </div> 
                            
                            <b class="toggler">Missive</b>
                            <div class="element">
                                <iframe name="postaSmall" width="235" height="250" frameborder="0" scrolling="no" allowtransparency="false" src="../posta/postasmall.php"></iframe>   
                            </div>
                            
              
                            <b class="toggler">Strumenti</b>
                            <div class="element">
                                <iframe name="personalizzaSmall"width="235" height="250" frameborder="0" scrolling="no" allowtransparency="false" src="../personalizza/index.php" ></iframe>
                            </div>                           
                        
                        </div>

			 </div>
        <div id="drappo_vsbl">
        	<div id="bordi_vsbl">        
                         
                <div style="float: right; width: auto; height: auto; margin-right: 0px;">
                	<a id="v_toggle" href="#" onClick="page()"> <img src="template/araim/chiave.png" vspace="0" align="left"> </a> 
        		</div>
                
   		  		<iframe name="avatarSmall" height="140" width="230" frameborder="0" scrolling="no" allowtransparency="false" src="drappo_vsbl.php"></iframe>
       		</div>
        </div>
    </div>
    
</body>
</html>

Codice HTML:

@charset "UTF-8";
/* CSS Document */

	body { font-family: Verdana; font-size: 12px; color: #000; background-color: #F4E7B9; margin: 0px; padding: 0px; }
	a { font-family: Verdana; font-size: 12px; color: #FFF; text-decoration: none; }
	p { font-family: Verdana; font-size: 12px; color: #FFF; padding: 5px; margin: 5px; }
	img { border: 0px; padding: 0px; }

	div#bg_rosso { width: 100%; height: 200px; background-image: url(bg_rosso.png); background-repeat: repeat-x; }
	div#luogo { float: right; width: 370px; height: 150px; background-color: #600; }
	div#navbar { float: left; position: absolute; top: 5px; left: 300px; width: 340px; height: 150px; background-color: #600; }
	
	div#drappo_rosso { position: absolute; top: 0px; left: 0px; margin: 0px; width: 300px; height: auto; }
	div#drappo_hide { width: 300px; height: 350px; margin: 0px; padding: 0px; background-image: url(bg_drappo.png); background-repeat: repeat-y; }
	div#drappo_hd { margin-left: 30px; width: 240px; height: 330px; }
	
	div#drappo_vsbl { width: 300px; height: 230px; margin: 0px; padding: 0px; background-image: url(img_drappo.png); background-repeat: no-repeat; }
	div#bordi_vsbl { margin-left: 35px; padding-top: 5px; width: 225px; height: 160px; color: #FFF; }
	
	div#pagina { width: auto; height: auto; position: absolute; top: 220px; right: 0px; bottom: 0px; margin: 0px; padding: 5px; }
	
	b.toggler { width: 240px; float: left; margin-bottom: 2px; background-color: #600; text-indent: 5px; padding: 1px; cursor: pointer; }
	div.element { width: 240px; height: auto; float: left; font-size: 12px; overflow: hidden; }

**karl94** · 21-05-2011, 16.11.36

Le vecchie versioni di Internet Explorer necessitavano di impostare l'attributo non standard allowtransparency su true per ottenere l'effetto che ti serve.

**araim** · 21-05-2011, 16.14.33

ok... provo e vediamo cosa accade. Grazie.

**karl94** · 21-05-2011, 16.19.57

Nell'ultima versione l'attributo non è presente, ti consiglio di lasciarlo così: il problema non è tuo, sono gli sviluppatori di quel "browser" che hanno sbagliato; e così magari gli utenti capiranno anche che ci sono differenze tra i vari browser.

**araim** · 22-05-2011, 02.19.04

fortuna che ho l'iPad jailbreak ed ho un programmino che simula il browser IE, altrimenti da macbook non avrei saputo come testare questa "modifica" ... sembra funzionare bene con questo emulatore, spero vivamente che vada anche nel browser tradizionale...

**karl94** · 22-05-2011, 12.50.32

Per verificare la visualizzazione sui diversi browser, puoi usare i servizi indicati in questa discussione: http://forum.it.altervista.org/valid...i-browser.html.

Discussione: Problema con sfondo iframe trasparente su IE [era: Pagina PHP compatibile IE...]

LinkBack

Strumenti discussione

Display

Problema con sfondo iframe trasparente su IE [era: Pagina PHP compatibile IE...]

Regole di scrittura