any ideas on this little puzzle?

[james@dd]

Hello all

I am creating a site using V7 and on certain sections I would like the products to be laid out in a table format but I seemed to have run into a strange little problem and hope someone here might be able to shed some light.

Here is an example page which all seems to work fine, but for some reason some of the columns put extra padding or width or spacing in. The tables/templates are all exactly the same apart from colour, which is added using the CSS file, the padding is the same etc etc

I wondered if Actinic added some extra spacing around its descriptions, references, names etc that I might be able to get rid of, any ideas?

The tables are set up so the product name is the first colum, description is the second column, ref and price are self explanitory. Maybe this is the wrong way to go about it? is Setting up custom vars the way to go and might I encounter the same problem with spacing?

Well, thanks for reading and I look forward to all your comments and ideas. If any more info would help clarify things just let me know.

Yours confusingly
James

[jxm28788]

wow, that is odd. I'm looking at the black row followed by the blue row and the source code and css look identical...

Have you checked the widths? (ie. where you've specified the column widths do they total up more than the width of the surrounding table?)

When I get a table problem I always find it useful to switch the borders on, it sometimes highlights problems you wouldn't otherwise see so that's worth a try.

You might also want to post your template code.

[jont]

May be me but I can't see any <td> widths declared either in the HTML or the CSS ... declaring them specifically should help prevent the alignment issues

[jont]

wow, that is odd. I'm looking at the black row followed by the blue row and the source code and css look identical.

... there are different CSS classes being used for each colour .. blackBox, blueBox etc

[jxm28788]

... there are different CSS classes being used for each colour .. blackBox, blueBox etc

Sorry, I meant the classes looked identical - except for the name and colour which should have no impact on the widths.

Have you checked the widths?

I'm pretty sure this is your problem - it's something to do with the column widths your specifying. If I reduce the column widths for all the columns significantly all the columns now line up...

[jont]

there are 12 copies of the actinic.css attached to that page which can't be helping matters ... you may have left these in when editing product layouts etc as a visual guide

[jxm28788]

you have a table with a width of 715, but the columns seem to add up to a width of 745...

[james@dd]

It's very strange.

For the first product I have made a template with the heading bar (price, size etc) in and then the subsequent ones are without the header.

The black bar code is:

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<link href="actinic.css" rel="stylesheet" type="text/css">
NETQUOTEVAR:ENDSEPARATORNETQUOTEVAR:PRODUCTFORMBEGIN 
<table width="715" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="80" align="left" class="blackBox1"><a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="supplytableprodtitle">NETQUOTEVAR:PRODUCTNAME</span></a></td>
    <td width="120" align="left" class="blackBox1"><span class="supplytableprodtitle">NETQUOTEVAR:PRODUCTDESCRIPTION</span></td>
    <td width="140" align="left" class="blackBox1"><a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="supplytableref">NETQUOTEVAR:PRODUCTREF</span></a></td>
    <td width="265" align="left" class="blackBox1"><span class="supplytableprice">NETQUOTEVAR:PRODUCTPRICE</span></td>
    <td width="110" align="left">NETQUOTEVAR:VARIANTADDTOCARTBUTTON</td>
  </tr>
</table>
NETQUOTEVAR:PRODUCTFORMEND NETQUOTEVAR:NEXT 
<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->

then the blue bar code is:

<!-- ProductLine HTML begin -->
<!-- Insert HTML for the top of the individual product -->
<link href="actinic.css" rel="stylesheet" type="text/css">
NETQUOTEVAR:ENDSEPARATORNETQUOTEVAR:PRODUCTFORMBEGIN 
<table width="715" height="30" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="80" align="left" class="blueBoxBG1"><a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="supplytableprodtitle">NETQUOTEVAR:PRODUCTNAME</span></a></td>
    <td width="120" align="left" class="blueBoxBG1"><span class="supplytableprodtitle">NETQUOTEVAR:PRODUCTDESCRIPTION</span></td>
    <td width="140" align="left" class="blueBoxBG1"><a name="NETQUOTEVAR:PRODUCTANCHOR"><span class="supplytableref">NETQUOTEVAR:PRODUCTREF</span></a></td>
    <td width="265" align="left" class="blueBoxBG1"><span class="supplytableprice">NETQUOTEVAR:PRODUCTPRICE</span></td>
    <td width="110" align="left">NETQUOTEVAR:VARIANTADDTOCARTBUTTON</td>
  </tr>
</table>
NETQUOTEVAR:PRODUCTFORMEND NETQUOTEVAR:NEXT 
<!-- Insert HTML for the bottom of the individual product -->
<!-- ProductLine HTML end -->

Both exactly the same except for the CSS colour change which is:

.blueBoxBG1 {
	background-color: #D0CCFF;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
.blackBox1 {
	background-color: #CCCCCC;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	padding-left: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}

Again both these are exactly the same, unless colours add spacing :S

I always work with the table borders visual aid I did notice that the widths didnt total correctly but I have now amended that and am still getting the same problem.

Any other help or thoughts?

Thanks
James

[james@dd]

Howdy

John when you say reduce the column widths "significantly" how much is that?
I can reduce them a little, but on some pages the charts cant go any smaller due to massive amounts of data and I would prefer to keep them consistent throughout the site.

I have got rid of the CSS links on each template now too, and I have also changed the column widths to equal the table size :S (gotta love simple maths, DOH!) but still have the same thing.

Thanks for all the help guys
James

[jxm28788]

John when you say reduce the column widths "significantly" how much is that?

Well I reduced them all to 90 and they all lined up, but were obviously squashed up.

I have also changed the column widths to equal the table size

I usually make it a couple of pixel less rather than equal.

I would recomend reducing the column widths a lot, and if that fixes it then widen them out until you seen the problem again. If you reduce them a lot and that doesn't fix it then it saves a lot of time reducing them bit by bit...

or of course you could make the surrounding table wider... The first thing is to identify if this is the problem (reduce them a lot) then you can faff about getting the perfect wdith for the table and each column...

[james@dd]

Cheers John

I'll let you know how I get on!

Thanks to all for the help.
James