CSS Category & Information Boxes

[TheVulcan]

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&amp;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 &amp; 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

[kuroi]

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?

[gjh42]

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

      $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 

Remove the

'<br />' .

to leave

      $content .= "\n"; 

[TheVulcan]

gjh42



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


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