CSS Category & Information Boxes

Refer Picture:

I wanted to add display: block; to the menu's.
Added it to the .sideBoxContent as below.

.sideBoxContent a{ color: #ff870f; padding: 10px; font-size: 14px; text-decoration: none; background-color: #000; display: block;}
.sideBoxContent a:hover{ padding: 10px; text-decoration: none; background-color: #ff870f; color: #fff; display: block; }

The Information box works perfectly, but the Categories box has the white gaps in it and I can't for the life of me get ride of them.
I have checked the page source and see that they are created a little differently.
Obviously I wanted to keep the design changes limited to the style sheet only.

<div **class="leftBoxContainer"** **id="categories"** style="width: 175px"> <div **id="categoriesContent"** **class="sideBoxContent"**>

<a class="category-top" href="http://www.bla bla.com.au/index.php?main_page=index&cPath=65">New Release</a><br />

</div> </div>

#categoriesContent .category-links, #categorylistboxContent .category-links, #treemenu .category-links{ text-decoration: none; }
#categoriesContent, #categoriesselectContent, #categorylistboxContent, #treemenu{ color: #ffc080; padding: 0; font-size: 11px; }
#categoriesContent a, #categorylistboxContent a, #treemenu a{ color: #ff870f; font-size: 14px; text-decoration: none; background-color: #000;}
#categoriesContent a:hover, #categorylistboxContent a:hover, #treemenu a:hover{ color: #c06000; text-decoration: none; background-color: #ff870f; color: #fff;}

<div **class="leftBoxContainer"** **id="information" **style="width: 175px"> <div **id="informationContent" ****class="sideBoxContent"**> <ul style="margin: 0; padding: 0; list-style-type: none;"> <li><a href="http://www.www.bla bla.com.au.com.au/index.php?main_page=shippinginfo">Shipping & Returns</a></li> </ul>

#informationContent{ padding-left: 0px; }
.information{ padding: 10px 3px; line-height: 150%; }

**
So am I overlooking something simple or do I need to edit the categories.php to resolve this ?** :(

Thanks

TheVulcan:

I wanted to add display: block; to the menu's.Why?

Do you have a link to the site with the problem?

What browser are you using?

That allows full-width buttons instead of limiting styling to the text width. The problem is that since the stock display uses inline elements (<a> links), each line needs a <br /> after it to ensure that two don't end up on the same line. When using block-level elements, that <br /> causes the extra linefeed.

There is a CSS method (negative margin) that can neatly eliminate the extra space, but unfortunately it runs into an IE bug that causes another problem when browsing with IE6.

So you need to edit /includes/templates/your_template/sideboxes/tpl_categories.php and remove the <br /> from the code.
Find this```php
$content .= '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links

'<br />' .

to leave

```php
      $content .= "\n";

gjh42

:clap: :clap: :clap: :clap:

Thanks for your reply.... I would have been :frusty: for ever if you hadn't shown me the way.

I didn't even know I could add the sideboxes to my template folder... :blink:

:bigups: