Joomla bottom CSS template problem

[smile]

Hi, want to use Fedora 1.5 bottom spotlight on my Bellatrixv1.1 1.5 template.

 

css_ok.jpg - How I need it to look like

jpg.gif css_problem.jpg - The problem

zip.gif css_problem.zip - zipped file with fedora and bellatrix css and index files

 

Is does not work right. The modules is repeated 3 times somehow too

 

Here is my original bellatrix bottom spotlight code:

 

Old bottom header form CSS file:

 

/*old bottom header
   #ja-botsl {
background: url(../images/botsl-bg.gif) top left repeat-x #545C66;
color: #C6CED9;
padding: 15px 20px;
}



#ja-botsl a {
color: #C6CED9;
}

.ja-box {
float: left;
overflow: hidden;
}

#ja-botsl h3 {
padding: 0;
margin: 0 0 5px;
color: #FFFFFF;
font-size: 1em;
}

#ja-botsl div.moduletable {
margin: 0 20px 0 0;
padding: 0;
}

#ja-botsl ul {
padding: 0;
margin: 0!important;
}

#ja-botsl li {
padding: 0;
margin: 0;
background: none;
line-height: 170%;
}

#ja-botsl li a {
padding-left: 13px;
background: url(../images/arrow-readon.gif) no-repeat 0 50%;
text-decoration: none;
}

#ja-botsl li a:hover,
#ja-botsl li a:active,
#ja-botsl li a:focus {
color: #5FA4FB;
background: url(../images/arrow-readon2.gif) no-repeat 0 50%;
text-decoration: none;
}

#ja-botsl td {
padding: 0;
}

#ja-botsl .article_separator,
#ja-topsl .article_separator {
display: none;
}

#ja-botsl table,
#ja-topsl table {
border-spacing: 0;
border-collapse: collapse;
}

.box-ended div.moduletable {
margin-right: 0!important;
border: none!important;
} end old bottom header*/

 

New code from Fedora bottom header form CSS file:

does it need changing to adapt to bellatrix template?

/*start bottom header beta 

/* Bot spotlight */
element.style {
height:211px;
width:20%;
}

/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left, .ja-box-center {
}

#ja-botsl {
color: #CCCCCC;
background: url(../images/pat3-1.gif) #666666;
}

#ja-botsl h3 {
color: #FFFFFF;
font-size: 115%;
background: none;
border-bottom: 1px solid #999999;
margin-bottom: 0;
margin: 0 0 5px;
padding: 0 0 5px;
}

#ja-botsl div.moduletable {
padding: 15px;
}

#ja-botsl .ja-box-full,
#ja-botsl .ja-box-left,
#ja-botsl .ja-box-center,
#ja-botsl .ja-box-right {
border-top: 5px solid #CCCCCC;
}

#ja-botsl .ja-box-full:hover,
#ja-botsl .ja-box-left:hover,
#ja-botsl .ja-box-center:hover,
#ja-botsl .ja-box-right:hover {
border-top: 5px solid #E6E6E6;
background: url(../images/pat3-2.gif) #787878;
color: #FFFFFF;
}

#ja-botsl .ja-box-full:hover a,
#ja-botsl .ja-box-left:hover a,
#ja-botsl .ja-box-center:hover a,
#ja-botsl .ja-box-right:hover a {
color: #FFFFFF;
}

#ja-botsl ul, #ja-botsl ol {
margin: 0;
padding: 0;
}

#ja-botsl ol li {
margin: 0 0 0 20px;
padding: 0;
}

#ja-botsl ul li {
margin: 0;
padding: 4px 4px 6px;
background: url(../images/dot.gif) repeat-x bottom;
}

#ja-botsl a {
display: block;
color: #CCCCCC;
}

#ja-botsl li a:hover, #ja-botsl li a:active, #ja-botsl li a:focus {
color: #FFFFFF;
}

/*end bottom header beta*/

 

Old bellatrix index php code

 

<!-- BEGIN: BOTTOM SPOTLIGHT -->
<div id="ja-botsl" class="clearfix">

<?php if ( $this->countModules('user1') ) { ?>
<div class="ja-box<?php echo $user1divstyle; ?>" style="width: <?php echo $divbotwidth ?>;">
	<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php } ?>

<?php if ( $this->countModules('user2') ) { ?>
<div class="ja-box<?php echo $user2divstyle; ?>" style="width: <?php echo $divbotwidth ?>;">
	<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php } ?>

<?php if ( $this->countModules('top') ) { ?>
<div class="ja-box<?php echo $topdivstyle; ?>" style="width: <?php echo $divbotwidth ?>;">
	<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php } ?>

</div>
<!-- END: BOTTOM SPOTLIGHT -->

 

New bellatrix code

 

<!-- BEGIN: BOTTOM SPOTLIGHT -->
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user1') ) {?>
  <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
	<jdoc:include type="modules" name="user2" style="xhtml" />
  </div>
  <?php } ?>

<?php if( $this->countModules('user2') ) {?>
  <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
	<jdoc:include type="modules" name="user2" style="xhtml" />
  </div>
  <?php } ?>

<?php if( $this->countModules('top') ) {?>
  <div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
	<jdoc:include type="modules" name="user2" style="xhtml" />
  </div>
  <?php } ?>

</div>
<!-- END: BOTTOM SPOTLIGHT -->

 

[attachment deleted by admin]