Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
[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" />">⇧</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?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
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
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
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
Re: [SOLVED] css problem with latest safari
Yep, everything working fine now!
TXP Builders – finely-crafted code, design and txp
Offline