Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2019-05-16 08:00:27

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

[SOLVED] css problem with latest safari

As the forum has no CSS specific section, I am posting this here.

I am using tooltips for notes which display just fine in all browsers except Safari 12.1.

To insert the tooltips I am using: <txp::note no="#" txt="txt" pos="top" /> and <txp::note no="#" txt="txt" pos="bottom" /> which link to a form

<txp:if_yield name="pos" value="top">
<sup class="tooltip">
<a href="#fn<txp:yield name="no" />" id="foot<txp:yield name="no" />"><txp:yield name="no" /></a>
<span class="tooltiptext noprint">
<txp:variable name='text<txp:yield name="no" />'><txp:yield name="txt" escape="" /></txp:variable>
<txp:yield name="txt" escape="" /></span></sup>
</txp:if_yield>
<txp:if_yield name="pos" value="bottom">
<li id="fn<txp:yield name="no" />">
<txp:if_yield name="txt">
<txp:yield name="txt" escape="" />
<txp:else />
<txp:variable name='text<txp:yield name="no" />' /></txp:if_yield> 
<span class="noprint"><a href="#foot<txp:yield name="no" />">&#8679;</a></span>
</li>
</txp:if_yield>

the css

.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;background-color: #BA0000;
color: #fff;text-align: center;
border-radius: 6px;padding: 5px 3px;
position: absolute;
z-index: 2000;
bottom: 150%;left: 50%;
margin-left: -100px;
font-size:1.4em;
height:auto;
line-height:1em}
h2 .tooltip .tooltiptext {
font-size:.8em;
line-height:1em}
h3 .tooltip .tooltiptext {font-size:.9em;line-height:1em} 
.tooltip .tooltiptext a {color:#fff;}
.tooltip .tooltiptext::after {content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #BA0000 transparent transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible;}

In ff the tooltips appear just fine on mouse over but on the latest Safari upgrate the tooltips appear inline with the text ignoring all the css rules.

Can anybody spot what I am missing?

Sample url.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#2 2019-05-16 08:18:09

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: [SOLVED] css problem with latest safari

In ff I see the text inline too, so maybe it’s not just safari but your cache showing in ff.

To the reason: in ff and safari, the source code shows only the <span class="tooltiptext noprint">. The sup and a href are not in the source. That would explain why you’re seeing the footnote text inline. If I add the sup and a manually in the web inspector, your CSS then works fine… So, I suspect something in your shortcode isn’t outputting as expected.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2019-05-16 09:09:16

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: [SOLVED] css problem with latest safari

^^ this is really strange as the sup appears in the source code on all browsers. I have nevertheless also checked the validation which found a number of errors which were not there before. Checking the code, I also found that the errors were not because of my coding but because I had pat_speeder enabled. On deleting the following, <txp:if_logged_in not><txp:pat_speeder gzip="0"/></txp:if_logged_in>, all appears just fine again.

As such I guess that it is a plugin issue which I’ll report in the thread.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#4 2019-05-16 09:25:53

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: [SOLVED] css problem with latest safari

A report was not needed as updating the plugin solved the problem!


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#5 2019-05-16 10:20:57

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: [SOLVED] css problem with latest safari

Yep, everything working fine now!


TXP Builders – finely-crafted code, design and txp

Offline

Board footer

Powered by FluxBB