dimanche 22 février 2015

Photo Gallery Column Layout Issue in Firefox/IE but not Chrome


This is my first question here. I appreciate any and all help.


I recently redesigned my personal website http://colincronin.com/. On the "Photography" section (third nav item) I am using column layout to display a gallery. In Google Chrome everything looks fine. However, in Firefox/IE the fourth row is being forced over so that only two images appear in this row and the third image appears in the next row. This creates blank white spaces where it looks like the photos are missing.


I've included the CSS and HTML I am using, along with two screenshots showing how it appears in Chrome and Firefox/IE. These pics are from a PC, though on Mac Chrome and Firefox render the pages in the same way. Thank you in advance.


Best, Colin


CSS:



.one-full,
.one_half,
.one_third,
.two_third,
.one_quarter,
.one_fifth,
.three_quarter,
.two_fifth,
.three_fifth,
.four_fifth
{
margin: 0;
padding: 0 .3em .1em 0em;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.one_full
{
width: 100%;
margin: 0;
float: left;
}
.one_half
{
width: 50%;
}
.one_third
{
width: 33.33333%;
}
.two_third
{
width: 66.66666%;
}
.one_quarter
{
width: 25%;
}
.one_fifth
{
width: 20%;
}
.three_quarter
{
width: 75%;
}
.two_fifth
{
width: 40%;
}
.three_fifth
{
width: 60%;
}
.four_fifth
{
width: 80%;
}

.one_full img,
.one_half img,
.one_third img,
.two_third img,
.one_quarter img,
.one_fifth img,
.three_quarter img,
.two_fifth img,
.three_fifth img,
.four_fifth img
{
width: 100%;
height: auto;
}


HTML:



<div class="one_third">
<a href="images/photography/giverny-lily-pond.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/giverny-lily-pond.jpg" alt="Giverny Lily Pond"></a>
</div>
<div class="one_third">
<a href="images/photography/giza-pyramid.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/giza-pyramid.jpg" alt="Giza Pyramid"></a>
</div>

<div class="one_third">
<a href="images/photography/milwaukee-art-museum.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/milwaukee-art-museum.jpg" alt="Milwaukee Art Museum"></a>
</div>
<div class="one_third">
<a href="images/photography/chicago-navy-pier-fireworks-01.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/chicago-navy-pier-fireworks-01.jpg" alt="Navy Pier 4th of July Fireworks 01"></a>
</div>
<div class="one_third">
<a href="images/photography/dessert-is-served.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/dessert-is-served.jpg" alt="Dessert is Served!"></a>
</div>

<div class="one_third">
<a href="images/photography/seeing-blind.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/seeing-blind.jpg" alt="Seeing Blind"></a>
</div>
<div class="one_third">
<a href="images/photography/ghosts-in-mirror.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/ghosts-in-mirror.jpg" alt="Ghosts in the Mirror"></a>
</div>
<div class="one_third">
<a href="images/photography/chicago-on-the-streets.jpg" rel="prettyPhoto[gallery]"><img src="images/photography/chicago-on-the-streets.jpg" alt="On the Streets of Chicago"></a>
</div>


Chrome Screenshot Firefox/IE Screenshot





Aucun commentaire:

Enregistrer un commentaire