CSS media query not working in Rails mailer template - html

Does media query really not working in email template?
I have simple test template and a query BUT can't make it work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Report</title>
<style media="screen">
#media only screen and (max-width: 768px) {
h1.temp{display: block !important} //testing & not working....
}
</style>
</head>
<body bgcolor="#f6f6f6">
<h1 class="temp" style="display: none">Show Me in Mobile Device</h1>
<%= yield %>
</body>
</html>

I used 'premailer-rails' gem and it works for me. This tutorial shows example.

Related

HTML Simple Holding Page not visible on newer browsers e.g. Chrome and Firefox

I want to update an existing/simple holding page on my domain in html.
Unfortunately, I've noticed that this page doesn't seem to appear on newer browsers such as Chrome and Firefox and only seems to load up properly on Internet Explorer.
Is there any advice you could give me to help overcome this issue please?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"TITLE HERE"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background:ffffff url('LOGO.jpg') no-repeat center center">
</a>
</body>
</html>
<!--#easybanner4-->
To make a simple HTML page visible by most modern browsers it's better to use HTML5 so first, instead of using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> just use <!DOCTYPE html>...
About your code, you can fix it by using something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- or <meta charset="iso-8859-1"> -->
<meta name="viewport" content="width=device-width">
<title>"TITLE HERE"</title>
<style>
body {
background:#ffffff url('LOGO.jpg') no-repeat center fixed;
}
</style>
</head>
<body>
link
</body>
</html>

My script works in jsFiddle but not in my webpage

I don't usually like asking other people to look at my code, but I'm so confused! This script only works in jsFiddle. When I try it elsewhere, it just comes up with the navy background.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<meta name="google-site-verification" content="MaEIpDKrtwWJCsgK-26zGQY0-WFYBN8y2fDho0pzYcE" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<style type="text/css">
.scr { height:700px; width:400px; background-color:navy;}
</style>
</head><body>
<div class="scr"><script type="text/javascript" src="//www.gmodules.com/ig/ifr?url=http://geoff.lequelenec.googlepages.com/stock_chart_gadget.xml&up_symbol=PPL&up_duration=v&synd=open&w=320&h=200&title=PPL+Corporation&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script></div>
</body></html>
If you put the script link into a browser, it returns an error message:
Sorry! Gadget cannot be displayed until all required settings are provided.
So I would guess that you haven't fully configured it.

Hebrew on mobile web site

I am trying to build a basic web page for mobile devices, on my pc Chrome browser I see "???? ???? ???" every where Hebrew written. Here is my code:
<?php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="he">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="he" />
<meta name="GENERATOR" content="PHPEclipse 1.2.0" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="css/themes/light_blue.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<title>מניין</title>
</head>
<body>
<div id="wraper" data-role="header">בדיקה בדיקה הדיקה</div>
</body>
</html>
I am using eclipse IDE for developing. Any suggestions for how to solve this one?
Remove ; charset=UTF-8 and add <meta charset="iso-8859-8"> inside the document <head>.
what browser do you use?
on Chrome it works good

Why is there a blank line at the top of my html page?

Here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
kjkj
</div>
</body>
</html>
Lve demo:
http://tinkerbin.com/O2MwkUTj
Why is there a blank line at the top of my web page?
I noticed that removing the div, or removing the doctype fixes the problem...
It is because Tinkerbin is getting confused.
If you put your HTML into a file it works fine. In Tinkerbin, the following happens in the preview:
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<div>
kjkj
</div>
</body>
I presume it is removing some tags such as <html>, <head> and <body> when outputting your page in order to display inside a page created for the preview.

Is it a good idea to align to center a site with CSS like this?

I have seen a tutorial on youtube which centers a site by giving margin: 0px auto; and by saying the actual width of the site:
body
{
align:center;
margin: 0px auto;
width: 1000px;
}
But this does not work for ie8. IS this a good idea to use in order to align to center the layout?
It works in IE6 and newer providing the browser is in standards mode. Trigger it with a Doctype such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Since the alternative is quirks mode, and that creates many inconsistances with other browsers, standards mode is highly desirable.
So, yes that is a good method to centre things.
align:center;
That, on the other hand, is nonsense. There is no align property in CSS.
I have found the problem why this style and many other styles was not working for for ie8 (only for this browser). The problem is that I wrote
<html>
<head>
<title>About us</title>
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>
.......
Now I have changed it to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/about.css" rel="stylesheet" type="text/css" />
</head>
<body>