Help with modules in Template

[splite]

Hi i have installed virtuemart and added a module to left side of the page to show category's, it works all alright but only the trouble i have faced is a deisgn glitch i am trying to solve it for past 4 hours i wonder if some body can give me a hand?

I have marked the glitch with red box, seems like text is bigger than the size of box which causes the glitch.

Here is example (screen) - http://imageshack.us/a/img59/108/glitchr.jpg


Here is css -

Code Select Expand

/*------------------------------------------------------------------------
* Copyright (c) 2008-2012 ZooTemplate. All Rights Reserved.
* @license - Copyrighted Commercial Software
* Author: ZooTemplate
* Websites:  http://www.zootemplate.com
-------------------------------------------------------------------------*/

/* COMMON STYLE
--------------------------------------------------------- */
.clearfix {clear: both;}
html, body, form {
margin: 0;
padding: 0;
}

body.contentpane {
color: #000000;
background: #b9298b;
font-size: 12px;
line-height: 1.3em;
margin: 0;
margin: 1em 2em;
width: auto; /* Printable Page */
}
.contentpane .button {
display: inline;
height: 25px;
padding: 0 10px;
}

/* Small text */
small, .small, .smalldark, .article-meta, .modifydate, .img_caption p, .site-slogan {
font-size: 92%;
}
/*article image*/

.img_caption.left, .img_caption.right {
margin-top: 3px;
margin-right: 1em;
}

img.img_caption  {
margin-right: 20px;
float: left;
border: 3px solid #c1c1c1;

}
div.img_caption {
float: left;
*margin: 0 5px 0 5px;
}
.img_caption p {
background: url(../images/shadow-bg.gif) no-repeat right top;
padding-top: 5px;
margin-top: 0px;
}

img.caption {
float: left;
margin: 0 10px 10px 0;
}
img.personal {
margin-right: 15px;
float: leFt;
overflow: hidden;
}
a {
outline: none;
color: #03a9e4;
text-decoration: none;
}
a:hover,
a:active,
a:focus {
text-decoration: underline;
background: none;
}
.shadow img {
padding: 1px;
border: 1px solid #CCCCCC;
}

.shadow {
float: left;
margin-right: 10px;
padding-bottom: 3px;
}

/* Heading */
h1 {font-size: 200%; font-weight:normal;}
h2 {font-size: 175%; font-weight:normal;}
h3 {font-size: 150%; font-weight:normal;}
h4 {font-size: 125%; font-weight:normal;}

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
padding: 0;

}

ul {
list-style: none;
}
ul li {
padding-left: 10px;
background: url(../images/bullet.png) no-repeat left 5px;
}
div.modulecontent ul.menu {
margin: 0;
padding: 0;
}
ul.menu li {
margin-left: 0;
padding: 0;

background: none;
}
ul.menu li a span {
}
ul.menu ul {
margin: 0px;
}
ul.menu ul li {
margin-left: 0;
width:auto;
border-bottom: none;
}
ul.list {
margin: 0;
}
ul.list li {
padding: 5px 0 5px 0;
background: none;
border-bottom: 1px solid #EAEAEA;
}
ul.list li a {
color: #444;
font-weight: bold;
}
ol li {
margin-left: 21px;
}
th {
font-weight: bold;
padding: 8px;
text-align: left;
}
fieldset {
border: none;
padding: 10px 5px;
}
fieldset a {
font-weight: bold;
}
fieldset.input {
padding: 0 6px;
background: none;
}
legend {
font-weight: bold;
background: #c5c5c5;
}
td, th, div {
font-size: 12px;
}

/* FORM
--------------------------------------------------------- */
form {
margin: 0;
padding: 0;
}

