Internet Explorer renders element’s width incorrectly - html

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.

Related

Why is there extra white space at the top of my html email?

I'm trying to write an HTML email. When I run it in Chrome it is at the top of the page, but when I send it in an email there is a lot of white space at the top. Also, it looks very different in yahoo mail and in gmail. Can somebody tell me why? Thanks.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important !important;}
</style>
<![endif]-->
</head>
<body style="margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#ffffff;" >
<center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;" >
<div style="max-width:600px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;" >
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<![endif]-->
<table align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;Margin:0 auto;width:100%;max-width:600px;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
<table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
<tr>
<td style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;width:100%;text-align:left;" >
<p style="Margin:0;font-weight:bold;font-size:24px;Margin-bottom:10px;" >Your word for the day</p>
<p style="Margin:0;font-size:14px;Margin-bottom:10px;" >Word in Tajik: Word in English</p>
<p style="Margin:0;font-size:14px;Margin-bottom:10px;" >Part of speech: </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>

I had the same problem with Gmail: a lot of blank space at the beginning of the email.
For me the solution was to minify the content before body tag. I minified the content using https://www.willpeavy.com/tools/minifier and it worked.

Looks like you need more of a CSS reset for your email. One rule isn't enough :(
Here is the reset I use in my own emails. This should eliminate the extra space at the top in most clients (Still gonna get a little space in Win Outlook, nothing we can do about that) and negate a few random breakages in clients.
The code is commented so you know what rules do what.
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
</head>
Full code is on GitHub if you want to dive deeper.

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!

Table with 100% height row and Internet Explorer 9

I have the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
<TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
<TD style="height:100%;background-color:yellow">
<TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</html>
It works fine using Chrome, Firefox or Internet Explorer in quirks mode but IE9 in standard mode draws a textarea with same height as root div. So is there a way without using JS, to tell browser to draw a textarea using all remaining space?
I tried unsuccessfully div with float attributes, div with display table attribute, div with fixed position attribute. Of course, with Javascript or if the first row has a constant known height, there are several working solutions.
Any suggestions?

As far as I know, Internet Explorer looks up to the first parent element that has hasLayout triggered to calculate the 100% height. This is different from most other browsers. Documentation on Internet Explorer's hasLayout property:
To begin with, there are two sets of elements.
Elements that rely on a parent element to size and arrange their contents
Elements that are responsible for sizing and arranging their own contents.
In general, elements in Internet Explorer's Dynamic HTML engine are not
responsible for arranging themselves. A div or a p element may have a
position within the source-order and flow of the document, but their
contents are arranged by their nearest ancestor with a layout
(frequently body). These elements rely on the ancestor layout to do
all the heavy lifting of determining size and measurement information
for them.
Note: The element that is responsible for sizing and positioning an element may be an ancestor, not just the element's immediate parent.) The major benefits of each element not having its own layout are performance and simplicity.
A quick way to solve your problem could be to add a wrapper div element within your td, which mimics the size of the td but because of it's nature triggers hasLayout (not tested, jsFiddle on IE8 Compatibility is broken):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
<TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
<TD style="height:100%;background-color:yellow">
<div style="height: 100%; width: 100%; position: relative;">
<TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
</div>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</html>

Do you require the height:150px; property on you DIV, if not move it to the TABLE:
See here for JSFiddle:
<DIV style="background-color:#AAAAFF;overflow:auto">
<TABLE style="height:150px;width:300px">
<TR>
<TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
<TD style="height:100%;background-color:yellow">
<TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
</TD>
</TR>
</TABLE>
</DIV>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Example</title>
</head>
<BODY>
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
<TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="height:100%">
<TD style="height:100%;background-color:yellow">
<TEXTAREA style="height: 100%; width: 100%; -moz-box-sizing: border-box; border: 0pt none; padding: 0pt; margin: 0pt;">Remaining space (150px with IE9, 122px with others)</TEXTAREA>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</html>

Maybe this code help you...
I test it at jsfiddle: http://jsfiddle.net/mHTTM/5/
In IE, if you wearing 100 percent in child tag, width/height will be the same as the top parent tag's width/height. Not the parent tag. So you just need to change child tags from percent to pixel.
<DIV style="height:150px;background-color:#AAAAFF;overflow:auto">
<TABLE style="height:100%;width:300px">
<TR>
<TD style="background-color:orange">Text with an unknown height (22px here)</TD>
</TR>
<TR style="auto">
<TD style="height:122px;background-color:yellow">
<TEXTAREA style="height:100%;-moz-box-sizing:border-box" COLS=30 ROWS=4>Remaining space (150px with IE9, 122px with others)</TEXTAREA>
</TD>
</TR>
</TABLE>
</DIV>

I don't think you should be using tables for layout in the first place. Switch over to <div>, <span> and the HTML5 sets of containers.

Fluid height in Internet explorer

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>

unwanted space before and after nested html table using Internet Explorer 8

I have an html table nested in an html table cell. I want the nested table to use the full size of the cell it is nested in. When I use firefox or google chrome I get the result I want but when I use Internet Explorer 8 (even if I use td style="height="100%") the height of the nested cell depends on it's content. As a result I get whitespace before and after my nested table. Here is a simple html that will reproduce the problem.
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table, td, th {border:#000 medium solid}
</style>
<body>
<table>
<tr>
<th style="margin:0;padding:0;height:100;">
<table><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>

Here is your problem, you have specified <th style="margin:0;padding:0;height:100;"> in inline CSS style for you th inside your main table.
This should solve you problem, try using height:100%; instead.
EDIT:
To get rid of you extra space that requires in IE8 to scroll down you page, you can remove you border and add cellpadding="0" cellspacing="0" to you main table.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body, html, table{
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
</style>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<th style="margin:0px;padding:0px;height:100%;">
<table><tr><th>nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>

Using attached code worked for me for both IE and FF but had to remove the borders as they are handled differently by IE and FF
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr>
<th style="margin:0;padding:0;height:100%;">
<table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>

In your <th>, you have "height:100;" instead of "height:100%;" - missing the "%"

<th style="margin:0;padding:0;height:100%;">
instead of
<th style="margin:0;padding:0;height:100;">

try just adding th{height:100%} to your css style