PDA

View Full Version : CSS Help - Archive "stacking" generated thumbnails



Chella
06-05-2009, 11:01 AM
I'm trying to help a friend move her webcomic from HTML to Wordpress. The issue I'm having is that the thumbnails generated on the Archives page are "stacking", creating a step-like appearance.

I've already asked on the Comicpress-Theme forums for help, but no-one has been able to resolve it.

You can see the problem here: http://www.ealaionta.com/pol/?cat=9

I haven't been able to find or fix the issue, so I'm hoping for suggestions. There is a div named "column" that surrounds the archive thumbnails.


/* POSTS - PAGES */

#column {
width: 600px;
padding: 5px 0 20px 0;
float: left;
overflow: hidden;
}



And this is the CSS for the Archives...


/* ARCHIVE */
/* For the built-in WordPress archive pages (by month or category) as well as search result pages */

.comicarchiveframe {
padding: 5px;
float:left;
display:block;
margin: 5px 10px 10px 5px;
border: 1px solid #939059;
background: #becae0;
opacity: 0.99;
filter: alpha(opacity=99);
}

.comicarchiveframe:hover {
opacity: 0.70;
filter: alpha(opacity=70);
}

.comicarchiveframe h3 {
margin: 0;
}

.comicarchiveframe a small {
font-size:9px;
display: block;
color: #1a1e2f;
text-align:left;
}

.archive-year {
font-size: 12px;
}

.archive-yearlist {
padding: 0 0 10px 0;
font-size: 12px;
}


And this is the page code:


<style type="text/css">
.comicarchiveframe h3 {display: none;}
.comicarchiveframe small {display: none;}
.comicarchiveframe a small {display: none;}

</style>

<div id="column" class="archive">

<div class="post-page-head"></div>

<div class="post-page">

<div class="content"><h2 class="pagetitle">Archive for ‘Episode 06: The Strength to Protect! Kedamono VS Nickles’</h2></div>

</div>
<div class="post-page-foot"></div>
<div class="post-comic-head"></div>
<div class="post-comic">
<div class="comicarchiveframe" style="width:75px;">
<a href="http://www.site.com/etc/"><img src="http://site.com/etc/image.jpg" alt="01/07/2004" title="Click for full size." width="75" /><br />
<h3>01/07/2004</h3>
<small>January 7th, 2004</small></a>
</div>
</div>
<div class="post-comic-foot"></div>
<div class="clear">
</div>


Thank you for your time!

pghcollectibles
06-05-2009, 07:59 PM
im not sure what the problem is you're describing. this is what i see did you fix it?

http://demos.4christministry.org/images/temps/pgh/eala.jpg

that is using firefox and ie

Chella
06-06-2009, 10:08 PM
Thanks, I forgot to mention I was using FireFox on WindowsXP. I managed to solve the issue though; I had to edit footer information for the thumbnails being called.