[SOLVED] Aligning category images, 3.0 style

Ah, I see what you mean. I made the change (I took out the

), but it's still doing the staircasing thing...

And did you upload it?  I'm still seeing it as vertical-align:middle when I look at CSSZen and Zenlike.

Ah, I thought the change was just for elegance. I made the change for all of them (overwriting the vertical-align: middle with float: left), but now the staircasing effect is back, even though the text is aligned the way I want.

Change this:

$blocks["categories"]["template"] = "{image} {link} [{count}] <br />{description}";

to this:

$blocks["categories"]["template"] = "<div>{image} {link} [{count}] <br />{description}</div>";

I made the change and uploaded it for both CSS Zen and Zenlike (with no variables for elegance, I don't know how to do it for that skin), but it didn't seem to have any change, even though I refreshed the pages...

Change it again to this:

$blocks["categories"]["template"] = "<div style="height: 80px">{image} {link} [{count}] <br />{description}</div>";

To change it in the elegance skin you can either create a variables.php or go into the categories block and copy this into the box over what is already there:

<div style="height: 80px">{image} {link} [{count}] <br />{description}</div>

Yay, okay, that worked! For CSS Zen and Zenlike, I had to escape out the double-quotation marks in the DIV style, and for the Elegance skin, I had to check "Use TinyMCE" and let the box change back to simple mode before re-pasting the proper HTML/CSS in the box. But now it works on all skins! Thanks!

Some of them are, unfortunately, overlapping in the Zenlike skin, and will actually overlap in all of the skins if the page is sized small enough and the user is not using IE6.

I hate for you to have to change it again, but the most ideal way for you do correct this is replace the inline style with a class, then correct it on your stylesheet where you can use hacks.

You can fix it by changing the variables.php to this:

$blocks["categories"]["template"] = "<div class="image">{image} {link} [{count}] <br />{description}</div>";

Then add this to your stylesheet:

.image {height: 80px;}

html>body .image {height: auto; min-height: 80px;}

That should take care of the problem for most browsers.

Okay, all the skins look fine with that latest update done to every skin's style.css and variables.php (I edited the elegance skin's in the blocks settings, as before) in both Firefox/Mac and Safari... if someone on a PC could check on their browser of choice, I'd appreciate it-- but yay if it does work!~ 😀 😀 😀

It's working now. The text overflow wraps a bit oddly under the picture, but at least it doesn't overlap.

Bump.  Are we good on this issue now?  If the original poster doesn't reply back in a week, this thread will be closed.

Solved. Thank you-- this provides a good reference after a patch update overwrites the files in question.