Can anyone suggest a reason for the table changing position on the first page using this html?
<!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>testfile</title>
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
Table {
page-break-after: always;
}
</style>
</head><body>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 1</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 1</b></td></tr>
<tr><td> </td></tr>
</table><br/>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 2</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 2</b></td></tr>
<tr><td> </td></tr>
</table><br/>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 3</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 3</b></td></tr>
<tr><td> </td></tr>
</body></html>
When you do a print preview in IE9, the table on the first page is in a different position (higher) than any of the tables on the other pages.
Can anyone see a reason for this?
Thanks
This style causes page breaks after each table:
Table {
page-break-after: always;
}
After the first and second table, you have a <br/> tag, which adds a blank line.
Therefore, your second and third tables are being pushed down by the <br/>.
You can correct this by either removing the <br/> tags or by adding a <br/> tag before the first table.
Note that br is a void element, so the "/" symbol isn't needed. You'll usually see it as simply <br>.
Update
You may also need to add this style:
body {
margin: 0px;
}
Otherwise, the margin may be applied on the first page only. This is not true for IE11, but it is true for Chrome and apparently also true for IE9.
Related
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.
I often use THEAD, TBODY, and TFOOT elements to divide my data tables into sections that can be addressed separately with CSS. I also understand that there is always an implicit TBODY tag.
What puzzles me is the order that these have to go in to validate. THIS table will validate:
<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Validation Test</title>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Enemies List</th>
</tr>
</thead>
<tfoot>
<tr>
<td>© Bomb Voyage</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Mr. Incredible</td>
<td>Elastigirl</td>
<td>Gazer Beam</td>
</tr>
</tbody>
</table>
</body>
</html>
But this one will not:
<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Validation Test</title>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Enemies List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr. Incredible</td>
<td>Elastigirl</td>
<td>Gazer Beam</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>© Bomb Voyage</td>
</tr>
</tfoot>
</table>
</body>
</html>
The valid one goes HEAD, FOOT, BODY; which does not make any sense.
Putting the foot at the bottom of the table would maintain the analogy between the table and a human body. But for some reason, this order is considered invalid.
Anyone know why?
The spec provides a reason:
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3
I don't know if any browsers actually follow this behavior, and it was changed in HTML5 to handle both the HTML 4 order and the more logical order:
In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total).
http://www.w3.org/TR/html5/tabular-data.html
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
Here's a simple web page. I would like the text as well as the image to be vertically centered in the cell. I would like the text to the left of the image, but that shouldn't be a problem...
Could you help?
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="1" style="width: 100%">
<tr>
<td class="style1">Text<img src="PdfLink.jpg" alt="Whatever"/></td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
</table>
</body>
</html>
default.css. Add to it as you see fit.
body{
font-size:12pt;
}
}
Update:
I take back some previous comments, including saying that Evan's answer worked.
The following worked. Note the "*". Evan's answer didn't include the . What does the "" mean?
.style1 * {
vertical-align: middle;
}
The asterisk means "any descendent of this class"; be careful using it, though, because it means ALL descendant elements will receive a particular style.
Note 1: Be aware that you have too many right braces in your CSS.
Note 2: Also, the other answer you received won't work if the text is bigger than the image. You didn't give a size for the image.
Because you're using a table for formatting. Simply add .style1 { vertical-align: middle }. The text should remain to the left of the image.
The following code should display table with borders around cells, but it doesn’t. Any idea why?
<head>
<meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1” />
<style type=“text/css”>
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
It works for me if you use the html tag around your text and replace your quotes with actual " or ' (you are using ” which isn't the same. Look closely ” != ")
It shows borders for me in IE6, IE7, IE8, FF3, and Chrome 3, but the borders are around each cell individually.
If you want the borders to appear connected, just add this in your style tag:
table { border-collapse: collapse; }
You're missing an opening <html> tag; is that just an accident from copy/pasting your code here? Also, fix the quotes in the meta and style tags:
<meta http-equiv="content-type"
content="text/html;
charset=ISO-8859-1" />
and
<style
type="text/css">
Adding a proper DOCTYPE is probably a good idea too, although you'll get borders to display from just making the above fixes.
For future reference, running your HTML through the W3C Validator or HTML Tidy can instantly identify issues like this.
Is this the whole document?
If it is, you might want to add a document type and html tags.
your double quotes aren't proper double quotes. try
<!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">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<head>
<style type="text/css">
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
I've only tested it on IE6 (sorry - I'm not on my machine) but I think your text editor has inserted 'smart quotes' around the double-quotes strings instead of the straight ones. It seems like just a stylistic change but it is a different character (“\” instead of "). When I replaced them it rendered the borders.