# Solved: Table text center alignment



## smartbusiness (Jun 17, 2008)

Hi,

I desparately need some assistance with text and button alignment in tables in my webpage. I have spent the last 24 hours looking for answers on a number of forums including yours and through Google and have tried every possibillity that has been suggested including additions to the template css files to no avail, nothing has worked. 

The images are fine, they seem to be okay, it is the table that contains the Title, Price, Purchase button under each image that is the problem. I am using this same editor and Joomla extension on another one of my websites and have had no problems with it. 


You are my last resort, I have attached the source files of the section that is giving me the problem in the hope that you can steer me in the right direction. My site is offline at the moment, but I can put it online for a short time if necessary. 

I would sincerely appreciate any help you can give me with this problem

Kindest Regards


----------



## Hughv (Jul 22, 2006)

I guess you're talking about Floral Burgundy and Monkey Business, which have too many letters to fit in the available space. You could just change the name.
Ask a mod to move this to the web design forum where you'll get answers from smarter people.
You should change this attachment to an htm or txt document, as docx can't be read by many people, and it has to be opened in an html editor/viewer anyway.


----------



## smartbusiness (Jun 17, 2008)

Thank You hughv

I wasn't certain where to post this and the list of doc'x for attachments did include docx. I will ask this to be moved. The titles were not the problem but the prices and buttons under the titles. However, I thank you for responding and I will try elsewhere

Kindest Regards


----------



## Hughv (Jul 22, 2006)

Well, this page looks fine in IE, but the two I mentioned are mis-aligned in FF, and that's because of the text. Maybe you're referring to some other problem?

Use the 'report' button to get a mod's attention.


----------



## smartbusiness (Jun 17, 2008)

Thank You Hughv 

The text is okay but the misalignment the 3 lines which include the text, the price and the 'Buy Now' button. I am trying to have them 'center aligned' under the image. I will use the 'report' button to get the mod's attention as you suggest. Once again many thanks.
Regards Marion


----------



## Hughv (Jul 22, 2006)

They're all center aligned when I look at them.
Do you mean the last 3 items starting with "WOW"?


----------



## smartbusiness (Jun 17, 2008)

Hi again Hugh,

Currently my site is offline but I will change that within the next few minutes so that you can see what I am getting at. YOu will see under each template image there are the three lines 'The name of the Template' 'the price of the template' and the 'Pay Now' button. The website is http://www.websitesbydesign.net

I appreciate the help you are giving me.


----------



## smartbusiness (Jun 17, 2008)

Sorry Hughv forgot to provide the article extension

http://www.websitesbydesign.net/Templates/joomla-templates.html


----------



## Hughv (Jul 22, 2006)

Interesting. The code snippet you provided doesn't do that. It aligns perfectly, so the problem lies elsewhere. I'll check it in a second, but I'm attaching a screen capture.


----------



## smartbusiness (Jun 17, 2008)

Thanks Hughv, looks great there, that's strange?????


----------



## Hughv (Jul 22, 2006)

My guess is you have a css (style) problem, but I'm not up to wading through all that HTML.
Get this moved and the pros can probably tell you what's going on.


----------



## smartbusiness (Jun 17, 2008)

Many Thanks Hughv your help is much appreciated
All the best


----------



## tomdkat (May 6, 2006)

Ok, you have an absolute nested table mess going on here. You need to scrap ALL of those nested tables (what you posted in your file above) and make a simple 4x3 HTML table.

Here is a starting point for you:

```
<table cellspacing="1" cellpadding="1" width="200" border="1">
<tr>
[b][color=red]	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>[/color][/b]
	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>
	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>
	<td align="center">
		<a target="_blank" href="http://www.websitesbydesign.net/images/stories/template_large/beach_huts.png" rel="lightbox[Beach Huts]" title=""><img class="multithumb"   src="templates_files/b_150_16.png"  width="120" height="160" style="border: 2px solid #000000;"  alt="Beach Huts" title="" /></a>
		<br/>
		<form name="purchasebuttonform_10" action="http://www.websitesbydesign.net/" method="post">
			<p>Beach Huts
			<br/>
			<strong>Price: <span style="color: rgb(255, 0, 0);"><span id="ACprice_10">$35.00</span></span></strong></p>
			<input type="image" src="templates_files/square_b.gif" name="image_10" />
			<input type="hidden" name="task" value="purchase" />
		</form>
	</td>
</tr>
</table>
```
Note each cell has EVERYTHING for that template in it. The above will define one row. To make the other three rows, copy that ENTIRE ROW and replicate it as necessary.

