Whilst trying to get a background-image working in a in Outlook, I tried using VML which works great:
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:540px;height:196px;">
<v:fill type="tile" src="http://www.website.com/background-image.jpg" color="#888888" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<p>my signature content</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
However, when sending this signature from Outlook to a mac, the VML area and the HTML content inside it appear to be converted to a image?
Any ideas?
Found it here:
http://grabalife.com/2011/05/19/using-mailchimp-and-background-images-in-your-table-cells/
(not wrapping your HTML content in VML)
Related
I made an Interactive Workflow using SVG. Made this out of Adobe XD and transformed it to a working workflow where each button opens a pop-up modal and showing a video (like a lightbox).
The problem I encounter is that the buttons don't work using Safari. Using Google Chrome or Firefox does work. What can I do to make this work for Safari as well?
You can see an example of the interactive workflow via Fiddle.
To reproduce the problem you should open the link in Safari. If you want to see how it should work you should use Chrome or Firefox
-- EDIT 25-03-19 --
Thanks for the help but the answers did not work. Xlink:herf is kinda old and doesn't work for Safari. Maybe it does for regular links but i couldn't make my modal pop-up work.
I found a working example for the problem i was facing at http://jsbin.com/lajilacajumu/1/edit?html,css,output
Also made a preview with the information i saw in the example.
.hoverable-rect {
cursor:pointer
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Bug Report</title>
<!-- Bootstrap's CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- the different buttons comes here -->
<div class="container">
<svg viewBox="0 0 1920 1080">
<g class="hoverable-rect" data-toggle="modal" data-target="#modal1" id="g3223" id="prime-ppd" transform="translate(175.776 781.062)">
<g id="prime-elements">
<rect id="prime-bg" width="50" height="50" x="0" y="0" fill="#0094db"/>
<text id="PRIME" transform="translate(4.65 26.098)" fill="#fff" font-size="11" font-family="HelveticaNeue-Medium, Helvetica Neue" font-weight="500" letter-spacing="-0.002em"><tspan x="0" y="0">PRIME</tspan></text>
</g>
</g>
</svg>
<!-- all different modals comes here -->
<div class="modal fade overlay" id="modal1" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<iframe src="https://player.vimeo.com/video/303329059?autoplay=1&loop=1&autopause=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- jQuery and Bootstrap's JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
</html>
Instead of
<a href="whatever">
try
<a xlink:href="whatever">
SVG <a> elements are not the same as HTML <a> elements. In the SVG version you link using xlink:href.
This requirement for the xlink: prefix has been dropped in SVG 2. But not all browsers have implemented that yet.
In simple form, checkbox from Vuetify displaying like raw text:
<v-form class="form-login" v-model="valid" ref="form" lazy-validation>
<v-text-field label="Login"
v-model="username"
></v-text-field>
<v-text-field label="Password"
type="password"
v-model="password"
></v-text-field>
<v-checkbox
v-model="checkbox"
></v-checkbox>
</v-form>
If I use not the component, but own checkbox it works fine:
<input type="checkbox" v-model="rememberMe"/>
Do you know what I do wrong?
It appears that you are not loading the vuetify css correctly. Simply adding the vuetify dependencies to package.json will not load the styles.
The easiest way to load the css (as documented here) would be to add this to the <head> section of your index.html file:
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
i'm implementing a responsive website with twitter bootstrap but on iexplorer 8 and below can't use media queries.
I create a simple example for try respond.js but mediaqueries continue not working on iexplorer 7-8, here is the html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<meta name="Description" content="Web description here" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="./css/styles.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="./img/favicon.png">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="./js/respond.min.js"></script>
<script src="./js/scripts.js"></script>
</body>
</html>
and here is the style.css:
#media only screen and (max-width: 38.75em) {
body {
background: green;
}
}
Regards
https://github.com/scottjehl/Respond#cdnx-domain-setup
CDN/X-Domain Setup
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
See cross-domain/example.html for a demo:
Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>
If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.
Note: HUGE thanks to #doctyper for the contributions in the cross-domain proxy!
You need to include <script src="./js/respond.min.js"></script> above the </head> tag.
If you don't want to add any code related with respond.js, load bootstrap.min.css through CDN except for IE 8. For IE 8, use local static file.
<!--[if lte IE 8]>
<link rel="stylesheet" href="/path/to/bootstrap.min.css' %}" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" href="{CDN Address}" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" href="{CDN Address}" />
<!--<![endif]-->
Tested on IE 8 ~ 11 and other webkit browsers.
I have based my project on the current scaffolding from Yesod 0.10. I've gone into scary territory. While my code works just fine in both Firefox and Chrome, my workplace requires that it also works in IE. Well, it doesn't. It just gives me a "Webpage cannot be displayed" error. I'm using default layout, yet it still complains. Below find the source that Yesod generates.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--><!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en"> <![endif]--><!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Socko homepage</title>
<meta name="description" content>
<meta name="author" content>
<meta name="viewport" content="width=device width,initial-scale=1">
<link rel="stylesheet" href="http://10.5.125.201:3000/static/tmp/zfWtkHUp.css">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<script>document.documentElement.className =
document.documentElement.className.replace(/\bno-js\b/,'js');
</script>
</head>
<body>
<div id="container">
<header></header>
<div id="main" role="main"><h1> </h1>
<p>
You must login to schedule a test.
</p>
<footer>Barracuda Networks All Rights Reserved</footer>
<script src="http://10.5.125.201:3000/static/js/modernizr.js?-nhfNco9"></script>
<script>yepnope({load:["http://10.5.125.201:3000/static/tmp/1B2M2Y8A.js"]})</script>
</div>
<footer></footer>
</div>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE
6. chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js">
</script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})
</script><![endif]--></body></html>
I doing one simple task in jQuery alpha 4. It run in browser but when I run in WP7 emulator, it shows only white screen? can any one suggest me how to run in WP7?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Alpha 4 test</title>
<!-- alpha 4 for jQuery mobile -->
<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
function callpage2()
{
$.mobile.changePage("#detailpage","slide",false,false);
}
</script>
</head>
<body id="callweb">
<!-- /Page Starts -->
<div data-role="page" id="searchpage">
<!-- /header Starts-->
<div data-role="header" data-backbtn="false">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
First page
Using ID
<button onclick="callpage2()"> Using button (mobile changepage)</button>
<ul data-role="listview" data-inset="true" data-theme="e">
<li><img src="script/images/11.jpg" class="ui-li-thumb" /> <a style="margin-left:1em;">one</a></li>
<li> <img src="script/images/globe.jpg" class="ui-li-thumb" /><a style="margin-left:1em;">two</a></li>
</ul>
</div>
</center>
<!--Content Ends-->
</div>
<!-- Page End-->
<!-- Detail Page Starts -->
<div data-role="page" id="detailpage">
<!-- /header Starts-->
<div data-role="header">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
Back
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
second page
</div>
</center>
<!--Content Ends-->
</div>
<!--Detail Page End-->
</body>
</html>
The debug capabilities on the mobile browser are not very advanced.
The best way to debug this is to try using the desktop browser instead. Does this example run on IE7 (or IE9 running in compatible mode)? Get it working there first, then move it across to the mobile UI.
I would suggest to used the CDN instead your local files for invoking jQuery and jQMobile just to start.
change this
<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>
into this
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
I have run into this same issue before.
For me it was an issue with my html syntax and I think is could be a similar issue here (It seems JQM under WP7 is very picky about its HTML)
I'd start with the centre tags around the content divs, either get rid of them or move them inside. Maybe even the font tags and use CSS classes.