Search code examples
htmlcsshtml-emailzurb-ink

Zurb INK , Custom Class not Working


I am trying to create a very basic Newsletter E-Mail for Weekly product Deals. I am using Zurb INK. The Issue I am facing is that, the Border Properties of one of the Custom Class is not being implemented. The CodePen Link is http://codepen.io/anon/pen/bNQWzX .

In the Product Class on Line : 824. I have defined the properties

.product {
      border-color: #0087bb;
      border: 3px solid;
      border-radius: 10px;
    }

But, when being used in the markup Only the Border property is implemented. And Radius and color is ignored.

The HTML Markup is on line : 932

<table class="six columns">
    <tr>
       <td class="center product">
         <img src="http://i.imgur.com/9xPFura.jpg" alt="Zedra Tap" width="250" height="250"/>
         <br/>
         Grohe Zedra Bath Tap - £20 OFF
         <br/>
         Was <strong>£99.99</strong> Now <strong class="nowprice">£79.99</strong>
         <br/>
                                                            <ul style="text-align:left">
                                                                <li>Contemporary Design</li>
                                                                <li>Availabe in Chrome Finish</li>
                                                                <li>Use for Kitchen</li>
                                                                <li><strong>Limited Stocks</strong></li>
                                                            </ul>
                                                            <a href="#" class="button">Buy Now</a>
                                                        </td>
                                                    </tr>
                                                </table>

Please do refer the complete markup on Code Pen. Any Help will be much appreciated. Thanks in Advance


Solution

  • Adding to the Answer from @ZephyrusDigital which gave the main reason for the border-radius property not working. The border-color property was being overridden by some class in the Main CSS for INK. But adding the !important to that property made it work. Appreciate your time.