Once the cells are modified with the individual template info and all looks well, you can turn off the table border.

Good luck!

EDIT: Be sure to add in the hidden form fields I left out of my example above. 

Peace...


----------



## smartbusiness (Jun 17, 2008)

Hi Tomkat,

Sorry for the delay in responding to your post.

I like the neat layout your code provides however, the whole formatting is still giving me grief.

I know very little about coding as you can see, therefore I rely on extensions for the CMS I use to give me the results I am looking for.

The title, price and 'Pay Now' button is an extension that goes directly to Paypal and so I only put the generated link in to make it all work for me. But as you can see there is something not right somewhere when I replace your title and price and the 'submit query' with the generated link, it throws the entire thing out of alignment, well my end it does. I use this extension in another of my websites and it aligns correctly but here is all over the place.

I will leave the website online so that you are better able to see what I mean. Go to the Test Page tab in the top menu, on the right and you will then be able to see three out of the four tables with images and 'paynow' buttons and how displaced they are.

I have over 200 images and downloads to put into several websites and so I really need to find a solution.

http://www.websitesbydesign.net

Many thanks for the help


----------



## Hughv (Jul 22, 2006)

Give us the link to the other site where it works.


----------



## smartbusiness (Jun 17, 2008)

Hi Hughv

http://www.craftimpressions.com

Any of the links in the top menu should take you to a page setup with the 'Pay Now' buttons.

I haven't changed over to the new tables but if I can get them to work then I will change this website as well


----------



## tomdkat (May 6, 2006)

smartbusiness said:


> I know very little about coding as you can see, therefore I rely on extensions for the CMS I use to give me the results I am looking for.


Gotcha. Right now, your site is down so I can't access anything. Can you put it back up so we can take another look and see if there's anything that can be done? That CMS extension doesn't do a good job of generating HTML but we'll see if we can work around it. 

Peace...


----------



## smartbusiness (Jun 17, 2008)

Hi TomdKat

I have put my website back online again.

Thank You for your patience

Regards


----------



## tomdkat (May 6, 2006)

smartbusiness said:


> The title, price and 'Pay Now' button is an extension that goes directly to Paypal and so I only put the generated link in to make it all work for me.


I'm seeing some duplicate links and some duplicate forms on the page now.

So, let's try another approach.  What is the exact name of the "Pay Now" button extension you're using? I see you're using Joomla as your CMS. Are you using a custom Joomla template/theme or are you using one you downloaded?

Peace...


----------



## smartbusiness (Jun 17, 2008)

The 'Pay Now' extension is 'AC File Payments' by www.angelcoding.com

The Template is one I produced using Artisteer 2 by http://www.artisteer.com/ it is a Joomla and Wordpress theme generator

I hope that helps


----------



## tomdkat (May 6, 2006)

Thanks. Which version of AC File Payments are you using? 

One thing I notice on the site that has no issue is there are only three items or less per row. On the site with issues, you've got 4 items in a row. This shouldn't make a difference but since you're using a "black box" (i.e. Joomla) to generate this, every clue we have helps. 

So, how do things lay out if you have only two items in a row on the test page you made? Also, you say the "AC File Payments" extension generates the title, price, and PayPal pay button and link. The thumbnail isn't generated as part of that so what do you enter before invoking the extension to generate the rest?

Peace...


----------



## smartbusiness (Jun 17, 2008)

The images are generated with Multithumbs 
http://www.kreacom.dk/mambots/multithumb-for-joomla-15.html

The reason for this is because it actually produces the thumbnails from the original images and so save the messing around of having to resize every image. The reason for the tables was because the two extensions would not line up, similar to the problem I am having at the moment.

I have reduced the Test page layout to three images across and you can see the result.


----------



## smartbusiness (Jun 17, 2008)

*Sorry The AC File Payment 
*

*Version 1.0.1 (beta)*


----------



## tomdkat (May 6, 2006)

Wow, ok, this is just nuts. 

Ok, can you remove BOTH the thumbnail AND the payment info, so the table is empty? This way I can see how that is being generated.

Peace...


----------



## smartbusiness (Jun 17, 2008)

I guess just a test of your patience 

I have taken them out as you requested


----------



## tomdkat (May 6, 2006)

Excellent! Ok, now that there are NO icons or other stuff in that area, I can see some remnants of the form.

Here is code;

