HonorGod
asked on
HowTo: Nicely align input elements within a table?
Problem:
- The code (below), renders a trivial table with two rows.
- The text fields (column 1) render nicely, the input fields (column 2) don't.
+--------+---------------- --------+
| City| |
+--------+---------------- --------+
| Country| |
+--------+---------------- --------+
- Please note how nicely the left portion of column 2 is seperate from the
table border. For example, it looks something like the following for both
a text input field, and a selection list:
+-----
| +---
| |
| +---
+-----
- The right portion (margin?) of the input field is much less nice. In Firefox 2.0
it looks something like:
-----+
-----|
||
-----|
-----+
in IE 7, it is even worse. It looks like:
-----+
-----|
|
-----|
-----+
How do I have the right input element margin separate from the containing
table td edge?
========================== ========== ========== ========== ========== ====
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Sizing </title>
<style type='text/css'>
input {
width : 100%;
color : yellow;
background-color : blue;
font-family : Courier;
font-size : 10pt;
}
select {
width : 100%;
color : yellow;
background-color : blue;
font-family : Courier;
font-size : 10pt;
}
table {
background-color : #112233;
}
td {
background-color : #fafad2;
font-size : 9pt;
font-family : Courier;
}
</style>
</head>
<body>
<form name='myform' action=''>
<table width='20%' cellpadding='4' cellspacing='1'>
<tr>
<td width='30%' align='right'>City</td>
<td width='70%'>
<input type='text' id='user' size='5'>
</td>
</tr>
<tr>
<td align='right'>Country</td>
<td>
<select id='country'>
<option value='aus'>Australia</opt ion>
<option value='deu'>Germany</optio n>
<option value='uk'>United Kingdom</option>
<option value='us'>United States</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
- The code (below), renders a trivial table with two rows.
- The text fields (column 1) render nicely, the input fields (column 2) don't.
+--------+----------------
| City| |
+--------+----------------
| Country| |
+--------+----------------
- Please note how nicely the left portion of column 2 is seperate from the
table border. For example, it looks something like the following for both
a text input field, and a selection list:
+-----
| +---
| |
| +---
+-----
- The right portion (margin?) of the input field is much less nice. In Firefox 2.0
it looks something like:
-----+
-----|
||
-----|
-----+
in IE 7, it is even worse. It looks like:
-----+
-----|
|
-----|
-----+
How do I have the right input element margin separate from the containing
table td edge?
==========================
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Sizing </title>
<style type='text/css'>
input {
width : 100%;
color : yellow;
background-color : blue;
font-family : Courier;
font-size : 10pt;
}
select {
width : 100%;
color : yellow;
background-color : blue;
font-family : Courier;
font-size : 10pt;
}
table {
background-color : #112233;
}
td {
background-color : #fafad2;
font-size : 9pt;
font-family : Courier;
}
</style>
</head>
<body>
<form name='myform' action=''>
<table width='20%' cellpadding='4' cellspacing='1'>
<tr>
<td width='30%' align='right'>City</td>
<td width='70%'>
<input type='text' id='user' size='5'>
</td>
</tr>
<tr>
<td align='right'>Country</td>
<td>
<select id='country'>
<option value='aus'>Australia</opt
<option value='deu'>Germany</optio
<option value='uk'>United Kingdom</option>
<option value='us'>United States</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
jessegivy, that is exactly my point!
I really, really, really dislike this "work around". It really isn't a fix, it's a hack. Yuck.
I am still hopeful that someone can help me understand the "right" way to do this.
I still have lots to learn.
Can someone please explain what is actually happening, and how best to resolve this issue?
Thanks
I really, really, really dislike this "work around". It really isn't a fix, it's a hack. Yuck.
I am still hopeful that someone can help me understand the "right" way to do this.
I still have lots to learn.
Can someone please explain what is actually happening, and how best to resolve this issue?
Thanks
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Jesse:
Thanks for the compliment, and the response.
As you say, this is rendered much better in both FireFox 2.0, and IE 7. Unfortunately IE 7 still has a flaw in that the right margin of the input TD
looks something like:
------
-----
-----
-----+
which I find exceedingly strange.
Thanks for the compliment, and the response.
As you say, this is rendered much better in both FireFox 2.0, and IE 7. Unfortunately IE 7 still has a flaw in that the right margin of the input TD
looks something like:
------
-----
-----
-----+
which I find exceedingly strange.
ASKER
Thanks for the help guys. I guess I'll have to be satisfied with at hack... (sigh)
...anyway, I guess the real issue I take here is the excessive use of percentages. Have you considdered using fixed widths for your table and elements. The standard is 800X600 interface size to accomodate most resolutions. I can understand your desire to use percentages to stretch the table and have your site fill the entire screen on all machines, but ultimatly it's not entirely practical in all situations.
...or, as gamebits said, just go with 95%, but my question is "why does the select element display fine and the input doesn't?"