At the end of my tether with this one.
My website: timjstevenson.com
Renders on everything except windows phone. No errors.
I am using the recommended head function
if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("#-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
And the recommended viewport metas
<meta name="viewport" content = "user-scalable=yes, maximum-scale=1, width=device-width /">
And the recommended CSS elements
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
but the site still renders at full size and doesn't handle the fixed / relative elements properly.
I have done a lot of research on this and read all the relevant blogs / forums.
The top of my CSS looks like this...
html
{-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-font-smoothing:antialiased;}
body
{max-width:768px; min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.sitepage
{position:relative;
width:700px;
min-height:900px;
top:180px;
margin-left: auto;
margin-right: auto;
padding: 5px 10px 5px 10px;
z-index:1;}
And the top of the html looks like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content = "width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="apple-touch-icon" href="images/tjs_logo.png"/>
And I have read these but no luck...
http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
stackoverflow.com/questions/14654425
IMPORTANT EDIT: The issue appears to be with position:fixed DIVs. These DIV elements do not scale under windows phone IE.
SOLVED.
The problem is with Position Fixed DIVs with a specified width in pixels.
If the viewport is being controlled by media queries (specifically for WinPhone 7/8) then specifying a width greater then the screen width in a fixed div causes the problem.
Here is the start of my altered CSS - note the div.header and div.site entries. NO SPECIFIED WIDTH - just 100% inherited from body with a max-width thrown in.
body
{width:100%;
max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;
background-color: #ffffff;}
#font-face {font-family: HelveticaNeue;
src:url(fonts/HelveticaNeueLTStd-Lt.otf);}
#font-face {font-family: FuturaStd;
src:url(fonts/FuturaStd-Book.otf);}
div, span
{font-family: HelveticaNeue, Arial, sans-serif;
font-size:120%;
font-weight:normal;
text-align:justify;
color:#202020;}
div.site
{max-width:768px;
min-height:1028px;
margin-left:auto;
margin-right:auto;}
div.header
{position:fixed;
z-index:5;}
And Here are the media and viewport elements I used.
#media screen and (max-device-width: 25em)
{body
{-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
-text-size-adjust: none;}}
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
And here is the head viewport meta tag in the html
<meta name="viewport" content = "width=device-width, maximum-scale=1.0"/>
Hope this helps.
T.
Related
When I set the font size to a specific pixel height, the computed font size is 1.333 times the size I've set in my CSS. However, if I set the font size as a percentage, the correct size is used. This happens in every browser that I've tried, including Firefox 3.6.28, Firefox 53.0.3 (both 32- and 64-bit), Internet Exploiter, Safari, Chrome and Opera.
Here is a whittled-down example of the problem:
<?xml version="1.0"?>
<!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" lang="en" xml:lang="en">
<head>
<title>TocMenu Test</title>
<link href="/style/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body
{ background:#000000 url('/graphics/l5-back-eso1213a-2K.jpg') repeat fixed;
color:#ffffe8;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
}
img
{ border:0;
margin:0;
padding:0;
}
#menuRoot *
{ min-width:0;/* peek-a-boo bug fix for IE7 */
position:relative;/* peek-a-boo bug fix for IE6 */
}
#menuRoot img
{ padding:3px;
}
.tocRoot
{ padding:0;
}
.tocLevel1
{ font-size:16.8pt; /* 120% */
font-weight:bold;
margin-top:9px;
}
.tocLevel2
{ font-size:15.4pt; /* 110% */
font-weight:bold;
margin-top:6px;
}
.tocMenuOpen
{ background:none;
color:#ffff66;
list-style:none;
}
.tocMenu1
{ padding-left:30px;
}
.tocLink, a.tocLink
{ color:#99ff99;
text-decoration:none;
}
.tocBtn, .tocBtnNot
{ display:inline-block;
text-align:left;
vertical-align:text-top;
width:14px;
}
</style>
</head>
<body>
<ul id="menuRoot" class="tocMenuOpen tocRoot">
<li>
<p class="glueDown">
<span class="tocBtn" id="menuHome_bn"><img src="/graphics/imgOpen.gif" alt="menu state indicator" /></span>
Home
</p>
<ul id="menuHome" class="tocMenuOpen tocMenu1">
<li>
<p class="glueDown">
<span class="tocBtnNot"> </span>
Today's News
</p>
</li>
</ul>
</li>
</ul>
</body></html>
If I change the tocLevel1 and tocLevel2 font-size values from their pixel heights to the percentage values shown ih the CSS comments, the page works correctly.
Why does every browser decide to use a font size one third larger than what is set in the CSS when the font-size value is set to a specific height?
You're mixing px (pixels) and pt (points) in your font sizes. 120% of 14px would be 16.8px, but you've specified the units as points, which are not the same thing, and are larger.
I'd suggest sticking to one unit to make it easier to adjust things relatively. (Or use an absolute measurement as your base size and use relative ones for everything else.)
After few days of struggling coding a responsive Email and trying to find answers all over the web, my Media Queries are not used by mobile devices, I compared it to ready-made responsive template, tested, tested and tested again with different configurations... But still it's not working here is my header :
<!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" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table[class=w600], td[class=w600] {width: 600px!important;}
body,table,td,p,a,li,blockquote{-webkit-text-size-adjust:none !important;}
#media only screen and (max-width: 599px), only screen and (max-device-width: 599px) {
table[class=w600], td[class=w600] {width: 480px!important;}
}
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
table[class=w600], td[class=w600] {width: 320px!important;}
p[class=for-pro], a[class=view-in] {font-size: 10px!important;}
p[class=bottom] {font-size: 12px!important;}
p[class=frank] {font-size: 16px!important;}
}
</style>
</head>
Am I missing something? What's the 'magic' stuff I need to write to make it works, because it's actually a very simple newsletter and as you can see, with only few css rules to follow.
Thank you.
Couple of things: 1. What browser/client are you testing in? IOS will respond responsively; however, Android's native app does not (Android 4.4).
2. Do not use h1, h2, . . . p tags. They respond differently depending on the email client. Apply all styles to the containing <td>.
Here is my default head that I start most single column emails with. It takes care of a lot of hacks you might encounter with yahoo, ios, and outlook.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One Column Mobile Friendly Template</title>
<style>
/*------------------------------------*\
EMAIL CLIENT SPECIFIC STYLES
\*------------------------------------*/
.ReadMsgBody, .ExternalClass { width:100%; } /* Force Hotmail/Outlook.com to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; } /* Force Hotmail/Outlook.com to display normal line spacing */
body, table, td, p, a, li, blockquote { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* Prevent WebKit and Windows mobile from changing default text sizes */
table, td { mso-table-lspace:0pt; mso-table-rspace:0pt; } /* Removes spacing between tables in Outlook 2007 and up */
img { -ms-interpolation-mode:bicubic; } /* Allows smoother rendering of resized images in Internet Explorer */
.footer a { color:/*#ffffff*/; text-decoration:none; } /* Add this class to the system footer to change the unsubscribe link ---does not work for Gmail--- */
.iOSfix a { color:/*#ffffff*/; text-decoration:none; } /* Override the default blue link style that iOS puts on address and phone numbers */
.iOSfixaside a { color:/*#000000*/; text-decoration:none; } /* Alternate Style - Override the default blue link style that iOS puts on address and phone numbers */
.em-dragdrop-dummy { display:none!important; }
/*------------------------------------*\
RESET STYLES
\*------------------------------------*/
body { min-width:100% !important; }
html { width:100%; }
img { border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
table { border-collapse:collapse !important; }
body, .emWrapperTable, .emWrapperCell { height:100% !important; margin:0; padding:0; }
.mobileHeaderWidth .em-dockitem-empty, .mobileFooterWidth .em-dockitem-empty, .emWrapperTable, .emWrapperCell { width:100% !important; }
div { padding:0px !important; }
h1, h2, h3, h4, h5, h6 { display:block; margin:0px; }
/*------------------------------------*\
MOBILE STYLES
\*------------------------------------*/
#media only screen and (max-device-width: 720px) {
td[class="mobileHeaderCell"],
td[class="mobileColumnCell"],
td[class="mobileFooterCell"] { display:block !important; }
table[class="mobileHeaderWidth"],
table[class="mobileColumnWidth"],
table[class="mobileFooterWidth"],
td[class="mobileHeaderCell"],
td[class="mobileColumnCell"],
td[class="mobileFooterCell"] {width:480px!important;}
/* general display styles */
td {box-sizing:border-box; }
span[class="mHide"] { display:none!important; }
span[class="mBreak"] { display:block!important; }
p[class="mCenter"] { text-align:center!important; margin:0px 1em!important; }
/* link styles */
/* image styles */
img[class="mFullImage"] { width:100%!important; height:auto!important; }
img[class="mImgCenter"] { margin:0px auto!important; }
}
#media only screen and (max-device-width: 479px) {
table[class="mobileHeaderWidth"],
table[class="mobileColumnWidth"],
table[class="mobileFooterWidth"],
td[class="mobileHeaderCell"],
td[class="mobileColumnCell"],
td[class="mobileFooterCell"] { width:320px!important; }
/* general display styles */
/* link styles */
/* image styles */
}
</style>
</head>
Not all mobile devices or mobile apps support responsive and media queries.
For example Android or Gmail app won't. There are some workaround. Especially to get it working on Android and to force it to render Desktop on Gmail. You can find the solution for Android here:
How to get a responsive HTML email to work on Android?
Keeping that in mind, about the media queries you can try and set them up this way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
#media only screen and (max-width: 500px) {
*[class].classname{width:100% !important;}
*[class].classname{float:left !important;}
*[class].classname{display:block !important;}
}
</style>
</head>
Its fully explained here:
How to code a responsive HTML email table step by step – tutorial
I am trying to set up a basic layout where the header and footer carry on across the width of the page no matter what resolution the user is set to.
I have managed this but now I am having a problem where the main container div will not expand properly height wise to encompass the divs within. It seems to expand to only a certain height and then goes no further, no matter what height or min-height style you change.
Here is the basic structure:
<div id="page">
<div id="content">
</div>
</div>
<div id="footClear"></div>
<div id="footer">
</div>
The footer code is to force the footer to stick to the bottom of the page no matter the height of the main container (id="page")
My CSS for these parts is:
#page {
margin:0 auto;
width:1000px;
background:red;
padding:0px;
min-height:100%;
position:relative;
margin-bottom:-47px;
}
#content {
}
#footer {
width:100%;
height:22px;
position:relative;
margin:0 auto;
background:#000000;
text-align:center;
padding-top:3px;
font-size:12px;
}
#footClear {
height:22px;
clear:both;
}
A link to what to my site is here if you want to have a look: www.therapyoracle.co.uk/new
You can see the page div is in red, and does not carry on down the page.
On your live site, #page has height: 100% set, which is causing the problem.
It's coming from your ie6.css! This is how you're trying to make it load in only IE6:
<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]—>
The hyphens in the HTML above are wrong. Replace that HTML with this:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]-->
And ie6.css will then only be loaded in IE6, instead of all browsers, and your problem will be fixed.
If you take the height out of you body this will fix it for you as below
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
}
Delete margin-bottom:-47px; and delete #page {height: 100%;} in ie6.css
<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> Blog
Videos
Home
Contact
About MDB1 </div>
</body>
</html>
</div>
#charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}
I have a screen that displays two flot graphs side-by-side quite happily.
I want to be able to print the graphs so I've set up an #media print clause with CSS like this:
#media screen
{
div.plot {
float: left;
font-family: arial;
width: 575px;
height: 300px;
}
}
#media print
{
div.plot {
float: left;
font-family: arial;
width: 300px;
height: 300px;
}
}
My HTML looks like this:
<div id="graph" class="plot"></div>
<div class="plot" style="width:50px"></div>
<div id="graph2" class="plot"></div><p></p>
As far as I can see, the printed version should produce two graphs, each 300 px wide.
What happens is that I get two graphs which still have the larger 575px width which then run into each other.
Is my understanding that CSS width controls the width of the graphs correct, or do I have to use another CSS control to fix the width of the graphs?
Your problem is likely that when you call $.plot, it creates canvas elements inside your #graph placeholder. Those canvas elements use the size of your placeholder, when plot is called, to set their own width and height. When you hit Print, that changes the stylesheet to the print version, but you would also need to re-call $.plot or use the flot resize plugin.
this work perfectly for me :
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>test </title>
<style type="text/css" media="screen">
div.plot { float: left; font-family: arial; width: 575px; height: 300px;border:1px solid red; }
</style>
<style type="text/css" media="print">
div.plot { float: left; font-family: arial; width: 300px; height: 300px;border:1px solid red; }
</style>
</head>
<body>
<div id="graph" class="plot"></div>
<div class="plot" style="width:50px"></div>
<div id="graph2" class="plot"></div><p></p>
</body>
</html>
Your error probably lies where/how you defined your #media print.
Else it might be your div id="graph/2" that cause the problem... (if you have an img inside it that is too big for example) (try to add overflow:hidden!)
PS : for easy switching between media and print css, I use the web developper toolbar.