Ho il seguente problema con Explorer 7 e 8:
ho una pagina con un header, due div flottanti al centro (con immagini che usano lightbox javascript), e un footer
se clicco sul link email "Contatti" nel mio footer, su Explorer viene aperta l'ultima immagine presente nel div che sta sopra a destra.
E' come se quel div sconfinasse nel footer fino a sostituire il corretto link all'email.
Per attaccare il footer in basso ho seguito la tecnica indicata qui: http://www.cssstickyfooter.com/
Sono molto grato a chi può aiutarmi, le ho provate tutte ma non riesco a risolvere.
Ecco il mio .css:
codice:html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} body {background-color: #000000} #main {padding-bottom: 50px; /* must be same height as the footer */ text-align: center} #header { text-align: center; padding: 20px } .box-left { width: 30% ; float: left; padding-left: 15% } .box-right {width: 30% ; float: right; padding-right: 15% } #footer {position: relative; margin-top: -50px; /* negative value of footer height */ height: 50px; clear:both;} .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ p, h4 {font-family: "DejaVu Sans", "Nimbus Sans", Arial, sans-serif; text-align: center; color: #808080 } h4 {font-size: 1em; color: #E8E8E8; padding: 5px } img {border: none } a {text-decoration:none} a.email:link {color: #808080} a.email:visited {color: #FFFFFF} a.email:hover {color: #FFFFFF} a.email:active {color: #FFFFFF} a.opacity img { filter:alpha(opacity=70); /*-moz-opacity: 0.7; non è un codice standard e la proprietà CSS3 opacity sembra funzionare su FF */ opacity: 0.7; } a.opacity:hover img { filter:alpha(opacity=100); /**-moz-opacity: 1.0; **/ opacity: 1.0; }
E la pagina HTML:
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/collection.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> </head> <body> <div id="wrap"> <div id="header"> </div> <div class="box-left"> <h4>Galleria 1</h4> </div> <div class="box-right"> <h4>Galleria 2</h4> </div> </div> <div id="footer"> testo Contact</p> </div> </body> </html>
Rispondi quotando
