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!
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!