In 2019, email developers used to be able to target yahoo mail's css with the media query below:
<body>
<style>
#media screen yahoo {
.class-name {css}
}
</style>
My issue is with using web fonts. I need to target font-size for yahoo mail.
Is there a new method for targeting yahoo mail css in 2020?
Thanks
Alice Li of Litmus has worked out that the new Yahoo filters for 2020 do not filter out weird unicode characters.
However, it appears to capture AOL & Yahoo (I say 'appears' because it comes up intermittently on Litmus previews):
<html>
<body>
<!-- START force fallback on Yahoo/AOL -->
<style>
.& #√ .yahooAOLhide {display: none !important;}
.& #√ .yahooAOLshow {display: block !important;}
</style>
<!-- END force fallback on Yahoo/AOL -->
<table id="√"><tr><td>
<div class="yahooAOLhide">
########
</div>
<div class="yahooAOLshow" style="display: none;mso-hide:all;">
YAHOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO!
</div>
</td></tr></table>
</body>
</html>
As you can see, the <style> section must be written in the <body> so as to work with the Yahoo app too.
I am using this system to solve this problem. I have just found that with a lot of try/error testing with the Gmail/Yahoo/Outlook and MacMail and this seems to work. The element with the id="yahoo-show" is only visible in Yahoo. However I don't know if it will still work with other less used mailing systems. None of the answers written here seems to work fine for me but this.
#media only screen{
[id="yahoo-show"]{display:block !important;}
}
/* Intended commented line (Otherwise it will appear in both Yahoo and MacMail App) */
a[id="yahoo-show"]{display:none !important;}
Here it is:
<!-- START force fallback on Yahoo -->
<style>
.& #☃ .yahoohide {display: none !important;}
.& #☃ .yahooshow {display: block !important;}
</style>
<!-- END force fallback on Yahoo -->
I just had a hell of a time with my email that worked in all versions of Outlook but was running into issues on Yahoo Mail and AOL Mail. I tried the yahoo media query and could not get it to work, and so I figured I would try #supports and it worked.
#supports not (box-sizing:border-box) has the parameter filtered out and becomes #supports not (_filtered_a), thus becoming true and then targets the desired elements. My Email on Acid test confirms it works for AOL and I verified it on my test Yahoo account.
Related
I have an adult wordpress blog and I am using juicyads as my affiliate advertising network. I have one pop-under which I would like to disable on mobile devices only because I realized it is a big nuisance for the mobile visitor which will hurt my traffic.
The script is in the header and begins and ends as below:
<!-- Begin JuicyAds PopUnder Code -->
<script type="text/javascript">juicy_code='9454y2u2w256r2r2s2c42354';
<!-- End JuicyAds PopUnder Code -->
Is there any way I can modify it so it does not appear on mobile visits? Thank you.
Kind regards,
Pintersex
Replace the code with this:
<div id="mobile-popup">
<script type="text/javascript">juicy_code='9454y2u2w256r2r2s2c42354';
</script>
</div>
Add this to CSS
#media screen and (max-width: 480px) {
#mobile-popup {
display:none;
}
}
I have been experimenting by adding a floating social media share bar to my web page.
The bar renders perfectly in I.E, Firefox, Opera, Chrome, and Safari, but refuses to behave when viewed in Netscape Navigator 9.
It's important for the bar to render properly in all of the above, and thought the problem might perhaps be due to something else on my web page interfering with its correct operation. However, when I test the bar using the mock up page I have posted a link to here, the same problem still exists.
Can anyone suggest what alterations I might make to the source code in order for this problem to be overcome?
Here's a link to my demo page.
http://www.corncreations.co.uk/test/floating_bar.html
Here's a link to the creators page, which includes the source code.
http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html
Any constructive advice gratefully received.
The code used for the demo is available by visiting the second of the links (above), but anyway, here it is:
<style type="text/css">
#floating_bar {
background-color:#fff;
position:fixed;
padding:0 0 3px 0;
bottom: 30%;
margin-left:-60px;
float:left;
border: 1px dotted #f7f7f7;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
z-index:10;
}
#floating_bar {
clear:both;
}
</style>
<div id='floating_bar'>
<div style='margin:10px 0 5px 13px;' id='like'>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div style='margin:0px 0 0 10px;' id='gplusone'>
<g:plusone size="tall"></g:plusone>
</div>
<div style='margin:5px 5px 5px 6px;'>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div style='margin:5px 5px 5px 5px;' id='linkedin'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script>
<script data-counter='top' type='IN/Share'></script>
</div>
<div style='margin:0 0 10px 11px; id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#333;'> Get Widget</a></p>
</div>
As to what I've researched and tried so far - I've read other posts on this forum, and also Googled for an answer, but apart from reading a few posts elsewhere from others having difficulty with their Facebook Like buttons not rendering properly in Netscape, nothing else seemed relevant. I haven't tried altering the original source code yet, as I am not sure what to do that might correct the problem.
1. There's a point when backwards compatibility goes too far.
why Netscape fails to render the bar in the same way as all the other main browsers
You're implying that Netscape is a "main browser" like the browsers you mentioned in your question. Netscape used to have a significant market share, but its time has passed (see History of the web browser on Wikipedia, specifically the timeline chart at the bottom of the article; Also Usage share of web browsers for current statistics).
It makes the question irrelevant from a practical standpoint. It's hard to justifying the question let alone finding an answer, given that you're attempting to support a legacy browser.
But let's assume you have a valid reason for supporting a browser that is virtually extinct...
2. What is the problem?
"The bar ... refuses to behave"
You might as well be saying, "it doesn't work". How doesn't it work? What is the expected behavior, and how is the actual result deviating from your expectation? You shouldn't expect us to download a browser that hardly anybody has used for over a decade to confirm an ambiguous bug description (SSCCE).
3. Your HTML is funky
No formatting The lack of indentation isn't a technical concern (only a nitpick), but makes it hard to read
Inconsistent use of quotes The general practice is to use double quotes " for HTML attributes. For example: <div id="floating_bar">.
**Is that ! supposed to be there in the <script/> tag?
<g:plusone/> is not a valid HTML tag. Were you trying to do something like this?
The CSS is probably not working because the bottom property is set as a percentage. Support for bottom/right was pretty spotty at first, and percentage might be iffy.
I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.
I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.
I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com.
What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).
Also, this isn't an issue with the server. I have the same problem when running the code locally.
Does anyone have any idea whats going on here?
I believe the issue is tied to floats and the slideshow javascript.
Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.
This is the solution that worked for me:
In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:
<a class="logo" href="index.html">
<img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>
Then, in your CSS:
// target the link using your chosen selector
.logo {
display: block;
float: left;
}
Once I added those rules, I could no longer replicate the rendering bug.
Side note:
I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
Also, the border attribute for images has become obsolete. So rather than:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
Simply target the <img> with CSS and declare:
.logo img {
border: none;
}
I have a web app built in asp.net/vb. The scripts on the site only work properly with IE. Is there a way to force the user to use IE all of the time on the site?
You should not. Are you really willing to ignore 75% of the traffic? or are you paid by microsoft and have got a really cool website idea? Any ways, you can do that by using javascript and detecting the browser and if its not IE then do not show anything(Make you main div "display:none"). Here is an example http://www.w3schools.com/js/js_browser.asp to detect browser. Yet again these approaches are used for customizing styling for browsers and not for what you want it to.
function detectIE()
{
var isIE=navigator.userAgent.toString().indexOf("IE") != -1
if(isIE)
{
document.getElementById("main").style.display="block";
}
else
alert("This website can only be accessed using Internet Explorer");
}
<body onload="detectIE">
<div id="main" style="display:none;">
//Everything inside this div
</div>
</body>
Another approach is by using conditionals
<!--[if gte IE 6]>
<div id="main" style="display:none;">
//Everything inside this div
</div>
<![endif]-->
Remember, it's not a 100% solution, browsers can change there user agent strings and present themselves as IE or javascript can be turned off. You should consider adding support for other browsers rather than ignoring them completely.
I'm trying to position a button. I want it to be above the "Gå Videre" button on the page, it works in Safari and Chrome but not IE or FF.
#cartUpdate {
position:absolute;
width:160px;
height:30px;
left:580px;
bottom:50px;
}
And
{capture assign="cartUpdate"}
<div id="cartUpdate"><!--<input type="submit" class="submit" value="{tn _update}" />-->
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value=""> </button> </div>
{/capture}
{assign var="cartUpdate" value=$cartUpdate|#str_split:10000}
{php}$GLOBALS['cartUpdate'] = $this->get_template_vars('cartUpdate'); $this->assign_by_ref('GLOBALS', $GLOBALS);{/php}
{form action="controller=order action=update" method="POST" enctype="multipart/form-data" handle=$form id="cartItems"}
CONTENT
{/form}
Can be seen live at www.euroworker.no/order (put something in the basket first (Kjøp and Handlevogn)
EDIT: Just noticed my backend editor has stopped updating the .tpl file.. Might have something to do with it, no updates have been made for hours according to what's on the FTP. Just one thing after another...
Thanks.
Try to use -moz- prefix for all properties.
You could also try a separate CSS file:
<!-- IF NOT INTERNET EXPLORER THEN -->
<![if !IE]>
<!-- INCLUDE THIS CSS SHEET -->
<link href="css/ff.css" rel="stylesheet" type="text/css" />
<![endif]>
as #Neurofluxation conditional comments are best to handle the problems with IE, since you are having it with FF, just use FF CSS as default one and conditions for IE style sheets, you can also tweak your CSS for Firefox by using javascript you can explicitly say if Firefox is my browser use this style sheet, but that is a bad idea since javascript can be disabled and you website is leaved with bad layout.
#-moz-document url-prefix() { selector { attr } }