Wordpress Post Count in Sidebar alignment issue

[terrybarnes]

I've got a problem with the alignment of the post count when I add it to the sidebar in Wordpress.

From what I can see, after hunting around the web, this is a known problem but I just can't seem to figure out how I can resolve the issue.

The alignment of the category titles is perfect but when I add the post count this then gets displayed underneath the category title.

From what I've read so far the problem is due to the block element that you make the sidebar css with but I've no idea how I can get away with not using this - any ideas?

Here's the css for the sidebar:

#sidebar {
width: 238px;
float: right;
line-height: 1.5em;
display:inline;
margin: 8px 8px 8px 0px;
padding: 10px;
font-size:10px;
}
#sidebar h2 {
color: #999;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
border-bottom: 1px solid #ccc;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
#sidebar ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
}

#sidebar ul li a {
border-bottom: 1px solid #ccc;
color: #F37134;
display: block;
text-decoration: none !important;
margin: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 25px;
background-image: url(images/navbulle.png);
background-repeat: no-repeat;
background-position: 10px 50%;
}
#sidebar ul li a:hover{
border-bottom-color: #fff;
color: #FFFFFF !important;
background-color: #2aace2;
}

Any help would be very much appreciated as I'd really like to add the post count but as it stands it looks terrible so I've had to remove it.

[Moby_Dim]

Btw there seems to be a bug in #sidebar css (display:inline).

But it is not the problem solution, may be. Which element corresponds to posts counter? what about a snippet of resulting html code? etc.

[terrybarnes]

Thanks for replying - I'm nor sure what you mean when referring to a bug with the display:inline;

The resulting html from Wordpress is this:

<ul>
<li class="cat-item cat-item-87"><a href="../cat1/">Category1</a> (2)</li>
<li class="cat-item cat-item-41"><a href="../cat2/">Category2</a> (8)</li>
<li class="cat-item cat-item-59"><a href="../cat3/">Category3</a> (1)</li>
</ul>

The bit in the brackets is the post count.

[Moby_Dim]

ok then... try to play with #sidebar ul li a width and/or floating to left may be. Now your #sidebar ul li a are block elements and they have the whole width of the column... Add border: 1px solid red property for a while -you'd see the problem, may be, and understand what to do I'm sure

[terrybarnes]

I don't just think it's down to the CSS - I think, from doing a bit of research, it's also down to the Wordpress php files, namely the classes.php file.

I've attempted what you suggested but the count appears outside of the element for some strange reason.

[Moby_Dim]

There's nothing to do with classes.php, i'm sure. The problem is in html & css visual representation.

If you able to wrap your counter in a <span> element so: <li class="cat-item cat-item-87"><a href="../cat1/">Category1</a> <span>(2)</span></li> , I'd propose 100% working solution:

make this span css like this: display:block; float: right;

and <a> element must have float: left and the width less than #sidebar width to let the span counter fit in one line right after <a>

In other words: make two divs (left (<a>) floats to left and right (<span>) floats to right) inside the third div (li)

[edited by: eelixduppy at 3:10 pm (utc) on Feb. 3, 2009]
[edit reason] disabled smileys [/edit]

[Moby_Dim]

as far as i remember, you can change html code for this purpose either from sidebar.php in the wp theme or you have to change a bit of code in the function which is responsible for categories lists output. But not in a class.php I'm 100% sure.

[terrybarnes]

That's the main problem I seem to be having. I'm running the latest version of WP2.7 and my theme supports the dynamic sidebar so there's very little on the sidebar.php page for that theme. I've looked through the WP files and can't see anything obvious.

Perhaps there's Categories Widget to use in place of the standard WP version, which may work correctly.

[terrybarnes]

Hi, me again! Okay, I've had another look at this and what I'd actually like is for the post count to be inside the link like so:

<li class="cat-item cat-item-87"><a href="../cat1/">Category1 (2)</a></li>

Now, this seems to work perfectly okay but I just can't seem to find this particular bit of code in any of the WP files - I'm presuming that's where it's bringing in the post count and category details from. It's driving me insane as it seems such a simple thing but it must be the php that's doing the work.