center column overlapping categories box

[monkeymadness]

hello

starting a new store and Ive done something for the center text to overlap the categories sidebox

www.kakuroholics.com/conditions.html

any idea what I've done?

thanks

[gjh42]

It's not that your center text is overlapping the sidebox, rather the sidebox image is shifted right and covers the text. The link area is where it should be, but the image doesn't correspond... wierd.

I saw several suspicious definitions, but finally found the culprit in the betterCategories stylesheet:

.betterCategories {
font: 11px Verdana, Arial, sans-serif;
background-image: url(.../includes/templates/kakuro/images/kakuro_icon.gif);
background-repeat:none;
background-position: 0em 50%;
background-color: rgb(0,52,102);
border-top: 2px solid #ffffff;
color: #ffffff;
font-weight: bold;
line-height: 150%;
word-spacing: 2px;
margin-left: 60px; <-----------CHANGE TO 0px
text-align: left;
width: 190px;
}

I would have thought this would just squeeze the text to clear the left margin, but apparently the background kakuro_icon shifts too and carries the text with it? Doesn't seem right, but it's what happens.

On another topic, I noticed that on my 800x600 monitor the logo squashes and the center text is cut off on the right. If you set a min width for the logo wrapper, it won't squeeze past a certain point (this may not work in IE, according to the w3schools css ref page):

#logoWrapper {
min-width: 820px;

[seethrou]

Oops, gjh42 is faster.

Another thing you should know.

You have some PHP code left here with your page source,

Why?

Plwase note that:

<php
}
}
?>

in the

<!--bof Add to Cart Box -->
                  <div id="cartAdd">
    Add to Cart: <input type="text" name="cart_quantity" value="1" maxlength="6" size="4" /><br /><br /><input type="hidden" name="products_id" value="2" /><input class="cssButton button_in_cart" onmouseover="this.className='cssButtonHover button_in_cart button_in_cartHover'" onmouseout="this.className='cssButton button_in_cart'" type="submit" value="Add to Cart" style="width: 80px;" />          </div>
  <!--eof Add to Cart Box-->
<br class="clearBoth" />
<php 
}
}
?>

[monkeymadness]

thank you both very much for the help, all points taken and done...


the margin: 60px was a silly way to get the categories sidebox to be in line with the picture at the top and bottom ..silly as it probably only works on my size screen...

do you know how I could get it to be in line rarther than all the way to the left?

[seethrou]

At first, the following is simplified (only with portion data) page source of your link.
And you must know that, in Admin => Layout Setting,
There are still settings for columns left.
Column Width - Left Boxes 150px (200px, your’s?)
Column Width - Left 150px (200px, your’s?)

<tr>

<td style='width: 200px;' class='columnLeft' id='navColumnOne'>
<div style='width: 200px;' id='navColumnOneWrapper'>
<!--// bof: categories //-->
<div style='width: 200px;' id='categories' class='leftBoxContainer'>
<h3 id='categoriesHeading' class='leftBoxHeading'>
Categories
</h3>
<div class='sideBoxContent' id='categoriesContent'>
<a href='http://www.kakuroholics.com/kakuro-mugs-c-1.html' class='category-top'>
<ins>
<div class='betterCategories'>
Kakuro Mugs
</div>
</ins>
</a>
<a href='http://www.kakuroholics.com/products_all.html' class='category-links'>
<ins>
<div id='bottomcategory' class='betterCategories'>
All Products ...
</div>
</ins>
</a>
</div>
</div>
<!--// eof: categories //-->

</div>
</td>

<td valign='top'>
<!-- bof breadcrumb -->
<!-- eof breadcrumb -->

<div id='conditions' class='centerColumn'>
<h1 id='conditionsHeading'>
Conditions of Use
</h1>

<div class='content' id='conditionsMainContent'>
<p>
Welcome to Kakuroholics.com
<br />
<br />
If you continue to browse and use this website you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern Kakuroholics.com's relationship with you in relation to this website.
</p>
<p>
</p>
</div>

</div>

</td>

</tr>

You only have a fixed 200px for your column left. Not sufficient for your bettercategories box to strength. Out of it at once is the column center.
e.g.
|<------------- Your Graphics ------>|
|<------- 200px ---—>|<---column center width ---->|
|<--- column left---->|column center contents ----->|

The problem is if set the bettercategories inline with the graphics, it cause problems. The bettercategories will overleap the contents of the column center.
You must figure out a solution to balance the above problems.
The first thought,
1. increasing the width of the column left for sufficient space for bettercategories.
2. increasing the left padding of the contents in column center.
3. do both or mores additional.

Note: please also don't neglected the fluid factors!

Good luck.

[monkeymadness]

Thank you seethrou that was really helpful...I've done it by making the left column width 33%

with no adjustments to the center column

thanks again

[seethrou]

I am afraid I have to tell you to check for the fluid problem again.

You can see this at resolution of 800 x 600.