input, select, textarea, .inputbox, .button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 0px;
}
.inputbox {
background: #fff;
border: 1px solid #DEDEDE;
}
input#password{margin-left:8px;}
.login-fields{margin-bottom:10px}
input.default{cursor: pointer;}
input{
-webkit-transition:background-color 0.5s linear; 
-moz-transition:background-color 0.5s linear;
transition:background-color 0.5s linear;
background:#fff; 
padding:5px;
border: 1px solid #ddd;
}
.login input:focus{-webkit-transition:background-color 0.5s linear; 
-moz-transition:background-color 0.5s linear;
transition:background-color 0.5s linear;
background:#CCC;  }
button.validate,
.button {
margin: 0;
padding: 1px 5px 2px;
height: 25px;
color: #747474;
cursor: pointer;
font-size:12px;
text-transform: uppercase;
border: 1px solid #cbcbcb;
background: url(../images/bt_search.jpg) repeat-x top;
}

.button:hover {
color: #5c5c5c;
border: 1px solid #5c5c5c;
}

.search .inputbox {
margin: 0 10px 0 0;
height: 25px;
width: 170px;
padding: 2px 0 1px 0
}
/* JOOMLA STYLE
--------------------------------------------------------- */
/* Article Layout */
.leading {
width: 100%;
padding-bottom: 10px;

}
.leading_separator {
display: block;
margin: 1px 0;
height: 2px;
overflow: hidden;
width: 100%;
}
.article_column {
float: left;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
.article_separator {
clear: both;
margin: 0;
display: none;
}
.row_separator {
display: block;
clear: both;
height: 2px;
}
.article_row {
margin-bottom: 10px;
width: 100%;
float: left;

}
.column1.cols1 {
float: none;
}
.column2.cols2 {

}
.column3.cols3 {
float: right;
}
.column4.cols4 {
float: right;
}
.column5.cols5 {
float: right;
}
.column1.cols2 .article_column_pad,
.column1.cols3 .article_column_pad,
.column2.cols3 .article_column_pad,
.column1.cols4 .article_column_pad,
.column2.cols4 .article_column_pad,
.column3.cols4 .article_column_pad,
.column1.cols5 .article_column_pad,
.column2.cols5 .article_column_pad,
.column3.cols5 .article_column_pad,
.column4.cols5 .article_column_pad {
}
.article_column_pad {

padding: 5px ;
overflow: hidden;
}
p.iteminfo {
line-height: 1em;
margin: 0;

}
.article_row p.iteminfo {
/*line-height: 1em;
margin: 0 -10px 5px;
padding: 10px;*/
}
.articleinfo {
margin: 0.5em 0;
}
/* Category Table layout */
.filter {
float: left;
margin: 0;
padding: 0;
}
.display {
float: right;
margin: 10px 0 0;
text-align: right;
}
/**/
table.category,
table.weblinks,
table.newsfeeds {
border: 1px solid #383838;
width: 100%;
clear:both;
font-size:1em;
margin:20px 0;
}
table.category {
border: 1px solid #cfcfcf;
width: auto;
margin:10px 0;
}
table.category td {
padding: 4px 4px !important;
background: #f4f6f1;
}
table.category td.last {
padding: 0px 4px 0px 0px !important;
}
table.newsfeeds th, table.weblinks th, table.category th {
color: #444;
background: #dedede;
padding: 8px 5px 8px 5px;
}
table.newsfeeds td, table.weblinks td, table.category td {
padding:5px;
}
/* content tables */
.sectiontableheader {
padding: 4px 8px;
font-weight: bold;
}
.sectiontableheader a,
.sectiontableheader a:hover,
.sectiontableheader a:active,
.sectiontableheader a:focus {
color: #444;
}
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 8px;
}
tr.sectiontableentry2 td {
background: #efefef;
}
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 4px;
}
table.contentpane {
border: none;
background:none;
border:0px solid #383838;
width: 100%;
}
table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}
table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 30%;
float: right;
}
table.contenttoc td {
background: url(../images/bullet-list.gif) no-repeat 5px 8px;
padding: 1px 5px 1px 15px;
}
table.contenttoc th {
border-bottom: 1px solid #CCCCCC;
padding: 0 0 3px;
text-indent: 5px;
}
table.poll {
border-collapse: collapse;
padding: 0;
width: 100%;
}
table.pollstableborder {
border: none;
padding: 0;
text-align: left;
width: 100%;
}
table.pollstableborder img {
vertical-align: baseline;
}

