Announcement

**Duncan Rounding** · 07-Jun-2014, 05:46 AM

Your table in the fragment is also part of the product list table td and the styles for that are being inherited.

.product-list td, .section-list td, .marketing-list td {
background-color: #FFFFFF;
border: 1px dotted #336699;
border-radius: 8px;
margin: 0;
padding: 10px;
vertical-align: top;
width: 30%;
}

Try creating a new class for your td which should override the product list td. It would also allow you to remove the inline styling from the code as you have it now.

**Daveb** · 09-Jun-2014, 06:00 PM

Perfect
Thanks Duncan

Dave

**Matt F** · 10-Jun-2014, 09:13 AM

Originally posted by Duncan Rounding View Post

Your table in the fragment is also part of the product list table td and the styles for that are being inherited.

.product-list td, .section-list td, .marketing-list td {
background-color: #FFFFFF;
border: 1px dotted #336699;
border-radius: 8px;
margin: 0;
padding: 10px;
vertical-align: top;
width: 30%;
}

Try creating a new class for your td which should override the product list td. It would also allow you to remove the inline styling from the code as you have it now.

Hi Everyone,

We upgraded recently to Sellerdeck and this is one of the problems we are having. We use tables all over the site which now look horrible! Can someone please help and explain/give an example of how I create a new class for my fragment tables, or point me in the direction of a tutorial?

This is how table should look:
http://www.cleansmartsupplies.co.uk/...lex_Turbo.html

This is how table looks on test site:
http://www.cleansmartsupplies.co.uk/...lex_Turbo.html

In the past we have always just cut and paste html code from dreamweaver inside !!< >!! and it has worked just fine until now! My knowledge of CSS is very limited so an example would be a big help.

Thank you
Matt

**tedwardson** · 10-Jun-2014, 01:11 PM

Hi Matt, we added: class="norb" to each table and our class defined in core styles is:
.norb td {
border:0 !important;
-webkit-border-radius:0px !important;
border-radius:0px !important;
background-color:transparent !important;
}

**Matt F** · 10-Jun-2014, 01:40 PM

Thank you for the reply Ted, can you please tell me specifically what I need to do please? I only just started learning about CSS since we began having these issues after the upgrade - we've never really needed to edit the style sheet before. I have managed to make quite a few changes to the CSS file so far, but I'm not sure what I need to do here. Thanks

**tedwardson** · 10-Jun-2014, 02:14 PM

Sure Matt, if you can get into the stylesheet editor, just add the following to the bottom of the stylesheet:
.norb td {
border:0 !important;
-webkit-border-radius:0px !important;
border-radius:0px !important;
background-color:transparent !important;
}

That creates a new class in the stylesheet to remove the rounded dotted borders.

Then wherever you want to restyle a table that doesn't look right, just add the following to the HTML table tag:
class="norb"

Typical tables are created in HTML as:
<table border="0" cellpadding="0"cellspacing="0">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

To make your table look like what you expect, add the class="norb" so it looks like this:
<table border="0" cellpadding="0"cellspacing="0" class="norb">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

If you already have a class="something" on your table tag, you can simply add " norb" after the 'something' class so it would look like

<table border="0" cellpadding="0"cellspacing="0" class="something norb">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

**Matt F** · 10-Jun-2014, 03:00 PM

Thanks Todd,

I did that:

