Fluid height in Internet explorer - html

I've been trying to make an image resize as you resize the window of the browser. It works in all but Internet explorer. I was requested to do this without external sheets.
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; margin:0; padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tidsaxel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="dstyle.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 100%; margin:0;">
<table cellpadding="10" height="100%" width="100%" style="margin:0;">
<tr>
<td rowspan="20" height="100%" style="margin:0;">
<img src="pil.png" height="100%" width="48" />
</td>
<td class="Rubrik">Tidsaxel för krav, program, granskning och beslut</td>
</tr>
<tr>
<td>Sverige satsar på utveckling av kärnkraft (1945). Kärnavfallet betraktas inte som något problem.</td>
</tr>
And then it goes on with 20 more rows, I don't think it's nessessary to print them all.
</body>
</html>
The picture doesn't even take up 100% of the height to begin with, and when I resize the window it just gets smaller. Is there a way to fix this? I've read that it's possible with javascript, but I haven't found a solution. It's IE 7 and IE 8 that I've tried on.

In the table, set cellpadding="0" cellspacing="0". But this affects the content area as well. You might want to look into designing your site with DIVs instead.
You might want to look into a CSS solution:
<style type="text/css">
body {
background-image:url(background.png);
background-repeat:repeat-y;
}
</style>

Related

Media query not triggering

I'm trying to use media queries to change background image and hide content in a division tag if the screen goes beyond 640px. This doesn't seem to work. I'm new to this and feel I'm missing something major.
<html>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
</style>
</HEAD>
<body>
#media screen and (min-width:641px) {
body {background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;}
}
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
The CSS isn't working because its not contained with-in style tags.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
<!--
body {background-color:black; overflow:none;}
-->
#media (min-width:641px) {
body {
background:white;background-image:url('http://lib.store.yahoo.net/lib/oberers-flowers/Home-Background-2013a.gif');}
div.desktop {visibility:hidden;
}
}
</style>
</head>
<body>
<div class="desktop" style="position:absolute;top:0px;left:0px; z-index:1">
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile1.jpg" width="100%" height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile2.jpg" width=100% height=auto>
<img border="0" src="http://lib.store.yahoo.net/lib/oberers-flowers/mobile3.jpg" width=100% height=auto>
</div>
</body>
</html>
For one, you're missing a <style> tag around your media query there. Also, I'd recommend against using inline styles (i.e. style="" attribute tags in your HTML). Keep all your CSS in one place, preferably a separate CSS file you can link to in your head tag.
Also, make sure you keep your media queries declared after your other CSS for those selectors. Whatever comes last will take precedent!

Loading Image in Email based on Screen Size of Device Used

I am trying to load two different images in an email based on the screen size the viewer is using.
I have a WordPress ninja form thank you email that I want sent out with an image displayed in the body. If the screen size is smaller than 501px I want image displayed if it is smaller than 500px I want a different image displayed. The difference being one is less text and easier to read on mobile.
I have tried media queries but they do not work for the email formatting. I used them on a test html page to make sure my code was working and it was fine so maybe media queries don't work for email?
Is there another way to change the images based on the size of the screen the email is viewed on?
Here is my code:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='ourStory'>
<img src='http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-mobile-copy.jpg' />
</div>
</body>
</html>
CSS
#media all and (min-width: 501px) {
div.ourStory{
content:url('http://www.TheBetterSoftwareCompany.com/wp-
content/uploads/2015/04/ourstory-TBSC-edit3-copy.jpg');
}
}
Responsive Email cannot be achieved properly or even at all with <div> you will need to use <table>
https://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/
Services such as mailchimp know about these and have their own built in tool to design email.
http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/
I suggest you use a library such as this one to accomplish a better responsive design for your email.
http://zurb.com/ink/docs.php
Example code:
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="eight columns">
<tr>
<td>
Eight Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="four columns">
<tr>
<td>
Four Columns
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Also many email provider and client doesnt support linked css so you have to rely on inliner tools which will apply style="" attributes to your HTML elements.
As the links say, div can and should be used in email, but the complex layouts require Tables. I personally think a combination is the best course, which I will use in my sample below.
The major issue that jumps out at me is that you have a link tag to the stylesheet (almost universally no support on email clients) and that you use more complex CSS (content:) on the media query (also not well supported).
I created some code using table and div while also updated some css, etc to your above code - including Outlook conditional statements. You would likely need to test this across clients, but this is the best and pretty much only way to do an image swap in email. You can also change the background-image in the media queries if you want to switch it again at a lower screen size.
See below:
.ourStory { width:640px;}
#media only screen and (max-width: 640px) {
.ourStory { width:100% !important;}
.image1 {display:none !important; visibility:hidden !important; overflow:hidden; width:0px !important; height:0 !important; line-height:0 !important;}
.bgimage {width:100% !important; height:100px !important;}
}
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<title></title>
<style>
<!-- Inline Style Sheet Here -->
</style>
</head>
<body>
<div class='ourStory' style="width:100%; max-width:640px;">
<!--[if (gte mso 9)|(IE)]>
<table width="640" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="ourStory" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:640px;">
<tr>
<td class="bgimage" background="http://placehold.it/639x100" bgcolor="#7bceeb" width="100%" height="150" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:639px; height:150px;">
<v:fill type="tile" src="http://placehold.it/639x100" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div><img class="image1" width="100%" src='http://placehold.it/640x150' style="border:none; display:block;" />
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
</div>
</body>
</html>

