Q:

Firefox absolute positioning failure

My website
http://cynthiawoodyardlandscapedesign.com/
has a couple of issues that are only present in Firefox.
When an image on the home page is clicked on, the arrows that appear on either side to allow the user to change the picture are way at the top of the page. The div that holds the arrows should have a height of 100%, I even added !important to the CSS. Only Firefox doesn't show this correctly.
My css (http://cynthiawoodyardlandscapedesign.com/css/main.css):
#sheet {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    display: table;
    z-index: 150;
}
#popover {
    margin: auto;
    background: rgba(0,0,0,0);
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
#popover-image {
    height: 70%;
    border: 10px solid white;
}
#exit {
    position: absolute;
    top: 50px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    z-index: 300;
    font-family: sans-serif;
}
#next-image, #previous-image { cursor: pointer; background:  transparent; }
#next-image::-moz-selection, #previous-image::-moz-selection,
#next-image::selection, #previous-image::selection { background: rgba(0,0,0,0); }
#leftArrow, #rightArrow {
    width: 20%;
    height: 100% !important;
    position: absolute;
    z-index: 200;
    display: table;
    background: transparent;
    top: 0;
}
#leftArrow { left: 0; } #rightArrow { right: 0; }
#next-image {
    display: table-cell !important;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    font-size: 50px;
    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
    height: 50px;
    width: 50px;
    color: white;
}
#previous-image {
    display: table-cell !important;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    font-size: 50px;
    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
    height: 50px;
    width: 50px;
    color: white;
}

My HTML (http://cynthiawoodyardlandscapedesign.com/default.php):
<div id="sheet">
    <div id="exit">Exit</div>

    <div id="popover">
        <div id="leftArrow"><div id="previous-image" onclick="previous()">&laquo;</div></div>

        <img src="watermark.php?src=images/main1.jpg&x=0&y=420&opactity=50" id="popover-image" onclick="close()" />

        <div id="rightArrow"><div id="next-image" onclick="next()">&raquo;</div></div>

    </div>

</div>

Every other browser that I've tried (except IE; I am on a Mac) displays the page correctly.
EDIT: I am having more Firefox issues.
The page at http://cynthiawoodyardlandscapedesign.com/photography.php shows many pictures that are in <td> tags and after the img but before the </td> there is a span that has an absolute position, top: 10px; On every browser (even IE8!!) it doesn't work correctly.
My HTML page:
<table id="photos">
                <tr>
                    <td><img src="images/photo-thumbs/garden.jpg" /><span>Gardens</span></td><td><img src="images/photo-thumbs/trees.jpg" /><span>Trees</span></td><td><img src="images/photo-thumbs/shrubs.jpg" /><span>Shrubs</span></td><td><img src="images/photo-thumbs/perennials.jpg" /><span>Perennials</span></td>
                </tr>
                <tr>
                    <td><img src="images/photo-thumbs/annuals.jpg" /><span>Annuals</span></td><td><img src="images/photo-thumbs/tropicals.jpg" /><span>Tropicals</span></td><td><img src="images/photo-thumbs/bulb.jpg" /><span>Bulbs</span></td><td><img src="images/photo-thumbs/containers.jpg" /><span>Containers</span></td>
                </tr>
                <tr>
                    <td><img src="images/photo-thumbs/fruit.jpg" /><span>Fruit</span></td><td><img src="images/photo-thumbs/animals.jpg" /><span>Creatures</span></td><td><img src="images/photo-thumbs/people.jpg" /><span>People</span></td><td><img src="images/photo-thumbs/travel.jpg" /><span>Travel</span></td>
                </tr>
</table>

#photos td {
        width: 192px;
        height: auto;
        position: relative;
        border-right: 5px solid transparent;
    }
    #photos td img { width: 100%; border: 1px solid gold; }
    #photos td span {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        text-align: center;
        background: rgba(0,0,0,0.4);
        padding-top: 2px;
        padding-bottom: 2px;
        color: #f0f0f0;
        font-weight: bold;
        font-family: "Source Sans Pro", sans-serif;
        display: none;
    }

A:

Here is the answer of your second part: Hover issue with span position. It is working fine see the below changes i have done in html, css and jquery code. please let me know if i am missing something.
Code: http://jsfiddle.net/brNdq/1/
Working Demo: http://jsfiddle.net/brNdq/1/embedded/result/
HTML:
<table id="photos">
      <tr>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/garden.jpg" /><span>Gardens</span></div></td>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/trees.jpg" /><span>Trees</span></div></td>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/shrubs.jpg" /><span>Shrubs</span></div></td>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/perennials.jpg" /><span>Perennials</span></div></td>
      </tr>
      <tr>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/annuals.jpg" /><span>Annuals</span></div></td>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/tropicals.jpg" /><span>Tropicals</span></div></td>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/bulb.jpg" /><span>Bulbs</span></div></td>
        <td><div class="img_container"><img src="http://cynthiawoodyardlandscapedesign.com/images/photo-thumbs/containers.jpg" /><span>Containers</span></div></td>
      </tr>
</table>

CSS:
.img_container {
    position:relative;
}

Jquery: Remove hover from TD and put it on class .img_container
<script type="text/javascript">
$(document).ready(function () {
    $(".img_container").hover(function() {
        $(this).children('span').fadeIn('medium');
    }, function () {
        $(this).children('span').fadeOut('fast');
    });
});
</script>

