Viewing Font Color Display in 1.9

  1. Portal Home
  2. Forum
  3. EverWeb
  4. Bug Reports

Font Color Display in 1.9



User: Les C. 10 years ago
I've created a text box via the HTML Snippet and specified a color in the header.

A different color shows when previewed in Safari. Firefox is okay.

I've cleared out the cache, restarted the app—same issue.

If I duplicate the page, the text color will be fine for a couple of previews, then it turns purple.


LC

Last edit 10 years ago
User: Roddy 10 years ago
Quote:
I've created a text box via the HTML Snippet and specified a color in the header.


I assume you mean the head of the HTML doc and not the header. It's common for users to get confused between head, header and heading and this is compounded by the error in the EverWeb Page inspector which shows as "Header/Footer" Code. This is a long standing bug which has never been fixed.

If you are inserting an item via code injection - and it doesn't turn out as expected - it would usually be attributed to user error rather then an EverWeb bug. Can you post the HTML you are using in the Snippet and the CSS inserted into the Head Code box?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 10 years ago
--Roddy,

Below is the code. Also, would you happen to know why centering of text is not working in Firefox?


HTML Snippet

<a href="#" class="image-tooltip" data-tooltip="12345.">
<img src="{!-ASSETSPATH-!}Images/MyImage.jpg"style="width:150px;height:200px;border:none;margin:0;padding:0" alt="12345" />
</a>


CSS in Header

<style type="text/css">
a.image-tooltip[data-tooltip]:link {
position: static;
text-decoration: none;
font: 14px Helvetica-Condensed-Light; /* Font size and family */
color: #FFFFFF; /* Font color */
text-align:left;
line-height: 125%;
}
a.image-tooltip[data-tooltip]:before {
content: attr(data-tooltip);
position: absolute;
bottom:0px; /* Tooltip position y-axis */
left: 0px; /* Tooltip position x-axis */
background: #0FB1FF; /* Tooltip background color */

opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
padding: 5px 5px 5px 10px;
width:135px;height:190px} /* Tooltip width */
a.image-tooltip[data-tooltip]:hover:before {
opacity: .9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
</style>
User: Roddy 10 years ago
I have offered a solution in your topic in another section which is a more appropriate place for it.

The CSS you have posted here contains stuff which is redundant. Flexbox has been completely rewritten and you are trying to use selectors that are outdated. There are other errors too and I can't see any reason the the image position to be static?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  


Post Reply
You must login or signup to post.