The document at: http://phoenixchange.com/test/170518_TextTest.html is validated and displays as intended in "most" browsers but still not in e.g mobile Safari. (pls. see Edit 8 below) Can anyone explain this and how to fix?
CSS
.hideaway {
font-family: arial;
font-style: italic;
}
.hiddentxt {
white-space: pre-wrap;
letter-spacing: 0.1em;
}
.hideaway .hiddentxt {
display: none;
}
.hideaway:hover .hiddentxt {
display: inline;
color: white;
font-family: times;
font-weight: normal;
background: blue;
}
HTML
<p>Accusantium doloremque..odit aut fugit.<span class="hideaway"><br><span class="link normal">[more]</span> <span class="hiddentxt"><br> Interested ? Contact me for details ! </span></span></p>
....
EDIT 8
Code W3C Validated (unnecessary ;
characters e.g <span class="link normal";>
deleted). Answer below is re typo in this post only. The document displays correctly in:
Mobiles: Samsung, Chrome, Firefox
Desktop: Safari, Firefox, IE, Opera
but still not in:
Mobiles: Opera Mini, Safari
Safari mobile obviously, and Opera Mini too, are important mobile browsers so I really want any code to work on these (i.e with "current millenium" browsers). I've had no success finding specific information re CSS that does not function on them / on a safe html/css subset for "current millenium" (mobile) browsers.