padding in order form table: how to?

[salty]

I finally *almost* finished my integration of WHMCS. One big thing remains, and that is the no cell padding on the order form.

 

I tried adding some room by both css and the old hard-code html method, but nothing is working.

 

my page:

support.inlethost.com/order.php

 

Can anyone offer any advice?

Thanks.

[skshost]

I see what you mean, it would look far better with padding.

Check out these styles: orderheadingrow, orderrow1, orderrow2.

 

BTW, I like what you've done with the Bookmark...Print icons in the bottom right.

[salty]

I tried the class's that you recommended, and cleared my cache every time. Also, to make sure that I wasn't missing anything, I over-exaggerated the padding. Cellspacing works, cellpadding doesn't. Still nothing.....

 

My CSS:

.orderheadingrow {background-color: #6495ED; color: #ffffff; padding: 30px; }

 

.orderrow1 {background-color: #E8F0F9; color: #000000; padding: 30px; }

 

.orderrow2 {background-color: #D6E4F6; color: #000000; padding: 30px; }

[skshost]

"old hard-code html method" isn't working?

 

Maybe you can post your step files and we'll have a look. Anyone who's done this could set in right about now.

[salty]

Alright, here's where I am. Padding works on Product Group, Product Select, & Submit, but not product. I tried adding individualized divs, but that only solved the radio cell blocks. I made different parts of the CSS-SS different amounts to try to isolate the issue. (I put them in one at a time, but for review sake, I added them all together.) The Product descriptions aren't budging.....

 

Thank you for all your help sks.

 

Step One:

<form method="post" action="{$smarty.server.PHP_SELF}?step=2">

 

<div align="center">

 

<table width="90%" cellspacing="1" cellpadding="10" class="tablepad-2x">

<tr class="orderheadingrow"><td colspan=2></td></tr>

{foreach key=num item=product from=$products}

<tr class="orderrow{if $num % 2}2{else}1{/if}">

<td width="20" align="center">

 

<div class="tablepad-5x"><input type="radio" name="pid" value="{$product.pid}"></div></td>

<td><div class="tablepad-5x">{$product.name} {if $product.qty!=""}({$product.qty} {$LANG.orderavailable}){/if} - {$product.description} </div></td></tr>

{/foreach}

<tr class="orderheadingrow"><td colspan=2></td></tr>

</table>

 

</div>

 

<p align="center"></p>

<p align="center"><input type="submit" value="{$LANG.ordercontinuebutton}" class="blueform"></p>

 

</form>

 

Custom Stylesheet CSS involved:

.blueform {font-family: Arial; font-size: 11px; color: #FFFFFF; font-weight: bold; border: 1px solid #E8E8E8; padding: 2px; background-color: #6495ED; }

 

.yellowform {font-family: Arial; font-size: 11px; color: #333; font-weight: bold; border: 2px solid #ccc; padding: 2px; background-color: #ffffbe; }

 

div#tablepad-5x {padding: 5px;}

.tablepad-2x {padding: 2px;}

 

WHMCS Stylesheet CSS:

/* Order Form Classic */

 

td#classicbox {width:550px; border: 1px solid #cccccc; background-color: #ffffff; color: #000000; text-align: center; }

 

td#classicorder {color: #000000; }

 

td#classiccustomfield {color: #cc0000; }

 

#classicaddonstable {width: 95%; background-color: #cccccc; border-collapse: seperate; padding: 30px;}

 

td#classicaddonstableheading {text-align:center; font-weight: bold; background-color: #efefef; color: #000000; padding: 30px; }

 

td#classicaddonstablerow {background-color: #ffffff; color: #000000; padding: 30px; }

 

/* Order Form Standard */

 

#standardaddonstable {width: 95%; background-color: #cccccc; border-collapse: seperate; }

 

td#standardaddonstableheading {text-align:center; font-weight: bold; background-color: #efefef; color: #000000; }

 

td#standardaddonstablerow {background-color: #ffffff; color: #000000; }

 

.orderheadingrow {background-color: #6495ED; color: #ffffff; padding: 30px; }

 

.orderrow1 {background-color: #E8F0F9; color: #000000; padding: 30px; }

 

.orderrow2 {background-color: #D6E4F6; color: #000000; padding: 30px; }

[madhippo]

hi

 

you have 3 css files attached to that order page. none of them have a class defined for tablepad-5x

 

add this into one of your css files and reload it. it will work after that...

 

.tablepad-5x {

padding: 5px;

 

}

[skshost]

hi

 

you have 3 css files attached to that order page. none of them have a class defined for tablepad-5x

 

add this into one of your css files and reload it. it will work after that...

 

.tablepad-5x {

padding: 5px;

 

}

 

Yeah, that should do it

[salty]

Thanks guys. I don't know how I missed that.

 

[skshost]

Thanks guys. I don't know how I missed that.

 

 

There's always something that seems so obvious once you figure it out.