Huge gap between my sub-categories

[talbot649]

Please can someone help me!

 

I've been trying to troubleshoot my column_left.php file to stop a massive gap appearing on my sub-category listing pages between the top sub-category and the rest.

 

It looks as though the rest of the content is being pushed down below the left column items - but I can't for the life of me fix it :(

 

I'm sure it's relatively simple - could anyone take a look at http://www.hor-i-zon.com/catalog/index.php?cPath=405 and help me please? :)

[talbot649]

Even if someone could direct me to the file that's most likely causing the problem that would be really helpful :)

 

Am I right in thinking there's a <div> tag somewhere that's wrong?

[talbot649]

I'm sure this is a simple problem - I just can't figure where to look (outside of column_left.php) for the code that's causing this to push down.

 

I'm really desperate if anyone can help!!?

[Xpajun]

It looks like a badly written template problem to me have you tried the template author?

[vjboc]

From what I can see in view source. I would try and remove <span></span> It is the code before the 3rd category.

 

 

 

<div class="category-clear"> <span></span> </div><div class="category-left">

<div class="category-inner">

<a href="http://www.hor-i-zon.com/catalog/index.php?cPath=405_440"><img src="images/cat_440.jpg" border="0" alt="Drivers & Wrenches" title=" Drivers & Wrenches " width="50" height="50"></a><div class="category-text"><a href="http://www.hor-i-zon.com/catalog/index.php?cPath=405_440">Drivers & Wrenches</a><br />Range of impact drivers and wrenches.</div>

[talbot649]

From what I can see in view source. I would try and remove <span></span> It is the code before the 3rd category.

 

 

 

<div class="category-clear"> <span></span> </div><div class="category-left">

<div class="category-inner">

<a href="http://www.hor-i-zon.com/catalog/index.php?cPath=405_440"><img src="images/cat_440.jpg" border="0" alt="Drivers & Wrenches" title=" Drivers & Wrenches " width="50" height="50"></a><div class="category-text"><a href="http://www.hor-i-zon.com/catalog/index.php?cPath=405_440">Drivers & Wrenches</a><br />Range of impact drivers and wrenches.</div>

 

That's what I thought. I've removed that <span></span> but it makes no difference. I've been tweaking the code and testing it but can't get rid of whatever problem is causing the sub-categories to be pushed below the end of the left-column objects.

 

This is the code that's causing the problem:

 

// Put category listing into 2 columns and display description

$count = 1;
$clear_div = false;
echo "<div id=\"categories-list\">\n";
while ($categories = tep_db_fetch_array($categories_query)) {

if ($count == 1 || $count == 2){
	$extra_css = "-noborder";
} else {
	$extra_css = "";
}

if ((1&$count)) {
	// odd
		echo "<div class=\"category-left" . $extra_css . "\">\n";
	$clear_div = false;
} else {
	// even
	echo "<div class=\"category-right" . $extra_css . "\">\n";
	$clear_div = true;
}

echo "<div class=\"category-inner\">\n";
// get path for category link
   $cPath_new = tep_get_path($categories['categories_id']);

if (!empty($categories['categories_image'])){
	echo "<a href=\"" . tep_href_link(FILENAME_DEFAULT, $cPath_new) . "\">" . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], 50, 50) . "</a>";
}
echo "<div class=\"category-text\">";
   echo "<a href=\"" . tep_href_link(FILENAME_DEFAULT, $cPath_new) . "\">" . $categories['categories_name'] . "</a>";

if (!empty($categories['categories_description'])){
	echo "<br />" . $categories['categories_description'];
}
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";

if ($clear_div){
	echo "<div class=\"category-clear\"><span></span></div>";
}

$count++;
}
echo "</div>\n";
echo "<div class=\"category-list-bar\"><hr /></div>";

 

And this is the stylesheet code:

 

/* New category listing styles */
#categories-list {
width: 580px;
}

.category-left {
width: 270px;
float: left;
border-top: 1px solid #cccccc;
margin-top: 10px;

}
.category-right {
width: 270px;
float: left;
margin-left: 30px;
border-top: 1px solid #cccccc;
margin-top: 10px;
}

.category-left-noborder {
width: 270px;
float: left;	
}
.category-right-noborder {
width: 270px;
float: left;
margin-left: 30px;
}

.category-inner {
margin-top: 10px;
font-size: 1em;
}

.category-inner img {
float: left;
margin-right: 5px;
}

.category-text {
float: left;
width: 210px;
}

.category-clear {
clear: both;
height: 0;
}

.category-inner a {
color: #990000;
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
}

.category-list-bar {
margin-top: 10px;
margin-bottom: 30px;
}

.category-list-bar hr {
width: 100%;
color: #cccccc;
size: 2px;
}

 

If anyone can spot the mistake I'd be really grateful! :)

[multimixer]

It has to do with the floating and the clear div. Try to play around with this.

 

The clear div affects the floating of the complete listing section (clearing it) so it goes under the left column.

 

Maybe you try to put each row into a left floating div that has the width of the complete middle section, so the one will be listed under the other. Then you clear everything at the bottom. Just a thought

 

EDIT: As I see now, there is no fixed width, the right column overlaps the middle section when narrowing the browser window. I would set this first

[talbot649]

It has to do with the floating and the clear div. Try to play around with this.

 

The clear div affects the floating of the complete listing section (clearing it) so it goes under the left column.

 

Maybe you try to put each row into a left floating div that has the width of the complete middle section, so the one will be listed under the other. Then you clear everything at the bottom. Just a thought

 

That's what I'm thinking. I've tried changing the category-clear div from clear: both to none, left, right, up, down, inherit, but nothing works :-" are there any other values I can try?

[talbot649]

EDIT: As I see now, there is no fixed width, the right column overlaps the middle section when narrowing the browser window. I would set this first

 

I usually set a fixed width for my other sites, but this one has an externally designed template. Can I set the fixed width in the stylesheet.css as I would usually?

[multimixer]

Try not to clear at all (change the css) and see what happens. Let it all float left. Then you see where to clear. Also, floating elements should have a fixed with. Also, I don't know how good it is to put on a left floating element a left marging

.category-left-noborder {
       width: 270px;
       float: left;    
}
.category-right-noborder {
       width: 270px;
       float: left;
       margin-left: 30px;
}

 

Maybe you change the margin-left to be margin-right and put it to the category-left entry (not related to your issue)

[multimixer]

I usually set a fixed width for my other sites, but this one has an externally designed template. Can I set the fixed width in the stylesheet.css as I would usually?

 

Of course you can, if necessary add some more div's around the whole thing

[talbot649]

Try not to clear at all (change the css) and see what happens. Let it all float left. Then you see where to clear. Also, floating elements should have a fixed with. Also, I don't know how good it is to put on a left floating element a left marging

.category-left-noborder {
       width: 270px;
       float: left;    
}
.category-right-noborder {
       width: 270px;
       float: left;
       margin-left: 30px;
}

 

Maybe you change the margin-left to be margin-right and put it to the category-left entry (not related to your issue)

 

If I delete the <clear> it all moves up (including the featured products), and underlaps the right column. But it moves up at least!