Right Sideboxes Misaligned

[ScriptJunkie]

Hi Everyone,

Somewhere in the process of installing Mods my right sideboxes became misaligned.

I'm not sure why, as only two of the Mods involved altering the stylesheet, and neither of the changes should have affected any sideboxes but the ones the Mods were for.

If you look at the boxes on the right, the top two (Search and Live Help) are aligned as they should be.

All of the rest of them down the page are indented to the left causing severe crowding on a fully populated page.

I've tried editing the margins for the sidebox wrappers to match those for the divs containing the boxes that display properly, but all that results in is having sideboxes all smashed together vertically??

Can someone please take a look and help me to understand what's gone wrong?

Thanks in advance for the help
The link is www.empowermentsanctuary.com/marketplace/

[s_t_e_v_e]

The structure of the column has changed...

All the side box divs should be within a wrapper div "navColumnTwo"

You have an extra closing DIV after the livehelp DIV.. this single div should be at the bottom of your tempate file

[ScriptJunkie]

Hi Steve,

Thanks so much for the help. Here's what I did:

Changed

#livehelp {text-align:center}
#livehelp img {margin-top:15px;}

to:

#navColumnTwoWrapper, #livehelp, #livehelp img {
margin-top:15px;
text-align:center;
}

and moved it to the bottom of the CSS file.

I think it's clear that I'm not understanding something because it still looks the same.

[s_t_e_v_e]

I should be a little more detailed probably... the error is not with the CSS in the stylesheet... but within a template file.

You need to edit the sidebox template for your live help box and remove an extra </div> which maybe at the bottom...

[ScriptJunkie]

Hi Steve,

No apologies - you clearly stated the issue was within the template. I had CSS stuck in my head from the suggestion you gave me in another thread and was simply working when I was too tired to focus.

Your instructions are clear

I'll go play around with the template file and see what I can accomplish. Thanks so much for pointing me in the right direction!

Truly appreciated!

[ScriptJunkie]

Ok, here's what I did: I removed two sections, both with the same result. One section is in red, the other in blue.

I'm not sure what constitutes a div, so I don't know if just the blue string is the extra div you spoke of, or if the div is a combination of both the blue and the red.

The page looks perfect regardless of removing one or both, but since I'm guessing at what to remove based on visual results, I want to make sure I didn't achieve the look I'm going for at the expense of functionality by removing the wrong line.

Can you do a quick code check for me and tell me if I only needed to remove the blue code, or if I should dump them both?

Also, should I change the class from "sideBoxContent centeredContent" to "NavColumnTwo"?

<?php
$content = '';
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
$content .= "\n";

$content = '<!-- BEGIN Help Center Live Code, Copyright (c) 2005 Help Center Live. All Rights Reserved -->
<div id="div_initiate" style="position:absolute; z-index:1; top: 40%; left:40%; visibility: hidden;"><a href="javascript:Live.initiate_accept();"><img src="http://www.empowermentsanctuary.com/hcl/templates/Bliss/images/initiate.gif" border="0" alt="Accept Customer Assistance"></a><br><a href="javascript:Live.initiate_decline();"><img src="http://www.empowermentsanctuary.com/hcl/templates/Bliss/images/initiate_close.gif" border="0" alt="Decline Customer Assistance"></a></div>
<script type="text/javascript" language="javascript" src="http://www.empowermentsanctuary.com/hcl/class/js/include.php?live&cobrowse"></script>
<!-- END Help Center Live Code, Copyright (c) 2005 Help Center Live. All Rights Reserved --><br>';

$content .= '<div class="sideBoxContent"> </div>' . "\n";
$content .= "\n";
$content .= '</div>';
?>

I'm thinking I need to remove the blue line, and the red line above that one, but leave the first red line to close the opening div.

Is that correct?

[ScriptJunkie]

Here's what I finally ended with.

Is this what you meant when you said sidebox divs should be in a NavColumnTwo wrapper div and that I had an extra div at the end that needed to go?

Again, it looks perfect on the page, I guess I'm just looking for confirmation that I did it correctly.

<?php
$content = '';
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="NavColumnTwo">';
$content .= "\n";

$content = '<!-- BEGIN Help Center Live Code, Copyright (c) 2005 Help Center Live. All Rights Reserved -->
<div id="div_initiate" style="position:absolute; z-index:1; top: 40%; left:40%; visibility: hidden;"><a href="javascript:Live.initiate_accept();"><img src="http://www.empowermentsanctuary.com/hcl/templates/Bliss/images/initiate.gif" border="0" alt="Accept Customer Assistance"></a><br><a href="javascript:Live.initiate_decline();"><img src="http://www.empowermentsanctuary.com/hcl/templates/Bliss/images/initiate_close.gif" border="0" alt="Decline Customer Assistance"></a></div>
<script type="text/javascript" language="javascript" src="http://www.empowermentsanctuary.com/hcl/class/js/include.php?live&cobrowse"></script>
<!-- END Help Center Live Code, Copyright (c) 2005 Help Center Live. All Rights Reserved --><br>';

$content .= '<div class="NavColumnTwo"> </div>' . "\n";
?>

Thanks a bunch!

[s_t_e_v_e]

Hi.

I just looked at your page and it appears to be displaying properly...

There are a couple of things about that code that puzzle me; and this would be my version;

<?php
$content = '';
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
$content .= "\n";

$content .= '<!-- BEGIN Help Center Live Code, Copyright (c) 2005 Help Center Live. All Rights Reserved -->
<div id="div_initiate" style="position:absolute; z-index:1; top: 40%; left:40%; visibility: hidden;"><a href="javascript:Live.initiate_accept();"><img src="http://www.empowermentsanctuary.com/hcl/templates/Bliss/images/initiate.gif" border="0" alt="Accept Customer Assistance"></a><br><a href="javascript:Live.initiate_decline();"><img src="http://www.empowermentsanctuary.com/hcl/templates/Bliss/images/initiate_close.gif" border="0" alt="Decline Customer Assistance"></a></div>
<script type="text/javascript" language="javascript" src="http://www.empowermentsanctuary.com/hcl/class/js/include.php?live&cobrowse"></script>
<!-- END Help Center Live Code, Copyright (c) 2005 Help Center Live. All Rights Reserved -->';


$content .= '</div>';
?>

[ScriptJunkie]

LOL the whole thing puzzles me, to be frank!

The original code came off the forum. Someone had posted it as a fix to the code that comes with the Mod. I copy/pasted it, added in my own java, and then edited from there.

I've swapped out my code for the code you provided and everything seems to be working fine and it looks great!

Thanks so much, I deeply appreciate your assistance!