Forum Moderators: not2easy
I have text boxes placed within DIVs that serve as bounding boxes. These, in turn are placed within TABLE cells. The TABLE consists of four columns--label, text, label, text. I want the text boxes to stretch to 100% of the width of the DIVs with some margin around each for display purposes; however, the text boxes always seem to exceed the length of the DIVs when set to a width of 100%.
This problem expresses itself in IE7 and Firefox 1.5, but Opera9 appears to handle eveything as I would expect. In my included code I have attempted to simplify it to a few basic lines in order to illustrate the problem. I have excluded the use of a TABLE here since the problem exists without one. Notice the text box is larger than the DIV (high-lighted in blue for visibility). Why is this? Should it not be the same width?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#container{width:100%;height:100%}
#cell{background-color:blue;position:relative;height:75px;width:50%}
#data{display:block;border:solid 1px black;position:absolute;left:0px;top:0px;width:100%}
</style>
</head>
<body>
<div id="container">
<div id="cell">
<input id="data" type="text" name="first_name" maxlength="50">
</div>
</div>
</body>
</html>
First of all ...
Total width of an element = element width + padding + border
Your #data element is 100% wide (= width of the blue #cell). On top of that, input elements by default have padding. Then, you have a border.
So, taking that into consideration, here is your example with a few modifications (line-wrapped for clarity):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#container {
width: 100%;
height: 100%;
}
#cell {
background-color: blue;
position: relative;
height: 75px;
width: 50%;
}
#data {
background-color: red;
border: none;
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
padding-left: 0;
padding-right: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="cell"><input id="data" type="text" name="first_name" maxlength="50"></div>
</div>
</body>
</html>
I hope that explains the "problem" and answers your question. :)
[edited by: DrDoc at 10:17 pm (utc) on June 19, 2007]
Things were easy enough with just a DIV and an INPUT, but with TABLEs thrown into the mix I'm not exactly sure how I can compensate yet still preserve my look without resorting to pixel-widths, which I am trying to avoid. Below I've included code that is much closer to my actual situation. The table labeled "legacyLayout" mimics the old header designed by someone before me. I don't yet have permission to modify that header so I'm stuck with it; I'm not a fan of using tables to lay out the entire page (although I like them for forms).
Forgive me, the code snippet is a bit long:
[PRE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
background-color: white;
font-family: arial, helvetica;
font-size: 10pt;
}
#appTable {
border:solid 1px #bebebe;
table-layout:auto;
width:100%;
}
#tableHeader {
text-align:left;
background-color:#003366;
color:White;
font-family:Arial, Helvetica, Verdana, Geneva, sans-serif;
font-size:85%;
padding-left:2px;
padding-right:2px;
}
#dataCellHeader {
text-align:left;
background-color:#bebebe;
color:Black;
font-family:Arial, Helvetica, Verdana, Geneva, sans-serif;
font-size:85%;
padding:4px 4px 4px 4px;
}
#dataCell {
background-color:#e5e5e5;
font-family:Arial, Helvetica, Verdana, Geneva, sans-serif;
font-size:85%;
padding:4px 4px 4px 4px;
text-align:left;
vertical-align:center;
}
.dataInput {
font-family:Arial, Helvetica, Verdana, Geneva, sans-serif;
font-size:95%;
width:100%;
}
</style>
</head>
<body>
<table id="legacyLayout" align="center" width="550" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="appTable" cellspacing="1">
<tr>
<th id="tableHeader" colspan="4">
<span>Table Header 1</span>
</th>
</tr>
<tr>
<th id="dataCellHeader" style="width:18%">
<span>Header 1</span>
</th>
<td id="dataCell" style="width:32%">
<input class="dataInput" type="text" maxlength="50">
</td>
<th id="dataCellHeader" style="width:18%">
<span>Header 2</span>
</th>
<td id="dataCell" style="width:32%">
<input class="dataInput" type="text" maxlength="50">
</td>
</tr>
<tr>
<th id="dataCellHeader" style="width:18%">
<span>Header 3</span>
</th>
<td id="dataCell" style="width:32%">
<input class="dataInput" type="text" maxlength="50">
</td>
<th id="dataCellHeader" style="width:18%">
<span>Header 4</span>
</th>
<td id="dataCell" style="width:32%">
<select class="dataInput">
<option value="NULL">--Select One--</option>
</select>
</td>
</tr>
<tr>
<th id="dataCellHeader" style="width:100%" colspan="4">
<span>Header 5</span>
</th>
</tr>
<tr>
<td id="dataCell" style="width:100%" colspan="4">
<textarea class="dataInput" rows="5" cols="50" name="description"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[/PRE]
I generally use the same set of percentage-widths for my TABLE cells throughout the various forms, although there is a degree of variety depending on the number of columns and the content. Opera9 displays the INPUT boxes more-or-less correctly, but in IE7 and FireFox 1.5 they are cut off. Despite using almost-strict rules it would seem there is still some difference between the three. Obviously, I'm still learning things as I go, but this has been a particular pain. Can I keep percentage-widths for the INPUT boxes yet still keep the look-and-feel or will I have to resort to pixel-widths instead?
Similarly, his problem didn't show up until he tried to use a DOCTYPE, which is what also happened to me. He also notes that only text boxes and text areas seem affected (not select boxes); that is, an extra bit of lenth is added onto these boxes. This also matches my situation. Unfortunately, he was never given a real reason as to why this is happens--padding and margin was ruled out.
He is told to compensate by ensuring that the total width matches the width he desires. This is easier when using pixels to define widths, but I want to use percentages; however using them to define margin will cause the amount of margin to vary depending on the length of the table cell, which really doesn't help me. Is there no elegant way to have text boxes that stretch to the length of the table cell containing them, yet still have about 4 pixels of margin around them?
