I'm using some column property to list some items in three columns. but there is a problem on safari only :
when I use border-radius property on it, the text inside columns 2 and 3 disapear.
here a codepen link : http://codepen.io/arokh/pen/zGyyKx
#content-main {
margin: 0 auto;
width: 960px;
border-left: 0px solid #ddd;
border-right: 0px solid #ddd;
background: white;
padding: 25px 0 50px;
position: relative;
}
#equipements {
-webkit-column-width: 320px;
-webkit-column-rule: 1px dotted #ccc;
-webkit-column-count: 3;
-webkit-column-gap: 0;
-moz-column-width: 320px;
-moz-column-rule: 1px dotted #ccc;
-moz-column-count: 3;
-moz-column-gap: 0;
column-width: 320px;
column-rule: 1px dotted #ccc;
column-count: 3;
column-gap: 0;
padding: 25px 0px;
margin: 0 ;
background: rgb(255,255,255);
min-height: 0px;
}
#equipements ul.equipements {
width: 232px;
display: block;
padding: 10px;
border-radius: 0;
background:url(../img/remorques/pictos/ok.png) no-repeat 18px 10px transparent;
padding-left: 70px;
padding-right: 18px;
min-height: 70px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
#equipements ul.equipements li {
display: inline-block;
margin: 0;
padding: 0;
font-size:13px;
line-height: 20px;
min-height: 20px;
cursor: pointer;
padding-left: 12px;
margin-left: 6px;
margin-bottom: 2px;
border-radius: 5px;
color: #122c73;
transition: all 0.5s;
}
#equipements ul.equipements li div.titre {
color: #122c73;
}
#equipements ul.equipements li:hover {
background: #5671b6;
color: #fff;
}
#equipements ul.equipements li:hover div.titre {
color: #fff;
}
#equipements ul.equipements li.select {
background: #122c73;
color: #fff;
}
#equipements ul.equipements li.select div.titre {
color: #fff;
}
.hidden {
display: none;
visibility: hidden;
}
#content-main ul li {
display: inline-block;
text-align: left;
width: 212px;
margin-right: 15px;
padding-bottom: 5px;
overflow: hidden;
position: relative;
font-size: 16px;
line-height: 22px;
}<div id="content-main">
<div id="equipements" class="Std">
<ul id="categorie_equipement_id2" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-longueuretptac.png)">
<li meta-id="6" class="ite-0">
<div class="titre">PTAC variables</div>
<div class="hidden sousTitre">de 750 à 3000 kg</div>
<div class="hidden description"><p>Nos remorques supportent, selon leur longueur d'étal, un Poids Total roulant Autorisé en Charge allant de 750 à 3000 kg.</p>
</div>
<div class="hidden urlPhoto">6/photo-equi-ptac.jpg</div>
</li>
<li meta-id="109" class="ite-1 select">
<div class="titre">Un étal de 2 m à 10 m</div>
<div class="hidden sousTitre">+ 2 m de tables latérales</div>
<div class="hidden description"><p>Nos remorques peuvent mesurer de 2 m à 10 m de long (longueur d'étal. Ajouter 2 m de vente en comptant les tables latérales à l’ouverture).<br>
Plusieurs PTAC (poids total autorisé en charge) vous sont proposés.<br>
Pour en savoir plus, visitez la section « La gamme Pro-étal ».</p>
<p><a href="#gamme">Notre gamme mag.</a></p>
</div>
<div class="hidden urlPhoto">109/photo-equi-etal-poissonnier.jpg</div>
</li>
</ul>
<ul id="categorie_equipement_id3" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-equipementglobal.png)">
<li meta-id="7" class="ite-2">
<div class="titre">Châssis galvanisé</div>
<div class="hidden sousTitre">Garantie 6 ans anticorrosion et structure</div>
<div class="hidden description">
<p>La galvanisation à chaud est reconnue comme la meilleure protection de l'acier contre la corrosion.</p>
<p>Les structures de nos châssis varient selon le PTAC demandé. Ils sont étudiés au cas par cas selon le schéma d’implantation de la remorque.</p>
</div>
<div class="hidden urlPhoto">7/photo-equi-chassis.jpg</div>
</li>
<li meta-id="8" class="ite-3">
<div class="titre">Essieu freiné auto-amorti</div>
<div class="hidden sousTitre">et commande de frein AL-KO</div>
<div class="hidden description">
<p>Permet un meilleur confort de conduite : l’essieu freiné garantit des ralentissements sans à-coups et une meilleure tenue de route.</p>
<p>Garantie 2 ans train roulant</p>
</div>
<div class="hidden urlPhoto">8/photo-equi-essieu.jpg</div>
</li>
<li meta-id="9" class="ite-4">
<div class="titre">Toiture à relevage hydraulique</div>
<div class="hidden sousTitre">Garantie 2 ans</div>
<div class="hidden description">
<p>Pro-étal est le spécialiste de la toiture hydraulique sans entretien. Ce système permet un gain de place pour votre commerce sur le marché (volets plus compacts), une diminution de la consommation du carburant (moins de prise au vent de votre remorque), et un centre de gravité plus bas pour une meilleure tenue de route. Avec l’hydraulique Chapel, le relevage de la toiture est fiable et se déroule en douceur.</p>
</div>
<div class="hidden urlPhoto">9/photo-equi-hydraulique.jpg</div>
</li>
<li meta-id="11" class="ite-5">
<div class="titre">Volets sandwichs</div>
<div class="hidden sousTitre"> aluminium isolé</div>
<div class="hidden description">
<p>Les panneaux des volets sont en sandwich d’aluminium / styrofoam qui présente l’avantage d’être rigide, léger, brillant et inaltérable tout en présentant un gain de poids de 50 % par rapport au panneau sandwich classique.</p>
</div>
<div class="hidden urlPhoto">11/photo-equi-volets.jpg</div>
</li>
<li meta-id="12" class="ite-6">
<div class="titre">Carrosserie en polyester</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>La carrosserie galbée, sans parties saillantes, est réalisée en fibre de verre et résine polyester.<br>
Les surfaces en polyester sont réparables en cas de choc, remplaçables facilement, et inaltérables à la corrosion chimique. En outre, les pièces polyester présentent la meilleure solution contre les poinçonnements et les rayures courantes. Leur durée de vie est quasi illimitée.</p>
</div>
<div class="hidden urlPhoto">12/photo-equi-carrosserie.jpg</div>
</li><li meta-id="13" class="ite-7">
<div class="titre">Plan de fermeture en inox</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Tout inox, il est très résistant à l'usure et à la corrosion.</p>
</div>
<div class="hidden urlPhoto">13/photo-equi-inox.jpg</div>
</li><li meta-id="15" class="ite-8">
<div class="titre">Poignées de manoeuvre</div>
<div class="hidden sousTitre">sur les volets latéraux</div>
<div class="hidden description"><p>Situées de chaque côté des volets latéraux, elles permettent une bonne prise en main et facilitent les manœuvres.</p>
</div>
<div class="hidden urlPhoto">15/photo-equi-poignees.jpg</div>
</li><li meta-id="61" class="ite-9">
<div class="titre">Roue de secours sous le châssis</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>La roue de secours est de série, fixée hors coffre sur un porte-roue.</p>
</div>
<div class="hidden urlPhoto">61/photo-equi-roue-secours.jpg</div>
</li><li meta-id="85" class="ite-10">
<div class="titre">Réserves à portillons</div>
<div class="hidden sousTitre"> Réfrigérées</div>
<div class="hidden description"><p>Dans le bas de caisse, la réserve est accessible par le biais de portes ouvrantes à poignées munies de verrous. Les portes des réserves sont isolées. Le nombre de réserves et leurs largeurs varient en fonction de la taille de votre remorque. Elles mesurent 1m de profondeur.</p>
</div>
<div class="hidden urlPhoto">85/photo-equi-reserve-ouvrante.jpg</div>
</li></ul><ul id="categorie_equipement_id4" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-electricite.png)"><li meta-id="16" class="ite-11">
<div class="titre">Éclairage Led Downlight</div>
<div class="hidden sousTitre"> Standard - Garantie pièces 2 ans</div>
<div class="hidden description"><p>La toiture est doublée d'un faux plafond en polyester avec un éclairage Led downlight encastré de faible consommation (23 W) pour une durée de vie de 10 ans. La lumière proche de celle du soleil (3 000 K) valorisera vos produits sans altérer leur aspect. Ce système d’éclairage est insensible aux micro coupures et baisses de tension.</p>
</div>
<div class="hidden urlPhoto">16/photo-equi-led-downlight.jpg</div>
</li><li meta-id="17" class="ite-12">
<div class="titre">Tableau électrique de commandes</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Encastré dans le bas de caisse, il intègre tous les disjoncteurs, circuits et protections. Il dispose d’un disjoncteur différentiel 30 MA pour une sécurité assurée.</p>
</div>
<div class="hidden urlPhoto">17/photo-equi-disjoncteur.jpg</div>
</li><li meta-id="18" class="ite-13">
<div class="titre">Prise européenne Hypra</div>
<div class="hidden sousTitre"> et sa fiche d'alimentation</div>
<div class="hidden description"><p>La prise européenne d’alimentation est fixée sur le bas de caisse.</p>
</div>
<div class="hidden urlPhoto">18/photo-equi-alimentation.jpg</div>
</li><li meta-id="19" class="ite-14">
<div class="titre">Feux arrières et signalisation</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Nos remorques sont équipées de feux de type automobile esthétiques ainsi que de feux de recul.</p>
</div>
<div class="hidden urlPhoto">19/photo-equi-feux.jpg</div>
</li></ul><ul id="categorie_equipement_id5" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-refrigeration.png)"><li meta-id="21" class="ite-15">
<div class="titre">Pas de réfrigération nécessaire</div>
<div class="hidden sousTitre">Vente sur lit de glace </div>
<div class="hidden description"><p>Pas de réfrigération : méthode optimale, fusion de la glace à 0°C.</p>
</div>
<div class="hidden urlPhoto">21/photo-equi-pas-de-refrigeration.jpg</div>
</li></ul><ul id="categorie_equipement_id7" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-hygiene.png)"><li meta-id="22" class="ite-16">
<div class="titre">Eau chaude sous pression</div>
<div class="hidden sousTitre">Lavabo et robinet temporisé</div>
<div class="hidden description"><p>Notre système d’eau chaude sous pression ne nécessite pas d’énergie sur le marché (Brevet exclusif société Pro-étal). Le lavabo en inox est encastré dans le plan de vente, équipé d’un robinet temporisé. Vous disposez d’un réservoir d’eaux usées sur collecteur unique, rinçable et vidangeable.</p>
<p>Il est accompagné d’un distributeur de savon liquide rechargeable. </p>
</div>
<div class="hidden urlPhoto">22/photo-equi-eau.jpg</div>
</li><li meta-id="23" class="ite-17">
<div class="titre">Dévidoir à papier d'essuyage</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Le dévidoir à papier d’essuyage est rechargeable.</p>
</div>
<div class="hidden urlPhoto">23/photo-equi-devidoir.jpg</div>
</li></ul><ul id="categorie_equipement_id8" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-vitrine.png)"><li meta-id="26" class="ite-18">
<div class="titre">Remontée vitrée</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Une remontée vitrée, droite ou inclinée, est placée sur votre plan de vente.</p>
</div>
<div class="hidden urlPhoto">26/photo-equi-remontee.jpg</div>
</li><li meta-id="27" class="ite-19">
<div class="titre">Plan de vente en polyester</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Le plan de vente (fond de la vitrine) en polyester est totalement plat (ou incliné en option). Sans joints, tous les angles sont stratifiés pour une étanchéité parfaite et une durée de vie optimale. Quatre crépines évacuent l'eau vers un collecteur unique. Sa largeur intérieure utile est de 86 cm. Il comporte un vide poche sous le comptoir côté vendeur.</p>
</div>
<div class="hidden urlPhoto">27/photo-equi-plan-polyester.jpg</div>
</li><li meta-id="59" class="ite-20">
<div class="titre">Repose-sac de courtoisie</div>
<div class="hidden sousTitre"> </div>
<div class="hidden description"><p>Comme son nom l’indique, il n’est pas indispensable, mais il invite la clientèle à s’attarder devant votre vitrine. On peut y déposer son sac lors du paiement, et il est aussi très apprécié en période humide. De plus, il offre une sécurité supplémentaire pour vos vitrages durant les trajets en les bloquant en position relevée. D’une robustesse à toute épreuve, il peut supporter une très lourde charge (jusqu’à 100 kgs).</p>
</div>
<div class="hidden urlPhoto">59/photo-equi-repose-sac.jpg</div>
</li></ul><ul id="categorie_equipement_id10" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-tablelaterale.png)"><li meta-id="29" class="ite-21">
<div class="titre">2 tables latérales</div>
<div class="hidden sousTitre">en polyester</div>
<div class="hidden description"><p>Deux tables latérales en polyester peuvent offrir deux mètres de plus à votre surface de vente. Elles se replient à l’intérieur de la remorque lors de la fermeture de celle-ci. A la demande, elles sont également dégondables si besoin.</p>
</div>
<div class="hidden urlPhoto">29/photo-equi-tables.jpg</div>
</li></ul><ul id="categorie_equipement_id14" class="equipements" style="background-image: url(http://pro-etal.fr/img/pictos/picto-cat-bachesdeprotection.png)"><li meta-id="36" class="ite-22">
<div class="titre">Entourage de bâches blanches</div>
<div class="hidden sousTitre"> Bâches standard, démontables</div>
<div class="hidden description"><p>L'entourage de bâches vous permettra à la fois de fermer votre commerce côté vendeur, mais aussi de vous protéger des intempéries. Les trois grandes bâches de fond (A,B, et C) s’enroulent sous les volets avec la possibilité d’un démontage rapide. Sous les bâches d'angles, deux bâches ferment hermétiquement l'entourage (bâches X). Les triangles à glissières, agrémentées de festons, complètent la couverture.</p>
</div>
<div class="hidden urlPhoto">36/photo-equi-baches.jpg</div>
</li><li meta-id="83" class="ite-23">
<div class="titre">Impression publicitaire</div>
<div class="hidden sousTitre">sur vos bâches d'entourage</div>
<div class="hidden description"><p>Nous vous proposons d'imprimer sur vos bâches standard les éléments que vous souhaitez : votre logo, des photos de votre exploitation, de vos produits... des textes, couleurs et typographies de votre choix. Nous vous accompagnons dans la réalisation de cette publicité, très impactante pour le public.</p>
</div>
<div class="hidden urlPhoto">83/photo-equi-etal-poissonnier.jpg</div>
</li></ul>
</div></div>so if you set border-radius: 5px; to 0 in line 54; you'll see the text again...
Any idea to use border radius property and see the text ?