<table width="100%" border="1" align="center" cellpadding="8" cellspacing="0" class="norb"><tr bordercolor="#999999"><td width="26%">Solution tank</td>
<td width="74%">55 litres</td>
</tr><tr bordercolor="#999999"><td>Recovery tank</td>
<td> Airflow friendly cylindrical design </td>
</tr><tr bordercolor="#999999"><td><p>Pump pressure</p></td>
<td><p><a href="http://www.cleansmartsupplies.co.uk/acatalog/Airflex_Pro_600.html"><strong>600psi</strong></a> 1/2 hp adjustable plunger pump</p></td>
</tr><tr bordercolor="#999999"><td>Vacuum system</td>
<td><a href="http://www.cleansmartsupplies.co.uk/acatalog/Bigairflow_System.html"><strong>Bigairflow</strong></a> system with big bore internal plumbing</td>
</tr><tr bordercolor="#999999"><td>Vacuum motors</td>
<td>3 x Genuine <a href="http://www.cleansmartsupplies.co.uk/acatalog/3_Genuine_Lamb_Ametek_Vac_Motors.html"><strong>Lamb Ametek</strong></a> 3-stage High Performance vac motors with airseal</td>
</tr><tr bordercolor="#999999"><td>Vac hose port</td>
<td><a href="http://www.cleansmartsupplies.co.uk/acatalog/13_Vacuum_Hose_Port.html"><strong>2" port</strong></a> accepts 1.5" and 2" vac hose</td>
</tr><tr bordercolor="#999999"><td>Exhaust</td>
<td><a href="http://www.cleansmartsupplies.co.uk/acatalog/7_Bigbore_exhuast_with_optional_silencer.html"><strong>4" big bore</strong></a> with optional easypack silencer</td>
</tr><tr bordercolor="#999999"><td>Easy load system</td>
<td><a href="http://www.cleansmartsupplies.co.uk/acatalog/2_Airflex_Easyload_System.html"><strong>No need to lift</strong></a> machine into van</td>
</tr><tr bordercolor="#999999"><td>Built-in <strong><a href="http://www.cleansmartsupplies.co.uk/acatalog/10_Built-in_power_prespray_system.html">power sprayer</a></strong></td>
<td>Yes. Adjustable spray lance optional</td>
</tr><tr bordercolor="#999999"><td><a href="http://www.cleansmartsupplies.co.uk/acatalog/11_Direct_feed_system.html"><strong>Direct feed</strong></a></td>
<td>Can connect to external tanks with no extra pump needed</td>
</tr><tr bordercolor="#999999"><td>Tank construction</td>
<td>Tough polyethelene</td>
</tr><tr bordercolor="#999999"><td>Control panel</td>
<td>Top mounted for convenience</td>
</tr><tr bordercolor="#999999"><td>Rear wheels</td>
<td>12" non marking for easier stair climbing</td>
</tr><tr bordercolor="#999999"><td>Front wheels</td>
<td>4" non marking with locking brake</td>
</tr><tr bordercolor="#999999"><td>Vacuum shut-off</td>
<td>Float safety switch</td>
</tr><tr bordercolor="#999999"><td><p>Power cable</p></td>
<td>25ft high visibility orange cable</td>
</tr><tr bordercolor="#999999"><td>Vacuum hose</td>
<td>1.5" or 2" truck mount quality crush resistant smooth bore</td>
</tr><tr bordercolor="#999999"><td>Solution hose</td>
<td>3000psi</td>
</tr><tr bordercolor="#999999"><td height="39">Wand</td>
<td>2-jet s-bend stainless steel</td>
</tr><tr bordercolor="#999999"><td>Dimensions (cm)</td>
<td> 45 (W) x 80 (L) x 105 (H)</td>
</tr><tr bordercolor="#999999"><td>Inline heater</td>
<td>Optional</td>
</tr><tr bordercolor="#999999"><td>Warranty</td>
<td> 5 years casing, 1 year parts</td>
</tr></table>

I copied the code to the style sheet:

.norb td {
border:0 !important;
-webkit-border-radius:0px !important;
border-radius:0px !important;
background-color:transparent !important;
}

- but now it looks like this:

http://www.cleansmartsupplies.co.uk/...lex_Turbo.html

I've lost the gridlines, but also something external seems to be controlling the width of each column - no matter how I adjust the columns in dreamweaver, they come out the width you see on the link?

The table is actually sitting inside another table by the way. The whole fragment comprises of a table with two columns - left for text, right for images. The visible table is sitting inside the left column.

Thanks again!

**tedwardson** · 11-Jun-2014, 01:46 PM

Hi Matt, the .norb td style I gave you above is removing the border completely. The class definition below should give you what you're looking for:

.norb td {
border:1px solid #999 !important;
-webkit-border-radius:0px !important;
border-radius:0px !important;
background-color:transparent !important;
width:inherit;
}

**Matt F** · 11-Jun-2014, 03:03 PM

Thanks Todd,

Now looks like this:

http://www.cleansmartsupplies.co.uk/...lex_Turbo.html

I want to remove the space between the cells. I have tried adding border-spacing: 0px; !important; like this:

.norb td {
border:1px solid #999 !important;
border-spacing: 0px; !important;
-webkit-border-radius:0px !important;
border-radius:0px !important;
background-color:transparent !important;
width:inherit;
}

- but I can't get rid of the space? Any ideas please?

**leehack** · 11-Jun-2014, 03:18 PM

border-spacing: 0px; < wrong? !important;

**Matt F** · 11-Jun-2014, 06:33 PM

Originally posted by leehack View Post

border-spacing: 0px; < wrong? !important;

Would you mind elaborating on that please Lee? I assume you're saying the code is wrong, do you know how I can achieve a table without the spaces between the cells?

Thank you

**leehack** · 12-Jun-2014, 09:05 AM

The semi colon in red should not be there, like you don't have on the other styles.

**Matt F** · 12-Jun-2014, 09:51 AM

Thank you, I have removed the semi-colon, but my tables still look awful...

**peblaco** · 13-Jun-2014, 12:21 AM

SellerDeck 2013 adds default table and td CSS styles however this applies to tables you add yourself. You can add a class to the table then add custom CSS, for example:
table.name {border-spacing: 0px;margin: 0px;padding: 0;}
table.name td {width: 30%;border: 1px solid #999;padding: 10px;margin: 0;vertical-align: top;}

Announcement

2013 CSS overriding

2013 CSS overriding

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment