Category box css question.

Hi,
Im going a bit crazy going round and round in circles...

Im trying to achieve Pic 1 (jpg on the left)
But currently have Pic 2 (gif on the right)

Its .category-top that controls this I believe and this is currently looking....

.category-top {
background-color: #ffffff;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 35%;
font-size: 1.em;
}

I realise that its the padding right that controls this and this is ultimately controlled by class="sideBoxContent"

Does anyone have any idea how I can fix the width of the padding that creates the white box
If I put padding-right: 35px; or similar it looks weird for short categories.

Thanks in advance.

Hi Reesy

Padding will only extend the coloured area from the edge of the content. Have you tried changing / fixing the width?

Ohayo Kuroi-san genki? ;)
I tried adding width: 50px; or similar to the .category-top css and it did.... nothing :(
Was that the wrong way around it?

There's a couple of things here ... it's difficult to advise without a link to be able to see the full context (e.g. work out to what you are applying the category-top class the links or the list items, and also whether they are block or inline elements - but you know that so I'm assuming that you are unable to provide a link at the moment.

The other thing is that 50px would be unlikely to have an impact anyway, as it looks to me as though your content is already wider than that. I'd at least try a much bigger value to see the impact.

Id love to give a link if poss... but its not unfortunately.
50px was just an example, it was the first key I hit

case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;

Is from the categories template file so I added the css in the above post.

I just realised that you might have to go digging to look for that code above so heres a bit more from the same template file.

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
//      case ($box_categories_array[$i]['path'] == 'cPath=3'):
//        $new_style = 'category-holiday';
//        break;
      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        break;

If - in your css - for the content or wrapper around it a width has been defined, you can set the width of your white box to 100%. If you would like to keep a smal border set it to 90 or 80% and align to center or set a margin-left.

Maybe that is what you are looking for?