```
<table cellspacing="1" cellpadding="1" border="1" style="width: 758px; height: 360px;">
    <tbody>
        <tr>
            *
            <td align="center">&nbsp;<br />
            [b][color=red]<form method="post" action="http://www.websitesbydesign.net/" name="purchasebuttonform_10">
                <p>&nbsp;</p>
            </form>[/color][/b]
            </td>
            *
            <td align="center">&nbsp;<br />
            [b][color=red]<form method="post" action="http://www.websitesbydesign.net/" name="purchasebuttonform_10">
                <p><strong><span style="color: rgb(255, 0, 0);"><span id="ACprice_10"><br />
                </span></span></strong></p>
            </form>[/color][/b]
            </td>
            <td align="center">&nbsp;<br />
            [b][color=red]<form method="post" action="http://www.websitesbydesign.net/" name="purchasebuttonform_10">
                <p>&nbsp;</p>
            </form>[/color][/b]
            </td>
            <td align="center">&nbsp;</td>
        </tr>
    </tbody>
</table>
```
The lines in red above need to somehow be removed. Please do that and republish the page and let me know when it's been updated.

Peace...


----------



## smartbusiness (Jun 17, 2008)

Done as requested!


----------



## tomdkat (May 6, 2006)

Excellent! Ok, now add the image thumbnail ONLY! If possible, please do just one.

Thanks!

Peace...


----------



## smartbusiness (Jun 17, 2008)

Done as requested


----------



## tomdkat (May 6, 2006)

Ok, that looks clean. Can you add the payment info to THAT thumbnail?

Thanks!

Peace...


----------



## smartbusiness (Jun 17, 2008)

Done once more


----------



## tomdkat (May 6, 2006)

Great! Ok, I've got some questions for you.

How do you add the payment info? Do you click somewhere and tell "AC File Payments" where to insert the code? Or does "AC File Payments" add its code where it wants?

I'm looking at this page:

http://www.craftimpressions.com/craftpatternsplus/Needlecraft/cross-stitch.html

and noticed the thumbnails are in a SEPARATE table row from the payment info (which is also spread out across individual rows), like this:

```
<table>
<tr>
<td>Thumbnail #1</td>
<td>Thumbnail #2</td>
<td>Thumbnail #3</td>
</tr>
<tr>
<td>Payment Row #1, col #1</td>
<td>Payment Row #1, col #2</td>
<td>Payment Row #1, col #3</td>
</tr>
<tr>
<td>Payment Row #2, col #1</td>
<td>Payment Row #2, col #2</td>
<td>Payment Row #2, col #3</td>
</tr>
</table>
```
What you just did resulted in the payment info appearing next to the thumbnail, which might be dealt with by putting some HTML line breaks (
) in after the image.

Lastly, on the page Cross stitch page, I noticed the table cells ([TD]) have the text centered by a "text-align: center" CSS style that is applied to them, like this:

```
<td [b][color=red]style="text-align: center;"[/color][/b]>
```
So, what do you do when you add the payment info?

Peace...


----------



## smartbusiness (Jun 17, 2008)

There is a button AC File Payment Link at the bottom of the editor that places the plugin code eg. {acfp =id 10} in this case - > from the AC file Payment component file -> I have placed a snapshot into the test page so you can see it

The Craft Pattern Files have a separate cell under the cell with the image, set at center alignment (most of the time) where I have placed the link so everything lines up neatly.


----------



## tomdkat (May 6, 2006)

smartbusiness said:


> There is a button AC File Payment Link at the bottom of the editor that places the plugin code eg. {acfp =id 10} in this case - > from the AC file Payment component file -> I have placed a snapshot into the test page so you can see it


Ok, so you click where you want the code to go (roughly) and then click the "AC File Payment Link" button and it does the rest, right?

If so, place the thumbnail where you want it, press enter a couple of times (or otherwise insert a couple of line breaks) and then press the "AC File Payment Link" button. Or...



> The Craft Pattern Files have a separate cell under the cell with the image, set at center alignment (most of the time) where I have placed the link so everything lines up neatly.


if this is something you did on this page, could you do this for the Joomla template site too?

Peace...


----------



## smartbusiness (Jun 17, 2008)

Okay, I have done that, unfortunately it looks like I am back to square one with the alignment thing as although I have centered the plugin it is still to the left. 

I followed the exact same procedure for the plugin in the craft website as I have for this one, that is why this is so confusing.


----------



## tomdkat (May 6, 2006)

Well, from the steps we went through above, neither the thumbnail plugin OR the AC File Payment plugin are generating table rows to put the content in so that must have been something you did on the craft website.

