Solved

HowTo: Nicely align input elements within a table?

Posted on 2006-11-16
6
175 Views
Last Modified: 2013-11-19
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</option>
          <option value='deu'>Germany</option>
          <option value='uk'>United Kingdom</option>
          <option value='us'>United States</option>
        </select>
      </td>
    </tr>
  </table>
</form>
</body>
</html>
0
Comment
Question by:HonorGod
  • 3
  • 2
6 Comments
 
LVL 28

Accepted Solution

by:
gamebits earned 128 total points
ID: 17962130
Try

input {
  width            : 95%;

and see if you like it better.

Gamebits
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 17962234
Yea, that was basically my only solution too, and it's pissin me off.  Perhaps gamebits knows why the thing appears to hang over the edge.  I noticed I was thinking of the cellspacing as a border, which it isn't.  

...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?"
0
 
LVL 41

Author Comment

by:HonorGod
ID: 17962294
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
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 12

Assisted Solution

by:jessegivy
jessegivy earned 128 total points
ID: 17963360
>>I still have lots to learn.
don't we all!

I've been writing HTML for over a decade and I'm stumped.  ...Ultimatly I guess, it's just that the folks who design these objects, just do it differently and problems arise.  It seems that the border for the select element is somehow built into the element, and doesn't take up additional screen retail.  Check out this sample code, all I did was get rid of the border and the things line up!!  So, I suppose it's just a matter of how they're rendered.

<!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%;
border:0;
  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='20%' align='right'>City</td>
      <td width='80%'>
        <input type='text' id='user' size='5'>
      </td>
    </tr>
    <tr>
      <td align='right'>Country</td>
      <td>
        <select id='country'>
          <option value='aus'>Australia</option>
          <option value='deu'>Germany</option>
          <option value='uk'>United Kingdom</option>
          <option value='us'>United States</option>
        </select>
      </td>
    </tr>
  </table>
</form>
</body>
</html>

...hope this helps in some way, though I can't really imagine how it would?  btw, your html is written perfectly, very easy to read.  Sometimes we have to accept that there are just things in this game that we're gonna have to deal with in one way or another, occasionally, it's a necessity to use the "hack" and as long as it works, there's really no harm.

~Jesse
0
 
LVL 41

Author Comment

by:HonorGod
ID: 17964795
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.

0
 
LVL 41

Author Comment

by:HonorGod
ID: 17972930
Thanks for the help guys.  I guess I'll have to be satisfied with at hack... (sigh)
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
send keys not working in vba 7 58
How can I convert HTML files to .pdf files? 9 53
HTML Display Current Year 5 26
HTML5 frame 5 25
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question