Announcement

Collapse
No announcement yet.

2013 CSS overriding

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    2013 CSS overriding

    In V11
    http://www.baypressservices.com/acatalog/MegaBind.html

    In V2013 test site
    http://bay.edchosting.com/acatalog/MegaBind.html

    Hi guys.
    Having a problem that I cannot figure out..
    Building a work in progress site in V2013.
    The code in the fragment in between the !!< >!! is correctly displaying the table in the fragment.in the V11 site that is live.

    The code in the 2013 site seems to be overridden by the style sheet and is not displaying correctly.
    Anyway to correct this?

    The code for the table is:

    !!< <hr size="1" noshade><span class="sectiontitle"> <br>Specifications<br><br></span><table width="100%" border="0" align="center" cellpadding="1" cellspacing="3" bordercolor="#FFFFFF" id="davetable">
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Model:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0" class="navigation">MegaBind-1</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0" class="navigation">MegaBind-2</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0" class="navigation">MegaBind-1E</td>

    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Pitch:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">9/16&quot;</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">9/16&quot;</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">9/16&quot;</td>
    </tr>

    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Punch:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Manual</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Manual</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Electric</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Punching Length:</strong></td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">14&quot; (24 dies)</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">14&quot; (24 dies)</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">14&quot; (24 dies)</td>
    </tr>

    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Disengaging Dies:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">All 24 dies</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">All 24 dies</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">All 24 dies</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Hole Punch:</strong></td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Rectangular<br>
    (5/16&quot; x 1/8&quot </td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Rectangular<br>
    (5/16&quot; x 1/8&quot </td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Rectangular<br>
    (5/16&quot; x 1/8&quot </td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Comb Binding Capacity:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">From 3/16&quot; to 2&quot;</td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">From 3/16&quot; to 2&quot;</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">From 3/16&quot; to 2&quot;</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Punching Capacity:<br><font color="#FF0000">(NEW)</font></strong></td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Up to 25 sheets<br>
    (20 lbs)</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Up to 25 sheets<br>
    (20 lbs)</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Up to 20 sheets</td>
    </tr>

    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Side Margin Control:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Punching Margin Control:</strong></td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Continuous Binding
    Control: </strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Wire Closer:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">No</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Included<br>

    (up to 9/16&quot</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">No</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Construction:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Metal</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Metal</td>

    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">Metal</td>
    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Weight / Valume:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">31 lbs / 2.0 CbFt</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">31 lbs / 2.0 CbFt</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">40 lbs / 2.5 CbFt</td>

    </tr>
    <tr valign="top" bgcolor="#D0DCE0" class="generaltext">
    <td width="25%" align="left" valign="middle" bgcolor="#D0DCE0"><strong>Warranty:</strong></td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">1 year</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">1 year</td>
    <td width="25%" align="center" valign="middle" bgcolor="#D0DCE0">1 year</td>
    </tr>

    </table>
    >!!


    Thanks
    Dave
    www.baypressservices.com

    #2
    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.

    Comment


      #3
      Perfect
      Thanks Duncan

      Dave
      www.baypressservices.com

      Comment


        #4
        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
        Last edited by Matt F; 10-Jun-2014, 09:26 AM. Reason: Forgot to say hello at beginning!

        Comment


          #5
          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;
          }
          Cheers, Todd Edwardson
          sigpic
          Edwardson.com & SellerDeck US Sales & Service
          800-503-5717 | 609-773-0800
          todd@edwardson.com

          Comment


            #6
            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

            Comment


              #7
              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>
              Cheers, Todd Edwardson
              sigpic
              Edwardson.com & SellerDeck US Sales & Service
              800-503-5717 | 609-773-0800
              todd@edwardson.com

              Comment


                #8
                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&quot; port</strong></a> accepts 1.5&quot; and 2&quot; 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&quot; 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&quot; non marking for easier stair climbing</td>
                </tr><tr bordercolor="#999999"><td>Front wheels</td>
                <td>4&quot; 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&quot; or 2&quot; 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>&nbsp;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>&nbsp;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!

                Comment


                  #9
                  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;
                  }
                  Cheers, Todd Edwardson
                  sigpic
                  Edwardson.com & SellerDeck US Sales & Service
                  800-503-5717 | 609-773-0800
                  todd@edwardson.com

                  Comment


                    #10
                    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?

                    Comment


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

                      Comment


                        #12
                        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

                        Comment


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

                          Comment


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

                            Comment


                              #15
                              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;}
                              Peblaco

                              Comment

                              Working...
                              X