So, I would nuke the thumbnail and the payment info and make a table with two rows and four columns. Then, I would put the thumbnail in the first cell in the first row and the payment link in the first cell of the second row. Since you were able to clean up the table previously, I presume you make the table for the thumbnail and payment links, in the first place.

The table should look like this:

```
<table>
<tr>
<td align="center">Thumbnail</td>
<td align="center">Thumbnail</td>
<td align="center">Thumbnail</td>
<td align="center">Thumbnail</td>
</tr>
<tr>
<td align="center">payment link #1</td>
<td align="center">payment link #2</td>
<td align="center">payment link #3</td>
<td align="center">payment link #4</td>
</tr>
</table>
```
Unfortuantely, we're stuck with the way the plugins generate their code so doing something like this should help, since you're not comfortable entering the HTML manually.

Give that a shot and let us know how it goes.

Peace...


----------



## smartbusiness (Jun 17, 2008)

This is what the table code before the images and payment link placement




        



This is what it looks like after inclusion of the images and payment




















   {acfp id=10} {acfp id=11}  



It is not that I don't want to be able to enter HTML manually, it is a matter of time and the quantity that needs to be entered, it is also the need to train someone else in the admin side that is the problem, and of course my inexperience in coding doesn't help.

Would it possibly be the editor itself that is causing the problem? or is there something I can add in the Template CSS to overcome this problem?


----------



## tomdkat (May 6, 2006)

That code actually looks good. Is it up now?

I understand about wanting the tools to do the work for whomever must crank this out, so please don't think I was calling you "lazy" or anything. 

Peace...


----------



## tomdkat (May 6, 2006)

I also noticed the cross stitch site has these attributes in the payment table:

```
<tr>
            <td style="text-align: center;">&nbsp;<form name="purchasebuttonform_33" action="http://www.craftimpressions.com/craftpatternsplus/" method="post"><table [b]border="0" [color=red]align="left" style="width: 163px; height: 76px;[/color][/b]">
    <tbody>
```
The payment table in the Joomla site doesn't have those attributes and only has the border turned off. Does the AC File Payment plugin have any configurable parameters? If not, how did those table attributes get in the cross stitch version? Did you manually put them in?

Peace...


----------



## smartbusiness (Jun 17, 2008)

Yes they have limited configurable parameters and yes the test page is up and yes! I shall have another look at the craft site again to make certain that they are configured the same.

And I didn't take offence at the comment , I have a business to run, well several and one of them is as a business adviser and management coach, so I also believe in practicing what I preach....well nearly always


----------



## smartbusiness (Jun 17, 2008)

Hi again, TomdKat

Well, I have checked the AC File Payment extension and everything between the two websites are identical in relation to the configuration. So I set up a completely new page on the Craft website exactly the way I did Joomla website and it is perfect. You can check it out in the 'Special Offers' menu on the left, it is the 'Test Page'


----------



## smartbusiness (Jun 17, 2008)

Hi TomdKat

I managed to get in touch with Steve at Angelcoding.com and told him about my problem and he checked both websites for me to try and find a solution. You were definately on the right track about the table code differences.

I have added his solution to this post for your information and anyone else who may run into a similar problem, it is as follows:

There is a difference between the two tables that are holding the ACFP content in the two different sites.
The one that works is using a width style element in the 

tag -



The one that doesnt work is using just


. 











By specifying the width element style it allows for centering, but this isnt really the way you should do it as you would need to specify the exact width for every table  major pain.
Instead use.... margin:0px _auto_; 
You could change the table tag to the following - 


Or place the margin style in a css file somewhere.




All the best


I did the first of his suggestions and it fixed the problem immediately.

I also want to thank you and Hughv but particularly you for your patience and understanding, it would have been much easier for you to have simply brushed me aside. If it wasn't for people like you and your colleagues at the Tech Guys forum, people like me would never survive in this world of technology.

With greatest respect and sincere thanks
Marion


----------



## tomdkat (May 6, 2006)

smartbusiness said:


> I managed to get in touch with Steve at Angelcoding.com and told him about my problem and he checked both websites for me to try and find a solution. You were definately on the right track about the table code differences.
> 
> I have added his solution to this post for your information and anyone else who may run into a similar problem, it is as follows:
> 
> ...










Great! Thanks for the update! Now, the $0.64 question:
*WHERE*
do you specify the margin for the table? Since that is part of the code generated by the AC File Payment plugin, I would imagine you would have to specify that style info through the AC File Payment plugin somehow. So, how and where did you specify the margin for the table?

