Compatibility Issues with CSS
locking as a duplicate - https://support.mozilla.com/en-US/questions/816575
Hello,
I'm not sure if this is the correct place to ask this question, but I needed to start somewhere. I recently published my site, mei-vt.net, and one of the CSS effects I have isn't working in Firefox, but is working IE. Firefox is my primary browser and I used it to preview the pages while building the site. The hover effect worked fine in the preview and stopped working only when I published the site to the my web host.
The effect is at the top of the Commercial page (found here http://mei-vt.net/commercial.html). It consists of 6 pictures that enlarge to fill the border when moused over. The original code was written by a freelance web designer and the original copyright information is intact in my external style sheet. The site said the effect was tested and working in Firefox, but it doesn't seem to be working for me.
I will paste the entire style sheet content below that controls the effect and the source code can be viewed from the page. Please tell me what I need to do to make this work in Firefox!
Thank you.
/* ================================================================ This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menu/image-manipulation.html Copyright (c) 2005-2010 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .gallery {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;} .gallery li {width:160px; height:140px; float:left;} .gallery li a {display:block; width:160px; height:140px; position:absolute; -webkit-transition: 0.75s ease-in-out; -moz-transition: 0.75s ease-in-out; -ms-transition: 0.75s ease-in-out; -o-transition: 0.75s ease-in-out; transition: 0.75s ease-in-out; } .gallery li a.p1 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/h2.jpg); opacity:0.5; left:0; top:0;} .gallery li a.p2 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/icehaus.jpg); opacity:0.5; left:160px; top:0;} .gallery li a.p3 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/h1.jpg) ; opacity:0.5; right:0; top:0;} .gallery li a.p4 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/park.jpg); opacity:0.5; left:0; bottom:0;} .gallery li a.p5 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/Club.jpg); opacity:0.5; left:160px; bottom:0;} .gallery li a.p6 {background:url(file:///C|/Users/Krista/Desktop/sites/MEI/local_sites/images/frame.jpg); opacity:0.5; right:0; bottom:0;}
.gallery li a:hover {position:absolute; width:480px; height:280px; z-index:100; opacity:1;}
.gallery li a.p1:hover {left:0; top:0;} .gallery li a.p2:hover {left:0; top:0;} .gallery li a.p3:hover {right:0; top:0;} .gallery li a.p4:hover {left:0; bottom:0;} .gallery li a.p5:hover {left:0; bottom:0;} .gallery li a.p6:hover {right:0; bottom:0;}
.gallery2 {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;}
.gallery2 li {width:240px; height:140px; float:left;}
.gallery2 li a {display:block; width:240px; height:140px; position:relative; overflow:hidden;}
.gallery2 li a img {border:0; position:absolute; left:-360px; top:-210px; opacity:0.5; width:960px; height:560px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
.gallery2 li a:hover img {position:absolute; left:0; top:0; opacity:1; width:240px; height:140px;}
a.p7 {
display:inline-block;
width:75px;
height:75px;
text-decoration:none;
background:#fff;
border:0;
float:left;
margin-top: 20px;
margin-right: 0;
margin-bottom: 0;
margin-left: 20px;
}
a.p7 img {
display:block;
border:0;
}
a.p7:hover {
text-decoration:none;
background-color:#8c97a3;
color:#000;
position:relative;
z-index:500;
text-align: left;
}
a.p7 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;
-o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4); box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
-o-border-radius: 8px; -icab-border-radius: 8px; -khtml-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
-webkit-transition: opacity 0.6s ease-in-out;
}
a.p7:hover b {top:-65px; left:110px; padding:10px; border:1px solid #aaa; background:#fff; opacity:1.0;
}
- info {z-index:100; height:22em;}
Modified by the-edmeister