I am trying to figure out why the inner div in this web site will display properly with Safari and Chrome but goes awry in firefox. I have the code up on jsfiddle here. I am fairly new to web-design so I may be missing something very obvious but I cannot seem to figure it out and have not been able to find a solution anywhere online yet. Any and all help is much appreciated.
Colin
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Code Example</title>
<link href="_css/main_full.css" rel="stylesheet" type="text/css">
<script src="_js/jquery-1.8.2.min.js"></script>
<script src="_js/gallery.js"></script>
</head>
<body>
<div class="page_container">
<div class="gallery_container">
<a href="sunlight.html" title="© C.M.B 2012"><img id="pos1" src="_images/galleryimages_full/sunlight_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="clownflat.html" title="© C.M.B 2012"><img id="pos2" src="_images/galleryimages_full/clownflat_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="goldensun.html" title="© C.M.B 2012"><img id="pos3" src="_images/galleryimages_full/goldensun_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="monstertheatre.html" title="© C.M.B 2012"><img id="pos4" src="_images/galleryimages_full/monstertheatre_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="home.html" title="© C.M.B 2012"><img id="pos5" src="_images/galleryimages_full/home_smallvector.jpg" width="250" height="194" alt="© C.M.B"></a>
<a href="wishingstar.html" title="© C.M.B 2012"><img id="pos6" src="_images/galleryimages_full/wishingstargallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="cozycave.html" title="© C.M.B 2012"><img id="pos7" src="_images/galleryimages_full/cozycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="coffeetable.html" title="© C.M.B 2012"><img id="pos8" src="_images/galleryimages_full/coffeetable_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="breakaway.html" title="© C.M.B 2012"><img id="pos9" src="_images/galleryimages_full/breakaway_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="happynappy.html" title="© C.M.B 2012"><img id="pos10" src="_images/galleryimages_full/happyns_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="boymeetsgirl.html" title="© C.M.B 2012"><img id="pos11" src="_images/galleryimages_full/boymeetsgirl_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="sadbaby.html" title="© C.M.B 2012"><img id="pos12" src="_images/galleryimages_full/sadbabygallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="salvation.html" title="© C.M.B 2012"><img id="pos13" src="_images/galleryimages_full/salvation_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="orangestart.html" title="© C.M.B 2012"><img id="pos14" src="_images/galleryimages_full/orangestart_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="spaceobjects.html" title="© C.M.B 2012"><img id="pos15" src="_images/galleryimages_full/spaceobjectsgallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="clown.html" title="© C.M.B 2012"><img id="pos16" src="_images/galleryimages_full/clown_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="ponycave.html" title="© C.M.B 2012"><img id="pos17" src="_images/galleryimages_full/ponycave_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="pacha.html" title="© C.M.B 2012"><img id="pos18" src="_images/galleryimages_full/pacha_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="goldstorm.html" title="© C.M.B 2012"><img id="pos19" src="_images/galleryimages_full/goldstorm_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="qero.html" title="© C.M.B 2012"><img id="pos20" src="_images/galleryimages_full/qerogallery_full.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
<a href="bluesinmyheart.html" title="© C.M.B 2012"><img id="pos21" src="_images/galleryimages_full/theblues_smallvector.jpg" width="250" height="194" alt="© C.M.B 2012"></a>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
/* Layout (global rules for fullsize) */
.page_container {
width: 1280px;
height: 3000px;
background-image: url(../_page_components/gallery/gallery_full.jpg);
margin: 0 auto 0 auto;
/*position: relative;*/
/* padding-top: 19.541%; 248 pixels*/
}
.gallery_container
{
width: 66.7%; /* 853 pixels */
height: 55.3%; /* 1659 pixels */
/*margin: 19.541% auto 0% auto; - equal to 248px*/
padding: 19.5% 0 0 0;
margin: 0% auto 0% auto;
}
#pos1 { /* Top Left Corner*/
padding-left: 0.3%;
padding-right: 4.91%;
padding-bottom: 5.3%;
}
#pos2 { /* Middle top row */
padding-left: 0.42%;
padding-bottom: 5.3%;
}
#pos3 { /* Topr Right Corner */
padding-left: 5.35%;
padding-bottom: 5.3%;
}
#pos4 { /* The rest of the images/rows follow the same positioning pattern */
padding-left: 0.4%;
padding-right: 4.75%;
padding-bottom: 5.3%;
}
#pos5 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}
#pos6 {
padding-left: 5.15%;
padding-bottom: 5.3%;
padding-right: 0.2%;
}
#pos7 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.3%;
}
#pos8 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}
#pos9 {
padding-left: 5.25%;
padding-bottom: 5.3%;
}
#pos10 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.3%;
}
#pos11 {
padding-left: 0.5%;
padding-bottom: 5.3%;
}
#pos12 {
padding-left: 5.25%;
padding-bottom: 5.3%;
}
#pos13 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.4%;
}
#pos14 {
padding-left: 0.5%;
padding-bottom: 5.4%;
}
#pos15 {
padding-left: 5.25%;
padding-bottom: 5.4%;
}
#pos16 {
padding-left: 0.5%;
padding-right: 4.55%;
padding-bottom: 5.6%;
}
#pos17 {
padding-left: 0.5%;
padding-bottom: 5.6%;
}
#pos18 {
padding-left: 5.25%;
padding-bottom: 5.6%;
}
#pos19 {
padding-left: 0.5%;
padding-right: 4.55%;
}
#pos20 {
padding-left: 0.5%;
}
#pos21 {
padding-left: 5.25%;
}