0

I use an HTML table on this URL: https://www.pascaldegut.com/pages/prestation-webdesign, with red crosses and green checks.

It works great on desktop, but using my iPhone (Safari), the crosses and checks are black

enter image description here

Here is a sample of the code I use

<table class="blueTable" border="1" cellpadding="0" cellspacing="0" rules="all" frames="border" style="width: 100%;">
<thead>
<tr>
<th style="width: 40%;">Services</th>
<th style="width: 20%;">Basique</th>
<th style="width: 20%;">PREMIUM</th>
<th style="width: 20%;">GOLD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text">Audit & CR Vidéo</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
</tr>
<tr>
<td class="text">Design Page Accueil</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
<td class="check" style="color: #006600">✔</td>
</tr>
</tbody>
</table>

Moreover, I tried to force CSS with this code, without success

  td.cross {
    color: FF0000 !important;
  }

  td.check {
    color: 006600 !important;
  }

Any idea here? It's tricky for me to resolve it since I can't replicate the issue from my editor on desktop

Thank you in advance :) Pascal

Community
  • 1
  • 1
Pascal
  • 119
  • 9
  • 3
    Your CSS values need the hashtags (`color: #006600 !important`). Safari may be reverting to the default black when it can't find these colours. – Obsidian Age Jul 25 '18 at 22:05
  • ooops forgot the hashtags indeed, but this didn't resolve the issue :) – Pascal Jul 26 '18 at 01:20

2 Answers2

2

It's to do with the use of the unicode characters ✖ and ✔. I was able to inspect element on my iPhone and it seems to be caused by the iPhone Safari pre-defining the style and colour for those characters used. By simply changing them to a font, e.g Font Awesome, you will be able to achieve what you want.

Resources: Cross - Tick

The following are screenshots of my testing: Inspect Element: using an <code>x</code> rather than what you've used previously

Screenshot of the result of the inspect element.

Lachie
  • 1,321
  • 1
  • 10
  • 26
  • should I write ✔ or something close? Cause it didn't work :( – Pascal Jul 26 '18 at 01:25
  • So you need to include the FontAwesome stylesheets into your `` section of your website. You then want to add the following line of code `` in place of your current `✔`. Do the same for the cross; however, the class for the cross is `fa fa-times`. – Lachie Jul 26 '18 at 01:59
  • @Pascal if this fixed your issue, please select this as the working answer. – Lachie Jul 26 '18 at 04:42
0

I think Safari does not find colors that take this formula : #006600

Change it to the following format : style="color: rgb(0,102,0)"

<table class="blueTable" border="1" cellpadding="0" cellspacing="0" rules="all" frames="border" style="width: 100%;">
<thead>
<tr>
<th style="width: 40%;">Services</th>
<th style="width: 20%;">Basique</th>
<th style="width: 20%;">PREMIUM</th>
<th style="width: 20%;">GOLD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text">Audit & CR Vidéo</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
</tr>
<tr>
<td class="text">Design Page Accueil</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
<td class="check" style="color: rgb(0,102,0)">✔</td>
</tr>
</tbody>
</table>
Husam Ebish
  • 4,893
  • 2
  • 22
  • 38