I have two links in my html newsletter that turn to the default blue no matter what I seem to do. Anyone know of any fixes.
The <span>, <font> and <strong> tags were all fixes I've read about but none seem to work.
Blue Links
a {font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:16px; color: #EF8152 !important;; font-weight:300; text-decoration: none;}
<a href="#" style="margin:10px 0px 40px 0px; font-family:'Roboto', sans-serif, Helvetica, Arial !important; font-size:1em; color: #EF8152 !important; color: #EF8152; font-weight:300; line-height:1.0em; font-size:1em; text-align:center;">
<span style="color:#EF8152 !important; color: #EF8152;">
<font color="#EF8152">
<strong style="text-decoration: none; color: #EF8152 !important; color: #EF8152;">
View in web browser.
</strong>
</font>
</span>
</a>
This is bc of Outlook App adding styling for links. This is also an issue on Windows 10 and I believe Comcast email.
Try adding this code in your CSS
a:link, span.MsoHyperlink {
mso-style-priority:100 !important;
color:#000000 !important;
color:#000000;
text-decoration:none !important;
}
You shouldn't need all those extra tags or !important references in inline css. Something like this should work, though I get the sense you've already tried it:
<a href="#" style="margin:10px 0px 40px 0px; font-family:'Roboto', sans-serif; color: #EF8152; font-weight:300; line-height:15px; font-size:15px; text-align:center; font-weight: bold; text-decoration: none;">
View in web browser.
</a>
Two other things to try:
Get rid of the styles for a in the <head>.
If you're inlining any CSS, turn that off / don't do it.
If this still doesn't work there's been chatter about this being a bug in Outlook app, both Android and iOS apps are mentioned.
Related
The problem is:
Text from HTML file not showing on Android but showing on iOS
I have notice that there is something not showing on my page when I access it on Android devices but showing on iOS Devices. I mean that on iOS Devices only shows the text that needs to be seen by the user, but on Android it shows the whole HTML file (also including the tags).
Maybe in the HTML File is the problem.
Here is the HTML:
<div>
<p style="margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana;">The APP</span></p>
<p style="margin-top: 14pt; margin-bottom: 14pt; line-height: normal; font-size: 14pt;"><span style="font-family: Verdana; font-weight: bold;">Date: 12.03.2022</span></p>
This is my first question, sorry if I made something wrong.
Well I'm trying to create a rounded button that dynamically "fills" according to a parameter. I've created an inner div inside the button, absolute positioned in the bottom. It works perfect on chrome webview, but I cant make it work on android 4.1.
here is how it should look:
right
and this is how it looks on android 4.1:
wrong
This is my code:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) " ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="-webkit-transition: all 0.9s ease-in; height:{{(thread.get('ratio'))*100}}%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a> </div>
The "button" class is position:relative and the other classes just add a different border color.
I've tryed everything I could find with no success...
Thanks!
You need to change the block formating context of <a> and set it to relative position too:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="display:inline-block;position:relative;overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px;border:solid; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) "
ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="transition: all 0.9s ease-in; height:62.5%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a>
</div>
added :
a {
display:inline-block;
position:relative;
}
Do not mind the webkit prefixe not needed anymore or use last the non prefixed rules (transition)
I have a simple overlay <div> tag which puts some text on top of an image. Here is the HTML code:
<div class="single_image">
<div id="example-1" class="thumbs">
<a href="images/photos/01/DSC05689.jpg">
<img src="images/m1.png" alt="">
</a>
</div>
</div>
<div class="overlay">Tap to view</div>
</div>
This is what the code looks like in Chrome browser on a desktop machine:
But if I open the page in Chrome on Android, the text falls down below the image and this is what I get:
This is my CSS:
.overlay {
pointer-events: none;
position: absolute;
top: 25px;
right: 50px;
width: 200px;
height: 25px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
What could be the cause of this?
It seems to have been an issue with browser cache. If I opened the page on an incognito tab on Android, it worked as expected.
I'm trying to show two select boxes in a WebView in Android (4.2.1), but the height of them aren't the correct. In higher Android version (4.4.2) the result is correct with the same CSS. I'm using Bootstrap.
HTML code:
<div class="row col-xs-12 texto-cent barrasearch2 separacion-filas visible-xs" id="barraInbox">
<div class="col-xs-12 col-sm-6 col-md-5 ident-der">
<select size="1" name="cmd2" class="select-mod">
<option value="mg_move">Move messages to</option>
<option value="mg_copy">Copy messages to</option>
<option selected="" value="mb_change">Open mailbox</option>
</select>
...
</div>
</div>
CSS code:
.select-mod{
height: 30px !important;
font-size: 14px !important;
-webkit-appearance: menulist !important;
background-color: #fff;
line-height: 1.42857143;
}
Result in Android 4.2.1:
Correct result: (with Bootstrap CSS classes)
Thank you for advance!
It might be caused by the important marks, as usually they mess with my CSS a bit. Try a more specific path to the CSS style:
#barraInbox div select.select-mod {
height: 30px;
font-size: 14px;
-webkit-appearance: menulist;
background-color: #fff;
line-height: 1.42857143;
}
It's hard to tell without knowing what they should look like. There might be a better way to do it. Could you link an image of how it should look?
select {
height:25px;
width:100%;
border: 1px solid grey;
-webkit-appearance: listbox;
background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==); /* a simple arrow img */
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
padding-left: 5px;
}
Please try this this will work for you.
Please see the photo below to understand the problem:
I have a problem with padding here. I cant place the text of the button "Online Map" in the middle of the button. I'm developing this application for Android.
HTML:
<div class="footer" data-tap-toggle="false">
<div class="wrapper">
<div class="ui-grid-b">
<div class="ui-block-a">Back</div>
<div class="ui-block-b">
<a data-theme="my-site" data-role="button" data-mini="true" onClick="checkReachability()">Online Map</a>
</div>
<div class="ui-block-c home">Home</div>
</div>
</div>
</div>
CSS:
.ui-btn-up-my-site {
color: white;
font-size:8px;
padding-top:0;
padding-left:0 !important;
border:1px solid #333;
text-align:left !important;
padding-right:0;
margin-top:-10px ;
white-space: normal;
}
.footer .ui-grid-b .ui-block-a, .footer .ui-grid-b .ui-block-c { width: 20%; }
.footer .ui-grid-b .ui-block-b { width: 60%; text-align: center; padding:0;}
I spent over 5 hours trying to style this button and still didn't succeed. It driving me nuts..
Can anyone help me?
You can try setting
margin-left: 0px;
margin-right: 0px;
Sometime it solved apparently padding problems for me. Hope it'll work.