problema magnifier su IE

**luci88** · 05-11-2007, 21:09

Salve a tutti,

ho inserito in una pagina una serie di link con un effetto mignifier sul rollover, ma mentre Firefox lo interpreta bene, IE no.

Ecco il link alla pagina di prova, così potete vedere con i vostri occhi: http://www.brueckenbauer.it/test/ssf/it/camere.html

ed ecco il css:

#enlarge {
padding:0;
margin:3em auto;
list-style-type:none;
width:683px;
height:113px;
}
#enlarge li {
display:block;
float:left;
width:160px;
height:123px;
position:relative;
margin: 0 10px;
}
#enlarge li a {
display:block;
width:150px;
height:113px;
padding:6px;
border:1px #999999 solid;
background-color:#FFFFFF;
overflow:hidden;
position:relative;
}
#enlarge li a img {
width:100%;
height:100%;
border:0;
}
#enlarge li a:hover {
position:absolute;
left:-80px;
top:-61px;
width:300px;
height:225px;
z-index:100;
}

sapreste dirmi qual è il problema??

grazie

**luci88** · 06-11-2007, 03:04

mi ci sto rompendo la testa e sono quasi sicuro che sia un problema di z-index!!

aiutatemi

**H5N1_Aviaria** · 06-11-2007, 04:34

Non è un problema di z-index, ma di come IE gestisce il box model (al solito).
Il posizionamento relativo ed assoluto sono ostici da mandar giù per IE!

Se diversi BOX con posizionamento relativo o assoluto sono dentro un altro BOX con posizionamento relativo IE visualizza "sopra" (z-index) gli elementi successivi : ovvero l'ultimo sarà "sopra" il penultimo che sarà "sopra" al terzultimo INDIPENDENTEMENTE dall'attributo z-index.
Soluzione: rimuovere tutti quei position:relative inutili.

codice:

#enlarge {
	padding:0; 
	margin:3em auto; 
	list-style-type:none; 
	width:683px; 
	height:113px;
		/*position : relative;*/
}
#enlarge li {
	display:block; 
	float:left; 
	width:160px; 
	height:123px; 
		/*position : relative;*/
	margin: 0 10px; 

}
#enlarge li a {
	display:block; 
	width:150px; 
	height:113px; 
	padding:6px; 
	border:1px #999999 solid; 
	background-color:#FFFFFF; 
	overflow:hidden; 
	/*position:absolute;*/
}

#enlarge li a img {
	width:100%; 
	height:100%; 
	border:none;
}
#enlarge li a:hover {
	position: absolute;
	left:-80px; 
	top:-61px; 
	width:300px; 
	height:225px; 
}

Testato con IE7, Firefox 2.0.0.9, Opera 9.3 e Safari beta.

Problema aggiuntivo: in IE 6 non funziona!

Niente paura!!!
Ecco il codice da inserire solo per IE6 con <!--[if IE6]>:

codice:

#enlarge li a:hover {
position : relative;
margin : 0;
padding : 1px;
margin: 0 -140px -300px 0;
}

Testato con IE6sp1

**luci88** · 06-11-2007, 11:00

sei stato gentilissimo e molto chiaro, ma purtroppo il codice che mi hai fornito non funziona

sempre all'indirizzo http://www.brueckenbauer.it/test/ssf/it/camere.html ho aggiornato il css così puoi vedere tu stesso che effetto produce!

come mai??

**H5N1_Aviaria** · 06-11-2007, 11:36

codice:

