This is my website
While the site looks almost perfect in Chrome, there are some display issues in Firefox. In Firefox, all text appears centered on the page rather than within the divs where it should be. Additionally, a filter problem causes every div to turn black, which is especially problematic since the site primarily consists of images.
The HTML Structure:
<div id="container">
<div id="row">
<div class="cell A1"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>SPINDRIFT KIOSK</p>DIGITAL COLLAGE</div></div>
<div class="cell A2"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>LIZ & RYAN HEMSWORTH</p>ALBUM DESIGN</div></div>
<div class="cell A3"><img class="spacer" src="spacer.png"><div id="text">MIKEY<br/><p>EPHEMERA</p>DIGITAL COLLAGE</div></div>
<div class="cell A4"><img class="spacer" src="spacer.png"><div id="text">ERIC<br/><p>REJJIE SNOW</p>SITE DESIGN</div></div>
</div>
These are just one row, with three more rows following the same structure.
CSS: To simplify, I have provided the code for only one row here:
.A1, .A2, .A3, .A4 {
position:relative;
}
.A1:before, .A2:before, .A3:before, .A4:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-filter .2s ease-in-out;
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(90%) brightness(30%); /* Google Chrome, Safari 6+ & Opera 15+ */
z-index: -1;
}
.A1:before {background-image:url('spindrift.jpg'); background-size:cover;}
.A2:before {background-image:url('daynnite.jpg'); background-size:cover;}
.A3:before {background-image:url('ephemera.jpg'); background-size:cover;}
.A4:before {background-image:url('rejjiesnow.jpg'); background-size:cover;}
.A1:hover:before, .A2:hover:before, .A3:hover:before, .A4:hover:before, {
-webkit-filter:none;
}
/* text hover */
div.cell:hover #text{
opacity:0;
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
#text{
opacity:1;
display:table;
position:absolute;
z-index:999;
color:#ffffff;
text-align:center;
width:100%;
top:44%;
left:0;
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
font:12px ProximaNovaRegular, sans serif;
text-decoration:none;
}
p {
font:16px ProximaNovaBold, sans serif;
margin:0;
padding:1 0 1 0;
}
/*Table rules*/
.container{
display:table-row;
width:100%;
}
.row{
display:table-row;
width:100%;
}
.cell{
position:relative;
display:table-cell;
width:700px;
height:auto;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
html{
margin:0;
padding:0;
height:100%;
width:100%;
}
body{
height:100%;
width:100%;
margin:0;
padding:0;
background-color:black;
color:black;
}
/* hover */
div.cell:hover {
filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
opacity:1.0;
}
I'm unsure what's causing these issues, and I apologize for the vague question. To provide more context, please review the source code on the actual site.