table.pollstableborder td {
border-collapse: collapse;
border-spacing: 0;
padding: 4px !important;
background: none;
}
table.pollstableborder tr.sectiontableentry1 td {
background: #EEEEEE;
}

table.searchintro {
padding: 10px 0;
width: 100%;
}
table.searchintro td {
padding: 5px!important;
}
.blog_more {
margin: 0;
padding: 10px 0 0;
}
.blog_more strong {
display: block;
margin: 0 0 5px;
text-transform: uppercase;
}
.blog_more ul {
margin: 0;
padding: 0;
}
.blog_more ul li {
margin: 0;
padding: 0 0 0 21px;
}
.category {
font-weight: normal;
}
h1.componentheading,
.componentheading {
margin: 0;
font-size: 24px;
line-height: 35px;
color: #2d2d2d;
font-weight: bold;
text-indent: 10px;
text-shadow: 1px 1px 1px #d7d7d7;
}
.contentdescription {
/*padding-bottom: 30px;*/
}
h2.contentheading,
.contentheading {
margin: 0 0 10px 0;
font-size: 20px;
line-height: normal;
}
h2.contentheading a,
.contentheading a {
}
table.blog .contentheading {
font-size: 1.4em;
}
td.contentheading {
line-height: 28px;
}
a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
}
a.readon {
padding: 0 10px 0 0;
text-align: center;
font-weight: bold;
background: url(../images/readon.gif) no-repeat 100% 3px;
}
a.readon:hover,
a.readon:focus,
a.readon:active {
text-decoration: underline;
}
table.contentpaneopen td, table.contentpane td {
padding-left:15px;
}
table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}
div.moduletable {
padding: 0;
}
/* Style For Pagination */
ul.pagination {
color: #3B5468;
overflow: hidden;
clear: both;
margin: 10px auto;
padding: 10px 0;
text-align: center;
list-style: none;
}
ul.pagination li {
margin: 10px 2px;
padding: 0;
/*float: left;*/
display: inline;


}
ul.pagination li span {
display: inline-block;
background:url(../images/bg-pagination-items.png) no-repeat left top;
padding:0px 0px 0px 9px;
color: #2c2d32;

}
ul.pagination li span span {
background:url(../images/bg-pagination-items.png) no-repeat right top;
padding: 5px 9px 5px 0px;
display: inline-block;

}
ul.pagination a {
padding: 0;
text-decoration: none;
color: #fff;
font-weight: bold;
}
/*ul.pagination a:hover span span, ul.pagination a:active span span, ul.pagination a:focus span span {
color: #3c3c3c;
background: #e7e6e6;
border:1px solid #b3b2b2;
}*/
.counter {
text-align: center;
margin: 0 auto;
width: 150px;
background:url(../images/bg-pagination-items.png) no-repeat left top;
color: #2c2d32;
padding: 5px 0px;
}
.pagenavbar {
background: url(../images/icon-pages.gif) no-repeat center left;
font-weight: bold;
padding-left: 14px;
}
.pagenavcounter {
background: url(../images/icon-pages.gif) no-repeat 0 11px;
font-weight: bold;
padding: 8px 14px 0 14px;
}
.smalldark {
text-align: left;
}
div.syndicate div {
text-align: center;
}
/* META
--------------------------------------------------------- */
.article-toolswrap {
display: block;
margin: 0 0 10px;
padding: 0;
position: relative;
}
.article-tools {
display: block;
padding: 0 10px 0 0;
}
.article-meta {
width: 70%;
float: left;
color: #3B5468;
}
.createdby {
font-size: 0.9em;
}

