Table with 100% height row and Internet Explorer 9 - html

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.

Related

how to show the scroll bar of a div in a table using percentage height

I have to write a page like the following, however, the scroll bar don't show in IE 11 and FireFox. What should I do to solve the problem?
<!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" />
<title>test</title>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
first row
</tr>
<tr style="height:100%">
<td style="height:100%; width:100%">
<div style="height:100%; width:100%;overflow:auto;direction:rtl">
<div>
<table>
<%for(int i=0;i<10000;i++){%>
<tr>
<td><%=i%></td>
</tr>
<%}%>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Try this maybe you can implemented something with this style that i did.
CSS
.scroll {
height: 30%;
overflow: auto;
width: 100%;
display:block;
}
DEMO
Update DEMO
Just add overflow:auto to the CSS rule that applies to whichever element it is that you want to show the scrollbar on.
The other option is overflow:scroll but that will show the scrollbars whether or not the element needs to scroll, and it also shows both scrollbars - vertical and horizontal - all the time, whether they're necessary at the time or not. That's why I always prefer to use auto for overflow values.

In HTML, how can I make a control take up all the horizontal space of its container without overlapping the border?

Consider this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</html>
It outputs the following, and, as you can see, there is a little bit of overlap on the right hand side.
How can I change this code so that the input box will take up the entire inside space of the TD without overlapping?
Please note that I'm looking for a solution in which:
The DOCTYPE tag and html tag are as mentioned above.
The container elements' sizes are not fixed, as above.
Thank you.
Adding box-sizing: border-box on the input tag's style element solved the problem, as mentioned by JamWaffles.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table cellspacing = "10" cellpadding="0" border="1" width="100%">
<tr>
<td>
<input style="box-sizing: border-box; border-width:1px; border-style:solid; width:100%; background-color:aqua">
</td>
</tr>
</table>
</body>
</html>

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.

HTML design problem with alignment

Please consider the following code:
<!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>Sign In</title>
</head>
<body bgcolor="#DDDDDD">
<img src="images/logo.png" style="float:right; margin: 0 0 15px 15px;"/>
<div align="center">
<table border="0" width="500" style="border:groove;background:#DCD5F9">
<tr><td width="50%">User Name:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%">Password:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%"> </td> <td align="left" width="55%"> <input type="submit" value="Login"/></td></tr>
</table>
</div>
</body>
</html>
In browser I see that the <div> is not under the logo.png. Why? And how I can make it to be under the logo.png?
P.S. I would like to add that problem occured when I added the style="float:right; margin: 0 0 15px 15px;" or align="right" in <img> tag.
It's because you've added the float:right on your img which changes how the img will behave in the page flow. Forcing the div to clear content will fix your issue.
change this:
<div align="center">
to:
<div align="center" style="clear:right;">
From Wikipedia:
"A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item."

Fix height of a table row in HTML Table

Kindly look at the following code:
<!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>
</head>
<body>
<table id="content" height="525" border="0" cellspacing="0" cellpadding="0">
<tr style="height:9px"><td height="9" bgcolor="#990000">Upper</td></tr>
<tr><td bgcolor="#990099">Lower</td></tr>
</table>
</body>
</html>
IE ignores the "height:9px" and I can't get what I want.
Also, without the DOCTYPE, it works. But I have to follow the standard so that DOCTYPE cannot be removed.
Does anyone how to fix the height of the upper row?
Some clarifications:
1. The height of second row may vary according to users' action and cannot be fixed.
2. The height of the table is set to 525px so the table has a minimum height of 525px
the bottom cell will grow as you enter more text ... setting the table width will help too
<!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>
</head>
<body>
<table id="content" style="min-height:525px; height:525px; width:100%; border:0px; margin:0; padding:0; border-collapse:collapse;">
<tr><td style="height:10px; background-color:#900;">Upper</td></tr>
<tr><td style="min-height:515px; height:515px; background-color:#909;">lower<br/>
</td></tr>
</table>
</body>
</html>
my css
TR.gray-t {background:#949494;}
h3{
padding-top:3px;
font:bold 12px/2px Arial;
}
my html
<TR class='gray-t'>
<TD colspan='3'><h3>KAJANG</h3>
I decrease the 2nd size in font.
padding-top is used to fix the size in IE7.
This works, as long as you remove the height attribute from the table.
<table id="content" border="0px" cellspacing="0px" cellpadding="0px">
<tr><td height='9px' bgcolor="#990000">Upper</td></tr>
<tr><td height='100px' bgcolor="#990099">Lower</td></tr>
</table>