Here's a piece of code to illustrates my problem:
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
table {border-collapse:collapse;}
</style>
</head>
<body>
<table width='100%' height='100%'>
<tr>
<td>
header
</td>
</tr>
<tr>
<td valign='top' height='100%'>
<table width='100%' height='100%' bgcolor='red'>
<tr>
<td>test</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Page that I'm currently building has a header and a table below it, table must take all the vertical space available but must not exceed the screen height. Code above works fine in FF/Chrome/Safari but in IE nested table does exceeds the screen height exactly by the height of header above thus causing vertical scrollbar which is an undesired behavior.
How can this be fixed?
IE is not good about calculating heights in tables. In this case, it's setting the cell height to 100% of the body and html rather than its parent container.
Easiest thing to do, but also an ugly hack, is to put
<!–- For Internet Explorer -–> on a line above <!DOCTYPE HTML>
This will force IE into quirksmode and should render properly for your case. You may have to restart IE rather than simply refresh the page after adding the comment.
Change
html, body {height:100%;margin:0;padding:0;}
to
html, body {height:100%;margin:0;padding:0; overflow-y: hidden;}
It will remove the vertical scroll-bar from the IE (or any web browser)
Related
I’m going through the horror of trying to make HTML e-mail templates that look acceptable in Outlook, and quickly nearing the point of hara-kiri.
I have a basic table setup: three columns, with all content in the middle one. The columns on the side are just there to give spacing. The table has a width of 100% so it takes up the entire width of the reading window. So essentially this (with all the Outlook-specific crud left out):
<table>
<tbody>
<tr>
<td class="leftsidespacer"></td>
<td class="maincontent">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer"></td>
</tr>
</tbody>
</table>
In any normal e-mail client, this is a piece of cake. You set a width on the middle column and that’s pretty much it. Outlook 2007 (and probably other versions) instead collapses all three columns so the middle column takes up 100% of the body width. Basically, setting a width on a table cell has no effect.
All right, so I fall back on really old-time ways of adding an image in the empty cells to force them to have some width. Ugly and stupid, but at least it sorta-kinda works.
The problem I’m facing now, which I mysteriously cannot find anyone even mentioning online, is that any element that I put inside a td always ends up being 100% of the width of the cell and the height of the content, no matter what I do.
The div with the class thisisabox in the example above, for example, always ends up being just one line of text in height and 100% of the table cell, even if I define it thus:
<div width="200" height="200"
style="display: block;
width: 200px;
height: 200px;
background: red;">
Everything in me screams that this should produce a 200 × 200 pixel red box, but it doesn’t. It just gets ignored completely.
As far as I can tell, there is nothing in my styles which ought to have any influence on this. The entirety of the styles declarations I have for the bits in the HTML snippet above is this:
table {
width: 100%;
margin: 0;
padding: 0;
}
table, tr, td {
border-collapse: collapse;
}
td {
padding: 35px 0;
border: 0;
}
(It gets inlined and HTML-attributified by the Premailer API before sending, so it’s not because the styles are only declared in the head.)
Is there some way of making Outlook notice specified width and height of elements inside a table cell?
Or am I missing something really obvious that’s making Outlook behave in this infuriating way?
Outlook does not work with div and it in some instances ignores padding.
https://www.campaignmonitor.com/css/box-model/padding/
The way to fix this is simple and it will work with every email client:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<table width="200" height="200" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="leftsidespacer" width="30"></td>
<td class="maincontent" width="140">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer" width="30"></td>
</tr>
</tbody>
</table>
</body>
</html>
I would create a style sheet and add the values which will be picked up by most modern email clients, but Outlook desktop versions like 2007-2016 require a few inline aids to function properly.
Edit: Base table in Outlook 2007
This is the base table in Outlook 2007 with no extra css that I posted above:
This image came out of Litmus.
I only used the code I posted above. If you are not seeing this, something in your CSS or HTML is causing an issue.
Good luck.
Here is something you can try.
Code:
<table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000">
<tbody>
<tr>
<td height="200"></td>
<td valign="top" style="color:#ffffff;">
All content here
</td>
</tr>
</table>
Result in Outlook version 1803 (tested: 20/04/2018)
What I have done is added a height to the table element as well as one of the cells. You can either populate the left column with a spacer image or keep it as it is.
Note: You can make do without the left column if you wish but do add the height
Hope this is the answer you were looking for.
My SVG images work fine on all browser, except IE (surprise...).
Here is my test page: http://plnkr.co/edit/qmv9G3DGRlqDdi9ww58O?p=preview
As you can see, the first svg is displayed OK (even in IE), but the next two are not. They scale down to a container (table -> tr -> td in this case).
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
/* this will be applied to the images */
.smallicon {
width: 16px;
padding: 5px;
}
</style>
</head>
<body>
<p>
Problem exists in Internet Explorer only
<br> This is fine:
</p>
<object class="smallicon icon-white" data="http://konradpapala.beep.pl/test/040__file_delete.svg" type="image/svg+xml"></object>
<table>
<thead>
<tr>
<th>This is not OK, unless we add style = 'width:20px;height:20px' to the td tag, BTW "normal" images, like .png work fine</th>
<th>This doesn't work either:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class='smallicon' src='http://konradpapala.beep.pl/test/040__file_delete.svg'>
</td>
<td>
<object class='smallicon' data = 'http://konradpapala.beep.pl/test/040__file_delete.svg' type="image/svg+xml"></object>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Any ideas?
BTW, I know this question is already there and is answered ( SVG in img element proportions not respected in ie9 ), however, the solution simply doesn't work - I don't have width and height specified in my SVG files, while I do have a viewbox specified.
Unfortunately IE doesn't seem to handle the scaling of SVGs correctly when the size is unspecified. Other browsers default to a size of 300x150 when they can't otherwise determine what the intended size is. IE does not.
You therefore have to specify a width and height for your SVG. If not in the SVG itself, then in the <img> or <object> that references it.
This sample code doesn't work as expected in IE 10 (the inner table don't get the remaining space). I take off .css and other elements to just highlight my question.
I would like to take the inner table to get all space between the 50px line of top and the 30px line of bottom. In another doctype it's work but I must work with this doctype in my project.
<!DOCTYPE html>
<html style="height: 100%">
<body style="height: 100%">
<table style="height: 100%">
<tr style="height: 50px">
<td>
</td>
</tr>
<tr>
<td>
<table style="height: 100%; background: #f00">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr style="height: 30px">
<td>
</td>
</tr>
</table>
</body>
</html>
Actually this does not work in IE9 as well. It is not a bug, it is an expected behavior of IE's rendering engine.
Your inner table is not stretched because it ignores height:100%. This is because DOM element must have immediate parent with specified height CSS property in some units (height: auto is not counting). If you specify height on TD (parent of inner TABLE), than it will work. But you cannot specify height: 100%-50px-30px for TD, so this markup is bad for layout you want to achieve.
Your layout is a clasic header-body-footer with fixed heights of header and footer and automatically stretched body. This is a very popular layout in the web. There are a lot of ways to make it work cross-browserly (IE, Chrome, Firefox, Safari).
My favourite option to make it work cross-browserly (including IE7):
Use three DIV's, for header and footer specify height explicitly, and for body make position:absolute; top:<header-height>; bottom:<foooter-height> . Also all three DIV's are needing to be wrapped in one absolutely positioned container.
Here is an example:
<table>
<tr>
<td width="400px" id='myTD'></td>
</td>
</table>
here is the external code:
protected string GetHtml()
{
return "<table><tr><td width="800px"></td></tr></table>";
}
Since the width of 'myTD' is smaller than the width of the external code the displayed code is getting out of the main table boundaries , I dont want the innerHTML of 'myTD' to make the main table wider.
Suffice to say that as the external HTML code is given from outside I can't change it without ruin it as I'll never know which width or heights will be essential for the code and which wouldn't.
This wasn't easy in a way that's compatible with all browsers, but I did come up with this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#myID {width:400px; overflow:scroll}
</style>
</head>
<body>
<table>
<tr>
<td><div id='myID'>
<table><tr><td width="800"><hr style="width:792px"</td></tr></table>
</div></td>
</tr>
</table>
</body>
</html>
(or as a jsFiddle). That is, by adding a new element inside your td that gets the scrollbars. Trying to apply overflow:scroll to a table cell doesn't work the same on all browsers.
Hope you can use this.
Consider a table with three rows with heights 10, *, 10. I'd like the middle cell to be high enough to fit to the page vertically. Unfortunately "height:100%" doesn't work at table, tr, or td level, possibly due to standards. Even if it happens to work, I don't want 100%, I want 100% of clientHeight-20px :) I can always write script to calculate remaining clientHeight but I wonder if it can be achieved in HTML/CSS standards.
NOTE: I'm using table just for layout, if there are other ways to lay them down in a better way I'm ok with those approaches too.
Try to leave table and use CSS.
This is the first link on google (searching: css page layout)
http://www.maxdesign.com.au/presentation/page_layouts/
You will spend more time at beginning, but then you will love CSS.
Regards,
Lorenzo.
I've tested the following in Firefox and Safari and it works although it's perhaps not the nicest solution! What you'll see is the 20 height on row1 and row3 is still applied and the 100% makes up the rest. If you leave off the padding and margin from the body you'll get scrolling.
<html>
<head>
<style>
html,body { height:100%; padding:0; margin:0; }
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 style="height:100%;">
<tr height="20" style="background-color:grey;">
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr height="20" style="background-color:grey;">
<td>row 3</td>
</tr>
</table>
</body>
</html>
Does this not work?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<!-- Date: 2009-07-13 -->
<style type="text/css" media="screen">
table {height: 100%; width: 100%;}
td {border: 1px solid #000;}
</style>
</head>
<body>
<table>
<tr height="10"><td>Data</td></tr>
<tr height="100%"><td>Data</td></tr>
<tr height="10"><td>Data</td></tr>
</table>
</body>
</html>
It does for me.
The "height: 100%" style will only work on elements that are inside an element that has the height property explicitly set. In your case, the table is likely to be inside the body tag and the body tag doesn't have a height set.
Have the same here - the simple examples above work, while my own page does not "stretch" the needed <tr> element.
What I found so far is that excluding the DOCTYPE (thus putting the browser into quirks rendering mode - even for FireFox!) makes my page behave like the simple examples, yet adding a DOCTYPE to these examples stops them from working.
I guess this is not really an answer yet, but it shows the direction in which to look further for the proper solution. Hopefully there is a way to achieve this "stretching" behaviour without the quirks mode.
EDIT: This answer worked for me. The table is wrapped into an absolutely positioned full-screen div. I guess what it does is the browser first calculates the div's dimensions, and then it knows how the table (and the tr inside it) should be sized. Works with DOCTYPE included, relieving, since I don't want to use the quirks rendering mode.