.createdate {
font-size: 0.9em;
}
.modifydate {
width: 100%;
margin: 0 5px 0px 0;
}
.article-section {
padding-left: 6px;
margin-left: 5px;
}

.article-section a {
color: #3B5468;
}
.article-category a {
color: #3B5468;
}
.buttonheading img {
margin: 0px 0 0 3px !important;
padding: 0 !important;
border: 0 !important;
float: right;
background: none !important;
}
p.buttonheading {
text-align:right;
margin: 0;
}

p.buttonheading a:hover {
background:none !important;
color:#000 !important;
}
p.buttonheading a:active,p.buttonheading a:focus {
color:#000;
}
ul.latestnews,
ul.mostread {
padding-left: 0;
}
ul.latestnews li,
ul.mostread li {
margin: 0;
padding: 0 0 0 10px;
border-bottom: none;
}
a.button-grey {
margin: 2px 5px 0 5px;
padding: 0 15px 0 0;
float: left;
line-height: 18px;
color: #333;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background: url(../images/button-grey.jpg) no-repeat 100% 0;
}
a.button-grey span {
margin: 0;
padding: 0 0 0 15px;
float: left;
line-height: 18px;
cursor: pointer;
background: url(../images/button-grey.jpg) no-repeat 0 0;
}
a.button-grey:hover,
a.button-grey:focus,
a.button-grey:active {
color: #658a00;
text-decoration: none;
}
.loginframe {
margin: 0 auto;
padding: 10px;
width: 400px;
height: 145px;
position: relative;
background: #FFF;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.closebox {
margin: -25px -25px 0 0;
float: right;
width: 30px;
height: 30px;
line-height: 30px;
text-indent: -999em;
cursor: pointer;
background: url(../images/closebox.png) no-repeat 0 0;
}
.logincol {
margin: 0 10px 0 0;
float: left;
width: 180px;
}
.logincol label {
margin: 5px 0;
display: block;
}

.logincol ul {
margin: 5px 0;
}
.required {
color: #d5d5d5;
}
#jvloginframe {
display: none;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: transparent url(../images/bg-dot-black.png);
}
#jvloginContent {
display: block;
position: fixed;
width: 100%;
left: 0;
top: -165px;
z-index: 10000;
}
#jvbacktotop {
cursor: pointer;
}

ul.static li{margin:3px 0px;}
fieldset.input p{margin:3px 0px;}
fieldset.input label{font-weight:bold;}


[splite]

And here is my template file

Code Select Expand

