PDA

View Full Version : My customer service software article script display problem



jeddi
Oct 16th, 2009, 07:03 AM
Hi

I have a display problem with my article on my website.
The one I am trying to resolve is called customer service software
and the problem is with the two divs.

One contains the menu leading to other articles and the other contains
the actual article.

I have check the widths and everything should fit in side by side, but they don't the second div gets pushed below.

I added the "display:inline;" code not it did not resolve the problem.

This what that article looks like:
customer service software (http://www.support-focus.com/Customer-Service-Software.php)

If I get this one sorted out the other 8 articles should also be OK
I hope that someone can spot what I have done wrong.


Here is the CSS:



body {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000000;
margin:20px 0 0 0;
padding:0 0 0 0;
background:#ffffff;
text-align:center;
}

.top {
margin:0 auto;
padding:0 0 0 0;
width:780px;
height:9px;
background:#ffffff url(images/page_top2.jpg) no-repeat;
}

.page_wrap {
/* includes the header, main body content and the footer */
margin:0 auto;
padding:0 0 0 0;
width:780px;
background:#ffffff url(images/body_bg.jpg) repeat-y;
text-align:center;
}

.header {
position:relative;
margin:0 0 0 0 !important;
margin:-7px 0 0 0;
padding:0 0 0 ;
width:780px !important;
width:742px;
height:125px;
background:#ffffff;
text-align:left;
}

.header_block {
position:relative;
margin:0 20px 0 20px;
padding:0 0 0 0;
width:740px;
background:transparent;
text-align:left;
color:#eeeaaa;
}

.logo {
position:relative;
float:right;
margin:3px 10px 0 0;
padding:0 0 0 0;
}

.navbar {
position:relative;
margin:0 0 0 0;
padding:0 0 0 0;
width:780px !important;
width:742px;
height:39px;
background:#ffffff url(images/nav_bg2.jpg);
text-align:left;
color:#000000;
font-size:.9em;
}

.container {
position:relative;
margin:10px 0 0 10px;
padding:0 0 0 0;
width:760px !important;
width:742px;
background:transparent;
text-align:left;
}

.left_column {
position:absolute;
left:0;
width:140px;
margin:0 0 0 0;
padding:0 4px 0 0;
background:transparent;
font-size:.9em;
color:#6E312A;
}

.left_column_wide {
width:200px;
margin:0 0 0 0;
padding:0 0px 0 0;
background:transparent;
font-size:.9em;
color:#6E312A;
float:left;
display:inline;
}

.center_column {
position:relative;
width:595px;
margin:0 0 0 151px;
padding:0 0 0 10px;
border-left:1px solid #999999;
}

.center_column_nar {
position:relative;
width:480px;
min-height:700px;
margin:0 0 0 260px;
padding:0 0 0 10px;
border-left:1px solid #999999;
float:right;
display:inline;
}
.contact_column {
position:relative;
width:600px;
margin:0 0 0 20px;
padding:0 0 0 10px;
text-align:left;
}

.box_right {
position:relative;
float:right;
width:150px;
margin:0 0 3px 10px !important;
margin:0 5px 3px 10px;
padding:2px 5px 2px 10px;
background:#eeeeee;
border:1px solid #cccccc;
text-align:left;
color:#616161;
font-size:.9em;
}

AND here is the page html


<body>
<div class="top" ></div>

<div class="page_wrap clearfix" style="background-color:white;"> <!-- Closed in FOOT -->

<div class="header">
<div class="header_block">
<div class="logo"><img alt="customer service support software logo" src="images/logo1.gif">
</div>
<h1>Support-Focus.com</h1>

<h2> providing the internets' best support service.</h2>
</div> <!-- END header_block -->
</div> <!-- END header -->

<div class="navbar" id="nav">
<ul>
<li><a href="index.php">Home</a></li>

<li><a href="works.php">How it works</a></li>
<li><a href="pricing.php">Pricing</a></li>
<li><a href="special.php">Special Offer</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="login.php">Login</a></li>

</ul>
</div><div class="container clearfix" style="background-color:white;">

<div class="left_column_wide" style="margin:20px 20px 20px 20px;">

<p>
<b>Articles</b>
<br><br>
<a href="Customer-Service-Software.php">Customer Service Software</a>
<br><br>
<a href="articles.php">Gain Customer Trust and Increase Sales</a>
<br><br>
<a href="Why-Get-An-Internet-Security-Seal.php">Why Get An Internet Security Seal</a>

<br><br>
<a href="The-Fantastic-Return-on-Investment-from-Trust-Seals.php">The Fantastic Return on Investment from Trust Seals</a>
<br><br>
<a href="Turn-Browsers-Into-Buyers-Increase-Your-Sales-Conversion.php">Turn Browsers Into Buyers, Increase Your Sales Conversion</a>
<br><br>
<a href="Selecting-The-Best-Trust-Seal-To-Boost-Your-Sales-Conversions.php">Selecting the Best Trust Seal to Boost Your Sales Conversions</a>
<br><br>
<a href="Give-Great-Customer-Service-And-Get-A-Trust-Seal-to-Prove-It.php">Give Great Customer Service And Get A Trust Seal to Prove It</a>

<br><br>
<a href="Customer-Service-Software-Solutions-For-Online-Business.php">Customer Service Software Solutions For Online Business</a>
<br><br>
<a href="73-Per-Cent-Of-Buyers-Abort-Their-Purchases-How-To-Change-It.php">73 Per Cent Of Buyers Abort Their Purchases, How To Change It</a>
<br><br>
<a href="Why-Are-Your-Visitors-Not-Buying-Your-Products.php">Why Are Your Visitors Not Buying Your Products</a>
<br><br>

</p>
</div>
<div class="center_column_nar" style="background-color:white; margin:0 0 0 240px; width:500px;">
<br>
<h2>Customer Service Software</h2>
<p>
<br>
</p>
<p style = "width:450px;">

<span style = "font-size:12px;">
Customer service software is often sold as part of an expensive enterprise-wide customer relationship
management solution. Now there is an economic alternative for the smaller company or individual business person.
<br><br>
While consumer service is a vital issue, it needs to be handled in different ways for different organizations.
One extremely effective method is to combine a customer support service with a web trust seal.
This is ideal for the online business who also wants to give proof of his trustworthiness.
<br><br>
The very fact that a business is operating an after-sales support program demonstrates that they take
consumer service seriously and deserve the trust seal.
<br><br>
By adding on to the trust seal, an automated support mechanism for the vendor and a publicly viewable
"outstanding issues" log for any poor performers and you have a system that practically guarantees
excellent customer support.
<br><br>
Customer support software can run into tens of thousands of dollars for license fees and implementation.
The trust seal approach is a monthly subscription service that can be started for around twenty dollars a
month.
<br><br>
This method of providing first class customer support also does away with any difficult technical
problems. As all the software programming for the service is on the service providers servers, all
that is required is the simple copy and pasting of some html code for the trust seal to be visible
and the service to be available.
<br><br>
The trust seal is usually placed on the home page and sales pages of the website and this makes it
easy for the customer to find and use the feedback forms.
<br><br>
Provided that all support issues are answered fairly and promptly, the vendor keeps his "Excellent"
support rating. Should he fail to do so, potential new customers will see that his status is less than
adequate.

<br><br>
This method of providing consumer care provides clear focus on building better and more sustainable
customer relationships for both small and medium sized businesses.
<br><br>
<a href="http://www.support-focus.com/index.php">Support-Focus.com</a> provides the software platform that allows internet businesses to provide first
class customer service and gain from the benefit of displaying a trust seal.
<br><br>
Support-Focus are presently offering a <a href="http://www.support-focus.com/special.php">30 Day Full-Access Free Trial</a>.<br>
Grab it now so that you can test out the system for yourself.
<br><br>

</p>
</div>


</div>
<div class="footer" style="text-align:left;">
<div class="navbar" id="nav_bot">
<center>
<ul>
<li><a href="terms.php">Terms of Use</a></li>
<li><a href="privacy.php">Privacy Policy</a></li>
<li><a href="earnings_disclaimer.php">Earnings Disclaimer</a></li>
<li><a href="articles.php">Articles</a></li>
</ul>

</center>
</div>
<div class="bottom"></div>
</div>

</div> <!-- END page_wrap clearfix (in a_head or mem_head) -->
</body>
</html>

SB65
Oct 16th, 2009, 09:39 AM
You have both .left_column_wide and .center_column_nar floated, but .center_column_nar also has a large left margin - set both in the css and as an inline style. It's the margin that's causing the float drop.

You can either:

1. Leave both elements floated and remove the left-margin on .center_column_nar, or
2. Remove the float and display:inline from .center_column_nar (and all the inline styling)

jeddi
Oct 16th, 2009, 08:48 PM
Thanks very much for your help.

I appreciate the time that you took :thumbsup:

The pages are all now fixed up :)