I’m just fiddling around with the Crystal theme and trying to get it to match my installation of Unsleepable on wordpress.

I also decided to put in avatars.

I’ve made a bit of a mess of it.

http://www.mikeh269.com/forum/topic.php?id=1&page&replies=3

As you can see, all the posts are somewhat pushed up so they are all together. I would appreciate it if I could get some help.

Here’s my post.php

<div class="threadauthor">

<p><strong><?php post_author_link(); ?></strong><br />

<small><?php post_author_title(); ?><br /><?php post_avatar(); ?></small></p>

</div>



<div class="threadpost">

<div class="post"><?php post_text(); ?></div>

<div class="poststuff"><?php printf( __('Posted %s ago'), bb_get_post_time() ); ?> <a href="<?php post_anchor_link(); ?>">#</a> <?php post_ip_link(); ?> <?php post_edit_link(); ?> <?php post_delete_link(); ?></div>

</div>

And the relevant parts of style.css

.poststuff{

font:10px Verdana,Arial,Helvetica,sans-serif;

text-transform:uppercase

}



.threadauthor small{font:11px Verdana,Arial,Helvetica,sans-serif}



.post {

margin-left: 100px;

position: absolute;

padding-left; 100px;

padding-up; 50px;



}



.threadauthor {

margin-left: 10px;

overflow: hidden;

position: absolute;

max-height: 215px;

width: 150px;

}

Any help would be appreciated.

[@fel64 Member 17 years, 6 months ago]

Relevant also is #thread li.

Note that threadauthor has position: absolute; so it won’t affect the height of the post. As soon as you get rid of that it, the post is pushed to full height.

Alternatively, you could give #thread li the min-height: 200px property, which will make sure it’s at least 200 pixels high which should be sufficient to accomodate for avatar and username. However IE6 does not support the min-height property.

margins will push things apart, which might be what you’re looking for. Also .post needs to have a bigger margin.

Both approaches will give you a workable design. However when you’re working on these things there are really two things you should do:

1. Change one thing at a time. Check result.
2. Use Firebug.

Both of those are lifesavers and greatly reduce the amount of work and panic you’ll have. Switch to FF if you have to, Firebug is pure gold and absolutely worth it when you’re making websites.

[@mikeh269 Member 17 years, 6 months ago]

Aha!

A little bit of fiddling and I have a topic page that I like the look of.

It renders fine in FF and IE6, but not in IE7. Why, I’m not sure, but I’m happy enough with it.

FireBug is really incredibly useful. I used it as you suggested and it does indeed make things a little faster.

It would be nice if you could export the style.css after you’ve finished modifying it in their nice user interface, but that’s minor.