Zurb INK, пользовательский класс не работает

Я пытаюсь создать очень простую рассылку по электронной почте для еженедельных предложений по продуктам. Я использую Zurb INK. Проблема, с которой я сталкиваюсь, заключается в том, что свойства Border одного из пользовательских классов не реализуются. Ссылка на CodePen: http://codepen.io/anon/pen/bNQWzX.

В классе продукта на линии: 824. Я определил свойства

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

Но при использовании в разметке реализовано только свойство Border. А радиус и цвет игнорируются.

Разметка HTML находится на линии: 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>

Пожалуйста, ознакомьтесь с полной разметкой на Code Pen. Любая помощь будет высоко ценится. Заранее спасибо

Источник

2 ответа

Решение

Добавление к ответу от @ZephyrusDigital, который дал основную причину border-radius собственность не работает. border-color свойство было переопределено некоторым классом в главном CSS для INK. Но добавив !important чтобы это свойство заставило его работать. Цените свое время.

Источник

Я уверен, что это потому что td находится в table, его границы всегда будут квадратными. Я думаю, что вы можете достичь того, что вы хотите, используя div внутри td с этими стилями, но имейте в виду, что border-radius в любом случае поддерживается только несколькими клиентами.

примечание стороны: положить display:block; на любом из ваших изображений.

Источник
Другие вопросы по тегам