Table differences

I am working with someone elses table and code, but here goes.

There is a page at
http://www.scootervilleusa.com/scoot...ers.cfm?PID=48 that shows
all the colors available for the product.

If you go to the main product line (click on the word LP for example, use
the checkboxes and select 2 items, and at the bottom of the screen click
'compare') you'll see the colors available for each product.

Why are the color boxes aligned differently in the compare screen? They're
higher towards the top of the table where as they aren't on the normal
product page......

Why??

On Jul 24, 10:49*am, "Steve Grosz" <boise_bo... (AT) hotmail (DOT) com> wrote:

I am working with someone elses table and code, but here goes.

There is a page athttp://www.scootervilleusa.com/scooters/lp_scooters.cfm?PID=48that shows
all the colors available for the product.

If you go to the main product line (click on the word LP for example, use
the checkboxes and select 2 items, and at the bottom of the screen click
'compare') you'll see the colors available for each product.

Why are the color boxes aligned differently in the compare screen? *They're
higher towards the top of the table where as they aren't on the normal
product page......

Why??

looks like your CSS! On the page that works correctly I see that you
gave the table a id of "id="prodTable" and inside the "<td>" tag where
the colors are there is a "<div>" tag with the id of
"id="ColorTGB"... Now on the page where the colors are showing up
incorrectly the table has no id attribute nor does the "<div>" tag
inside the "<td>" where the colors are. If you just add those id
attributes to the compare page on the table and div tags it will show
up correctly. Below is the code ( i only put the respective parts of
the table on here )

<table width="80%" border="1" id="prodTable">

<td width="35%">
<div id="ColorTGB">

<img src="images/prod_colors/r1.gif">

<img src="images/prod_colors/c1.gif">

<img src="images/prod_colors/b0.gif">

<img src="images/prod_colors/ch2.gif">
<img src="images/prod_colors/s1.gif">
</div>
</td>
<td width="35%">
<div id="ColorTGB">

<img src="images/prod_colors/w1.gif">

<img src="images/prod_colors/r1.gif">

<img src="images/prod_colors/b1.gif">

<img src="images/prod_colors/o1.gif">

<img src="images/prod_colors/s1.gif">

<img src="images/prod_colors/b0.gif">


</div>
</td>


</table>

On Jul 24, 11:56*am, Mangler <webmas... (AT) repairresource (DOT) com> wrote:

On Jul 24, 10:49*am, "Steve Grosz" <boise_bo... (AT) hotmail (DOT) com> wrote:

I am working with someone elses table and code, but here goes.

There is a page athttp://www.scootervilleusa.com/scooters/lp_scooters.cfm?PID=48thatshows
all the colors available for the product.

If you go to the main product line (click on the word LP for example, use
the checkboxes and select 2 items, and at the bottom of the screen click
'compare') you'll see the colors available for each product.

Why are the color boxes aligned differently in the compare screen? *They're
higher towards the top of the table where as they aren't on the normal
product page......

Why??

looks like your CSS! *On the page that works correctly I see that you
gave the table a id of "id="prodTable" and inside the "<td>" tag where
the colors are there is a "<div>" tag *with the id of
"id="ColorTGB"... *Now on the page where the colors are showing up
incorrectly the table has no id attribute nor does the "<div>" tag
inside the "<td>" *where the colors are. *If you just add those id
attributes to the compare page on the table and div tags it will show
up correctly. *Below is the code ( i only put the respective parts of
the table on here )

table width="80%" border="1" id="prodTable"

* * * * <td width="35%"
* * * * * * * * <div id="ColorTGB"

* * * * * * * * * * * * <img src="images/prod_colors/r1.gif"

* * * * * * * * * * * * <img src="images/prod_colors/c1.gif"

* * * * * * * * * * * * <img src="images/prod_colors/b0.gif"

* * * * * * * * * * * * <img src="images/prod_colors/ch2.gif"
* * * * * * * * * * * * <img src="images/prod_colors/s1.gif"
* * * * * * * * </div
* * * * </td
* * * * <td width="35%"
* * * * * * * * <div id="ColorTGB"

* * * * * * * * * * * * <img src="images/prod_colors/w1.gif"

* * * * * * * * * * * * <img src="images/prod_colors/r1.gif"

* * * * * * * * * * * * <img src="images/prod_colors/b1.gif"

* * * * * * * * * * * * <img src="images/prod_colors/o1.gif"

* * * * * * * * * * * * <img src="images/prod_colors/s1.gif"

* * * * * * * * * * * * <img src="images/prod_colors/b0.gif"

* * * * * * * * </div
* * * * </td

* * * * </table

Forgot to mention that this is just why it wasnt working. If the
style for the table for the compare page needs to be different then
just create new CSS properties for the compare table.

Ok first of all:

You must consider this:

When you click on the first link you have given , it is not the same code that
when you go to the "compare link" . So, in one code the alignment is declared
in a different way and so works... In order to see it you can click on your
browser : Page > View Source Code on both links and compare how you
declared both codes, there are subtle differences that cause the "problem". Fix
it on the CFM (coldfusion files) accordign to your main HTML, and that's it...