<?php
/**
 * @copyright Copyright (C) 2008 - 2012 ZooTemplate.com. All rights reserved.
 * @license GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>
<?php JHTML::_('behavior.caption', true); ?>
<?php
$document = JFactory::getDocument();
$document->addStyleSheet($ztTools->baseurl() . 'templates/system/css/system.css');
$document->addStyleSheet($ztTools->baseurl() . 'templates/system/css/general.css');
$document->addStyleSheet($ztTools->templateurl() . 'css/default.css');
$document->addStyleSheet($ztTools->templateurl() . 'css/system.css');
$document->addStyleSheet($ztTools->templateurl() . 'css/template.css');
$document->addStyleSheet($ztTools->templateurl() . 'css/typo.css');
if($ztrtl == 'rtl') {
$document->addStyleSheet($ztTools->templateurl() . 'css/template_rtl.css');
$document->addStyleSheet($ztTools->templateurl() . 'css/typo_rtl.css');
}
if($this->params->get('zt_change_color')) {
$document->addScript($ztTools->templateurl() . 'js/zt.script.js');
}
$document->addScript($ztTools->templateurl().'js/zt.script.js');
$document->addStyleSheet($ztTools->templateurl() . 'css/vmsite-ltr.css');
?>
<link href="<?php echo $ztTools->parse_ztcolor_cookie($ztcolorstyle); ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var baseurl = "<?php echo $ztTools->baseurl() ; ?>";
var ztpathcolor = '<?php echo $ztTools->templateurl(); ?>/css/colors/';
var tmplurl = '<?php echo $ztTools->templateurl();?>';
var CurrentFontSize = parseInt('<?php echo $ztTools->getParam('zt_font');?>');
</script>
<!--[if lte IE 7]>
<link rel="stylesheet" href="<?php echo $ztTools->templateurl(); ?>css/ie7.css" type="text/css" />
<![endif]-->
</head>
<body id="bd" class="fs<?php echo $ztTools->getParam('zt_font'); ?> <?php echo $ztTools->getParam('zt_display'); ?> <?php echo $cslide; ?> <?php echo $ztTools->getParam('zt_display_style'); ?> <?php echo $ztrtl; ?>">
<div id="zt-wrapper">
<div id="zt-wrapper-inner">

<div id="zt-header"  class="clearfix">
<div class="zt-wrapper">
<div id="zt-header-inner">
   
<br><center><img src="templates\zt_conto\images\logo.png" align"center"></a></center>

<div id="zt-header-right">
<div id="zt-headerlink">
<jdoc:include type="modules" name="top_menu" />
</div>

<?php if($this->countModules('search')) : ?>
<div id="zt-search" class="clearfix">
<jdoc:include type="modules" name="search" style="xhtml"  />
</div>
<?php endif; ?>
</div>

<div id="zt-mainmenu" class="<?php if($this->countModules('slideshow')) : ?>menu-and-slide<?php else: ?>menu-no-slide<?php endif ?>">
<div id="zt-mainmenu-left"></div>
<div id="zt-mainmenu-center">
<?php $menu->show(); ?>
</div>
<div id="zt-mainmenu-right"></div>
</div>

</div>
</div>
</div>

<?php if($this->countModules('slideshow')) : ?>
<div id="zt-userwrap1" class="clearfix">
<div class="zt-wrapper">
<div id="zt-userwrap1-inner">

<div class="zt-rounded-corners">
<div class="zt-tc">
<div class="zt-tl"></div>
<div class="zt-tr"></div>
</div>
<div class="zt-c clearfix"><div class="zt-cl"><div class="zt-cr">
<jdoc:include type="modules" name="slideshow" />
</div></div></div>
<div class="zt-bc clearfix">
<div class="zt-bl"></div>
<div class="zt-br"></div>
</div>
</div>


</div>
</div>
</div>
<?php endif; ?>

<?php
$spotlight = array ('user1','user2','user3','user4');
$consl = $ztTools->calSpotlight($spotlight,$ztTools->isOP()?100:100,'%');
if( $consl) :
?>
<div id="zt-userwrap2" class="clearfix">
<div class="zt-wrapper">
<div id="zt-userwrap2-inner">

<div class="zt-rounded-corners">
<div class="zt-tc">
<div class="zt-tl"></div>
<div class="zt-tr"></div>
</div>
<div class="zt-c clearfix">
<div class="zt-cl">
<div class="zt-cr">
<div class="zt-c-inner">
<?php if($this->countModules('user1')) : ?>
<div id="zt-user1" class="zt-user zt-box<?php echo $consl['user1']['class']; ?>" style="width: <?php echo $consl['user1']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user1" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user2')) : ?>
<div id="zt-user2" class="zt-user zt-box<?php echo $consl['user2']['class']; ?>" style="width: <?php echo $consl['user2']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user2" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user3')) : ?>
<div id="zt-user3" class="zt-user zt-box<?php echo $consl['user3']['class']; ?>" style="width: <?php echo $consl['user3']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user3" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user4')) : ?>
<div id="zt-user4" class="zt-user zt-box<?php echo $consl['user4']['class']; ?>" style="width: <?php echo $consl['user4']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user4" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div class="zt-bc clearfix">
<div class="zt-bl"></div>
<div class="zt-br"></div>
</div>
</div>

</div>
</div>
</div>
<?php endif; ?>

<!-- MAINBODY -->
<div id="zt-mainbody<?php echo $zt_width;?>" class="clearfix">
<div class="zt-wrapper">
<div id="zt-mainbody-inner">
<!-- CONTAINER -->
<div id="zt-container" class="clearfix">
<?php if($this->countModules('left')) : ?>
<div id="zt-left">
<div id="zt-left-inner">
<div class="zt-rounded-corners">
<div class="zt-tc">
<div class="zt-tl"></div>
<div class="zt-tr"></div>
</div>
<div class="zt-c clearfix">
<div class="zt-cl">
<div class="zt-cr">
<div class="zt-c-inner">
<jdoc:include type="modules" name="left" style="ztxhtml2" />
</div>
</div>
</div>
</div>
<div class="zt-bc clearfix">
<div class="zt-bl"></div>
<div class="zt-br"></div>
</div>
</div>
</div>
</div>
<?php endif; ?>

<div id="zt-content">
<div id="zt-maincontent-inset">
<div class="zt-rounded-corners">
<div class="zt-tc">
<div class="zt-tl"></div>
<div class="zt-tr"></div>
</div>
<div class="zt-c clearfix">
<div class="zt-cl">
<div class="zt-cr">
<?php if($this->countModules('breadcrumb')) : ?>
<div id="zt-breadcrumb">
<jdoc:include type="modules" name="breadcrumb" />
</div>
<?php endif; ?>

<?php if($this->countModules('user5')) : ?>
<div id="zt-user5" class="clearfix">
<jdoc:include type="modules" name="user5" style="ztxhtml" />
</div>
<?php endif; ?>

<div class="zt-rounded-corners2">
<div class="zt-tc">
<div class="zt-tl"></div>
<div class="zt-tr"></div>
</div>
<div class="zt-c clearfix"><div class="zt-cl"><div class="zt-cr">
<div id="zt-component" class="clearfix">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>

<?php if($this->countModules('user6')) : ?>
<div id="zt-user6" class="clearfix">
<jdoc:include type="modules" name="user6" style="ztxhtml" />
</div>
<?php endif; ?>
</div></div></div>
<div class="zt-bc clearfix">
<div class="zt-bl"></div>
<div class="zt-br"></div>
</div>
</div>

</div>
</div>
</div>
<div class="zt-bc clearfix">
<div class="zt-bl"></div>
<div class="zt-br"></div>
</div>
</div>
</div>
</div>

</div>
<!-- END CONTAINER -->
</div>
</div>
</div>
<!-- END MAINBODY -->
<?php
$spotlight = array ('user7','user8','user9','user10');
$botsl3 = $ztTools->calSpotlight ($spotlight,$ztTools->isOP()?100:100,'%');
if( $botsl3 ) :
?>
<div id="zt-userwrap4" class="clearfix">
<div class="zt-wrapper">
<div id="zt-userwrap4-inner">

<div class="zt-rounded-corners">
<div class="zt-tc">
<div class="zt-tl"></div>
<div class="zt-tr"></div>
</div>
<div class="zt-c clearfix"><div class="zt-cl"><div class="zt-cr">
<?php if($this->countModules('user7')) : ?>
<div id="zt-user7" class="zt-user zt-box<?php echo $botsl3['user7']['class']; ?>" style="width: <?php echo $botsl3['user7']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user7" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user8')) : ?>
<div id="zt-user8" class="zt-user zt-box<?php echo $botsl3['user8']['class']; ?>" style="width: <?php echo $botsl3['user8']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user8" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user9')) : ?>
<div id="zt-user9" class="zt-user zt-box<?php echo $botsl3['user9']['class']; ?>" style="width: <?php echo $botsl3['user9']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user9" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user10')) : ?>
<div id="zt-user10" class="zt-user zt-box<?php echo $botsl3['user10']['class']; ?>" style="width: <?php echo $botsl3['user10']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user10" style="ztxhtml2" />
</div>
</div>
<?php endif; ?>
</div></div></div>
<div class="zt-bc clearfix">
<div class="zt-bl"></div>
<div class="zt-br"></div>
</div>
</div>

</div>
</div>
</div>
<?php endif; ?>

<div id="zt-bottom" class="clearfix">
<div class="zt-wrapper">
<div id="zt-bottom-inner">
<div class="zt-bgt"></div>
<div class="zt-bgc">
<?php
$spotlight = array ('user11','user12','user13','user14');
$botsl3 = $ztTools->calSpotlight ($spotlight,$ztTools->isOP()?100:100,'%');
if( $botsl3 ) :
?>
<div id="zt-userwrap5" class="clearfix">
<div id="zt-userwrap5-inner">
<?php if($this->countModules('user11')) : ?>
<div id="zt-user11" class="zt-user zt-box<?php echo $botsl3['user11']['class']; ?>" style="width: <?php echo $botsl3['user11']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user11" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user12')) : ?>
<div id="zt-user12" class="zt-user zt-box<?php echo $botsl3['user12']['class']; ?>" style="width: <?php echo $botsl3['user12']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user12" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user13')) : ?>
<div id="zt-user13" class="zt-user zt-box<?php echo $botsl3['user13']['class']; ?>" style="width: <?php echo $botsl3['user13']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user13" style="ztxhtml" />
</div>
</div>
<?php endif; ?>

<?php if($this->countModules('user14')) : ?>
<div id="zt-user14" class="zt-user zt-box<?php echo $botsl3['user14']['class']; ?>" style="width: <?php echo $botsl3['user14']['width']; ?>;">
<div class="zt-box-inside">
<jdoc:include type="modules" name="user14" style="ztxhtml" />
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
<div class="zt-bgb">
<div class="zt-bgb-c">
<div class="zt-bgb-t">
<div class="zt-bgb-b">
<div id="zt-footer">
<div id="zt-footer-links"><jdoc:include type="modules" name="footer" /></div>
</div>
<div id="zt-copyright">
<?php if($showTools) : ?>
<div class="change-color"><?php echo $changecolor; ?></div>
<?php endif; ?>
<div id="zt-copyright-inner">
<?php if($ztTools->getParam('zt_footer')) : ?>
<?php echo $ztTools->getParam('zt_footer_text'); ?>
<?php else : ?>
Londonderry Online Store
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


</div>
</div>


</body>
</html>



[bytelord]

Hi,
Any live url?

[jenkinhill]

You have posted copyrighted files here. That is not a good idea as it probably breaks the terms of your contract with the template supplier.

eg:
Copyright (c) 2008-2012 ZooTemplate. All Rights Reserved.
* @license - Copyrighted Commercial Software
* Author: ZooTemplate
* Websites:  http://www.zootemplate.com

It is them you should contact about problems with their own templates.  http://forum.virtuemart.net/index.php?topic=90503.0

You could  use Firebug to see the code causing your issue and test css edits.  http://forum.virtuemart.net/index.php?topic=102850.0

BTW a screen image is rarely useful in identifying laout/css issues. A url is preferable.

[splite]

Yep you can see it here - http://86.139.177.51

[bytelord]

Hello,

This is not a vm issue but how your commercial zoo template is working, places some css on the module title a background image because is how that template has been made.
As jenkinhill tells you is a copyrighted commercial template and you should ask support from them (always better).

On your problem now, inside grey.css file (located inside your zoo template) around line 96 sets an extra background image  background-image: url("../../images/grey/bg-module-head.png");

you could hide that one from your css. The other grey color background depends on the size of your title (e.g. h3 in your template).

For further assistance about that your could contact your template provider and off course as jenkinhill suggest you to examine it with firebug.

Regards