Cannot get email header image to scale

I am trying to use an inline style
The template is simple and is responsive in the browser but is not when I send it to my phone. The image runs off the page and does not scale to the viewport.
Here is the code:
In the img tag I put an inline style.
style="display:block; width:auto; height:100%:"
Where am I going wrong?
I am sending it to an android phone using gmail. Here is the ENTIRE page:
!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Best Holiday Wishes</title> </head> <body> <!-- Begin Content --> <div style="width:100%; height:auto; margin:0 auto;"> <img src="literacy2pointzero.com/images/03.jpg"; style="display:block; width:auto; height:100%:" alt="Holiday Wishes" /> </div> <!-- End Content --> </body> </html>
Try giving these properties.
Style="Max-width:100%;width:100%\9;height: auto;"
It will make the image shrink and resize to its max size.
try this with your image
<img src="http://www.literacy2pointzero.com/images/03.jpg" style="max-width:100%; height: auto;" width="100%" height="auto" alt="Holiday Wishes" />
but the problem might be your viewport tag. Try this one:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Without more info, below is best I can do. It is based off a similar issue in Outlook. It may not work though depending on how your sending email client renders the width property of an image (e.g. Outlook removes percentages and creates a defined value regardless of what you have in the HTML).
First - use a table, it is more stable in email clients. Second by having 3 columns with a defined middle one, you are able to fake the CSS max-width style allowing it to shrink to screen size, but never go past what was defined in the TD tag. ALSO make sure to add the full URL when referencing src or href in emails.
See below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>Best Holiday Wishes</title>
</head>
<body> <!-- Begin Content --> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td width="600" align="center"><img width="100%" src="http://www.literacy2pointzero.com/images/03.jpg"; style="display:block;" alt="Holiday Wishes" /></td>
<td></td>
</tr>
</table> <!-- End Content --> </body> </html>

input text field with long text increases table cell in IE7

I have a table in which the second column should have a certain width (50px for example).
When I have a textbox with a width of 100% in this column, but with a lot of text, the width of the column is always as long as the text.
see my code + screenshot
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td style="width:50px;"><input type="text" value="very long text which doesn't fit into the whole textbox" style="width:100%" />
</td>
</tr>
</table>
</body>
</html>
How can I force the column to be 50px long in IE7?
You may achieve this by using IE conditional comments as follows
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>
.myInput{width: 100%;}
</style>
<!--[if IE 7]>
<style>
.myInput{width: 50px;}
</style>
<![endif]-->
</head>
<body>
<table border="1">
<tr>
<td></td>
<td style="width:50px;"><input class="myInput" type="text" value="very long text which doesn't fit into the whole textbox"/>
</td>
</tr>
</table>
</body>
</html>
I have checked this on IE tester as and looks fine. Hope this helps!

Internet Explorer renders element’s width incorrectly

I hope that this is just a bad dream, but when I measure the width of both element in Photoshop, I get an incorrect size.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>* { margin: 0; padding: 0; border: 0: border-collapse:collapse;}</style
</head>
<body>
<table width="129" border="0" cellpadding="0" cellspacing="0" style="width:129px; height:18px;background-color:black;">
<tr>
<td> </td>
</tr>
</table>
Renders above table as 134 pixels
<br/>
<div style="width:29px;height:18px;background-color:Black;"></div>
​
Renders above div as 30 pixels
</body>
</html>
Is your browser zoom level 100%? Tested with IE7/8/9 the measurements match to 129px and 29px but zoomed in one level (105%) they become as you mentioned 134px and 30px.