<!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=iso-8859-1" />
<title>Hotel San Siro Fiera</title>
<style>
html, body {
	margin:0; 
	padding:0;
}
body {
	background: #A3B6FF url(img/gradiente.jpg) repeat-x bottom;
	font-family: Georgia, Times, serif;
	font-size: 13px;
	line-height: 1.5em;
	color: #494949;
	text-align: left;
}
div#container {
	width: 730px;
	margin: 0 auto;
}
div#top {
	background: url(img/bg_top.jpg);
	height: 18px;
	margin: 0 auto;
}
div#intestazione {
	background: #BBC2DE;
	height: 160px;
}
div#middle {
	height: 100%;
	background: url(img/bg_mid.gif);
}
div#bottom {
	height: 20px;
	background: url(img/bg_bot.jpg);
}
div#container_content {
	width: 683px;
	margin: 0 24px;
}
.top {
	background-image: url(img/logo_back.jpg);
	float: right;
	margin: 0;
}
img#logo {
	float: left;
}
div#nav {
	background: url(img/nav.jpg);
	height: 35px;
	margin: 0;
	padding-top: 5px;
	clear: both;
	font-size: 13px;
	color: #FFFFFF;
	letter-spacing: 2px;
	text-align: center;
}
div#lingue {
	height: 15px;
	margin-top: -4px;
	padding: 0 10px 5px 0;
	font-size: 10px;
	color: #666666;
	text-align: right;
}
div#foto_lat {
	width: 260px;
	height: 100%;
	padding: 0 10px 20px 7px;
	float: left;
}
div#foto_lat_hot {
	width: 260px;
	height: 520px;
	padding: 0 10px 20px 7px;
	float: left;
	background: url(img/hotel.jpg) top no-repeat;
}
div#foto_lat_ser {
	width: 260px;
	height: 400px;
	padding: 0 10px 20px 7px;
	float: left;
	background: url(img/servizi.jpg) top no-repeat;
}
div#cont_testo {
	float: right;
	padding: 5px 5px;
	width: 381px;
	background: url(img/logo_back_mid.jpg) center no-repeat; 
}
div#cont_testo_cam {
	padding: 5px 15px 0 10px;
	width: 100%;
	background: url(img/logo_back_mid.jpg) center no-repeat; 
}
div#testo_hot {
	padding-bottom: 20px;
}
div#elenco_home {
	width: 381px;
	padding-bottom: 10px;
}
div#elenco_home_l {
	padding-right: 10px;
	width: 180px;
	float: left;
}
div#elenco_home_r {
	padding-left: 10px;
	width: 181px;
	float: right;
}
dl.el_home {
	width: 180px;
}
dt.el_home {
	font-weight: bold;
	width: 170px;
}
dd.el_home {
	margin: 0.2em 0 1em;
	line-height: 1.3em;
}
a.el_home:link, a.el_home:visited, a.el_home:active {
	display:block;
	color: #494949;
	background-color: #BBC2DE;
	border: 1px solid #5E76D2;
	text-decoration: underline;
	padding-left: 7px;
}
a.el_home:hover {
	color: #5469BB;
	background-color: #DDE0ED;
	border: 1px solid #999999;
	text-decoration: underline;
	padding-left: 7px;
}
a.nav:link, a.nav:visited, a.nav:active {
	color: white;
	text-decoration: none;
}
a.nav:hover {
	color: white;
	text-decoration: underline;
}
a.lin:link, a.lin:visited, a.lin:active {
	color: #666666;
	text-decoration: none;
}
a.lin:hover {
	color: #666666;
	text-decoration: underline;
}
.sei_qui {
	text-decoration: underline;
}
div#crediti {
	height: 20px;
	background-color: #5E76D2;
	color: white;
	font-size: 10px;
	padding: 0 10px;
	clear: both;
}
div#cred_l {
	float: left;
}
div#cred_r {
	float: right;
}
a.cred:link, a.cred:visited, a.cred:active {
	color: white;
	text-decoration: underline;
}
a.cred:hover {
	color: white;
	text-decoration: none;
}
div#post_cred {
	height: 20px;
	font-size: 10px;
	padding: 0 10px;
	margin-bottom: 3px;
}
div#sitemap {
	float: left;
}
div#validatori {
	float: right;
}
a.testo:link, a.testo:visited, a.testo:active {
	color: #494949;
	text-decoration: underline;
}
a.testo:hover {
	color: #494949;
	text-decoration: none;
}
#titolo {
	color: #333333;
	letter-spacing: 2px;
	font-weight: bold;
	text-decoration: underline;
	font-size: 15px;
}
dl.serv {
	width: 100%;
}
dt.serv {
	width: 95%;
	border-bottom: #BBC2DE solid 2px;
	font-weight: bold;
}
dd.serv {
	margin: 0.2em 0 1em;
}
#enlarge {
	padding:0; 
	margin:3em auto; 
	list-style-type:none; 
	width:683px; 
	height:113px;
}
#enlarge li {
	display:block; 
	float:left; 
	width:160px; 
	height:123px; 
	margin: 0 10px; 

}
#enlarge li a {
	display:block; 
	width:150px; 
	height:113px; 
	padding:6px; 
	border:1px #999999 solid; 
	background-color:#FFFFFF; 
	overflow:hidden; 
	/*position:absolute;*/
}

#enlarge li a img {
	width:100%; 
	height:100%; 
	border:none;
}
#enlarge li a:hover {
	position: relative;
	left:-80px; 
	top:-61px; 
	width:300px; 
	height:225px; 
}
</style>
<!--[if IE]>
<style>
div#elenco_home {
	width: 381px;
	padding-top: 10px;
}

#enlarge li a:hover {
position : relative;
margin : 0;
padding : 1px;
margin: 0 -140px -300px 0;
}

</style>
<![endif]-->
</head>

<body>
<div id="container">
	<div id="top">	</div>
	<div id="middle">

		<div id="container_content">
			<div id="intestazione">
			[img]../img/logo.jpg[/img]
			<object class="top" type="application/x-shockwave-flash"
			data="../swf/c.swf?path=../swf/top.swf" 
			width="400" height="160">
        	<param name="movie" 
			value="../swf/c.swf?path=../swf/top.swf" />
      		</object>
			</div>
			<div id="nav">Home | <a class="nav" href="hotel.html">
				Hotel</a> | Dintorni | <span class="sei_qui">
				Camere</span> | Servizi | <a class="nav" href="prezzi.html">
				Prezzi</a> | Prenotazione 
				| Contatti </div>

			<div id="lingue">English</div>
			<div id="cont_testo_cam">Ecco un tour virtuale tra le camere 
				del nostro hotel, e non solo!
			<ul id="enlarge">
				[*][img]../img/camera1.gif[/img]
				[*][img]../img/camera1.gif[/img]
			[/list]
			</div>

			<div id="crediti">
				<div id="cred_l">© 2008 hotelsansirofiera.com - Tutti i diritti 
					riservati</div>
				<div id="cred_r">sito creato da Luca Ciuccio - <a class="cred" href="http://www.brueckenbauer.it" target="_blank">
					brueckenbauer.it</a></div>
			</div>
			<div id="post_cred">
				<div id="sitemap">sei qui: camere </div>

				<div id="validatori">codice <a class="testo" href="http://validator.w3.org/check?uri=referer" target="_blank">
					XHTML</a> e <a class="testo" href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
					CSS</a> valido</div>
			</div>
		</div>
	</div>
	<div id="bottom">

	</div>
</div>
</body>
</html>

Testato con FF, IE6 e IE7

Mio errore di trascrizione nello stile di #enlarge li a:hover .

Pardon!

**luci88** · 06-11-2007, 11:52

gentilissimo e veloce, ora funziona tutto perfettamente

grazie mille

**H5N1_Aviaria** · 06-11-2007, 13:17

A disposizione

Discussione: problema magnifier su IE

Strumenti discussione

Ricerca discussione

Visualizza

problema magnifier su IE

Permessi di invio