My next step was to have you create a CSS style to select those nested tables but given the info above, it's clearly not necessary.

Glad it's working for you now.

So, the other question I have is: if you were going through the same process for BOTH sites, how did the craft site get the height and width attributes but the other site didn't?

Peace...


----------



## Hughv (Jul 22, 2006)

That's what I was talking about when I said you has a Style/Css problem.
I assume this style element is in a css file that we don't have access to?
That would be the place to make this change rather than modify each 

element.
I also noticed how the one that works uses a style for [TD],[TD] while the other one just uses [TD]
Maybe the template guys used two different versions?


----------



## tomdkat (May 6, 2006)

Hughv said:


> I also noticed how the one that works uses a style for [TD],[TD] while the other one just uses [TD]
> Maybe the template guys used two different versions?


On the craft site, the table that centers actually has "align=left" specified, along with the hard coded height and width CSS attributes. Since the payment table is generated by the "AC File Payment" plugin, there has to be a place where you can specify the table attributes it uses unless two different versions of that extension were used.

Peace...


----------



## tomdkat (May 6, 2006)

smartbusiness said:


> Well, I have checked the AC File Payment extension and everything between the two websites are identical in relation to the configuration. So I set up a completely new page on the Craft website exactly the way I did Joomla website and it is perfect. You can check it out in the 'Special Offers' menu on the left, it is the 'Test Page'


I'm glad you did this. I just looked at this test page and the payment info is left-justified when I view it, not centered.

So at least we now have some consistency.  Of course, it's now irrelevant but at least it's good to know the plugin is behaving consistently. 

Peace...


----------



## smartbusiness (Jun 17, 2008)

Hi TomdKat

The code went in by going to the ACFP Payment button, to the source button to convert it to html and then adding the 

at the top. Save and instant fix.

Going to the craft site ACFP exstension and viewing the source code I noticed that it already had the following piece of code in it..... margin:0px auto; (was Steve's other suggestion) and obviously that is why it worked (I never thought to look in the html of the ACFP extension). It appears to me that in the new ACFP download this piece of code was an oversight, however, I did ask Steve, and world times as you aware of, means I won't get an answer to that until tomorrow my time (Australia)

Once again, many thanks TomdKat and I guess we can now consider this issue closed


----------



## tomdkat (May 6, 2006)

smartbusiness said:


> The code went in by going to the ACFP Payment button, to the source button to convert it to html and then adding the
> 
> at the top. Save and instant fix.
> 
> Going to the craft site ACFP exstension and viewing the source code I noticed that it already had the following piece of code in it..... margin:0px auto; (was Steve's other suggestion) and obviously that is why it worked (I never thought to look in the html of the ACFP extension). It appears to me that in the new ACFP download this piece of code was an oversight, however, I did ask Steve, and world times as you aware of, means I won't get an answer to that until tomorrow my time (Australia)




Gotcha. That makes sense. I didn't know the ACFP extension had editable HTML source so that's good to know and the perfect place to make this kind of adjustment. You could even remove the inline attributes specified in the ACFP HTML source and assign the table a class. Then, you can use your stylesheet to more easily style the table while letting the extension do its work.

However, you have a solution that works so I can see you sticking with it. 



> Once again, many thanks TomdKat and I guess we can now consider this issue closed



Cool, be sure to use the "Solved" (or "Mark solved") button on the first post of this thread to make this issue solved. 

Peace...


----------



## smartbusiness (Jun 17, 2008)

Yes, I am considering doing it at a later date if I can figure out how to do this. however, for the moment it works and I can get my website back online for the time being. 

Have fun, life is too short not to.


----------



## smartbusiness (Jun 17, 2008)

Hi TomdKat
A quick update from Steve of ACFP as to why this discreptency between the two sites occurred using this extension and as promised I am passing it on for your information.

It's likely the editor you're using in Joomla added the extra information automatically and it was saved. Either it did this of its own accord (which sometimes happens) or you might of slightly adjusted the table handles - possibly by mistake.
This type of automatic coding by the editor can either be a pain or a blessing, so keep an eye out.

*Above all have fun! *


----------



## tomdkat (May 6, 2006)

Thanks for the update. I haven't used Joomla before so this is good info to have. 

Peace...


----------



## smartbusiness (Jun 17, 2008)

My Pleasure Tomdkat, If you need or want any Joomla info anytime please don't hesitate to ask. I don't understand much coding but I do know Joomla pretty well.

Until next time, keep well


----------

