My website looks very different on Firefox.. Can't pinpoint why - html

Question

This is my website http://aaronisdead.com/sites/dejatest/deja.html
When viewed in Chrome, it looks almost exactly what I want it to. In Firefox, all of the text is in the center of the page instead of the center of divs. There's also a problem with the filter that causes every div to appear black(a big problem when the entire site is pictures)
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>
This is just one row, there are three more with the exact same structure
CSS:
I've reduced a lot of the code into just the code for one row for simplicity reasons
.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 not sure what's causing this and I hate asking such a vague question here so I've included a lot of code..If .cell {display:table-cell;} is disabled, the site turns into something recognizable. I realize there's a grayscale filter that's not working on Firefox, but my main concern here is getting the text in the center of the divs.
Feel free to check out the source code on the actual site.

Answer 1

You should have a doctype tag first in your document. Right now you have nothing that tells the browser what HTML version you want to use, so it will use Quirks mode, which is basically to be compatible with the oldest browser that you can imagine.
Your HTML markup is invalid, at least for the HTML version used. You have <div> elements inside <a> elements, and that is only allowed in HTML 5. Unless you have a doctype tag that says that you are using HTML 5, the browser will try to fix the markup, for example by moving the div outside the a.
Your markup has other errors, for example elements nested wrong. You have elements nested like this:
<div>
<a>
<img>
<div>
</div>
</div>
</a>
As you see, the div and a ending tags are in the wrong order.
You have the style sheed completely outside the HTML document. It should be inside the <head> tag.
The <head> and <title> tags are missing. They are required elements in an HTML document.
Fixing these issues will give you the basics for getting a consistent result in different browsers.

Answer 2

Remove from your #text
position:absolute
I tested on FF28 and it works.
Let me know if this is what you want.
and your background its not showing in FF, try adding all Vendors in your background-image:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 3

You don't have a doctype so you are in 'quirks mode' and it's like 1995 all over again and no two browsers may look the same. All new web pages MUST have a doctype. Use this one:
<!DOCTYPE html>
That will put all browsers into 'standards mode'.
Unfortunately, because you didn't start out in standards mode, this may make your page move around a bit and look different than it does now but it must be done.
In addition, your markup is invalid cause you put your script tags outside of the html element. The html element is, essentially, the document itself and you can't do that.
For a complete list of all your errors, plug in your site link here. Right now, it shows 98 HTML errors alone.