• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 236
  • Last Modified:

Do forms screw up table heights?

I have a one-row, one-column table that is defined to be 20px high.
I insert a login form into that table (some text, two fields, and a button). I use styles from my style sheet and everything looks like it should easily fit within the 20px height limit.
But when I preview in browser, the height is greater than 20 ... maybe about 30px ... and there is lots of "empty" vertical space at the bottom of my row.
WHY?
Here's the code:

<table width="800" height="20" border="0" cellpadding="0" cellspacing="0" bgcolor="#990000">
  <tr>
    <td width="607"  class="menubarSelected">
      <form id="frmLogin" name="frmLogin" method="POST" action="<cfoutput>#MM_loginAction#</cfoutput>">
      MEMBERS LOGIN HERE: <img src="images/gifs/1x1inv.gif" width="5" height="1" />
        Email
        <input name="username" type="text" class="smalltext" id="username" />            
        <img src="images/gifs/1x1inv.gif" width="3" height="1" />
            Password
            <input name="password" type="text" class="smalltext" id="password" />
            <img src="images/gifs/1x1inv.gif" width="3" height="1" />
            <input name="Submit" type="submit" class="darktextbutton" value="Login" />
      </form>  
      
      </td>
  </tr>
</table>
0
alicia1234
Asked:
alicia1234
  • 12
  • 10
  • 2
4 Solutions
 
Jason C. LevineNo oneCommented:
Hi alicia1234,

Firefox displays the code correctly, so you are faced with an IE-specific issue here.  Is this page live somewhere so I can see  it with the images and CSS in place?
0
 
alicia1234Author Commented:
No, it's not live anywhere yet ... sorry.
0
 
Jason C. LevineNo oneCommented:
Can you post the CSS for .menubarSelected?

Does this have to be a table or can you make it a div tag?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
alicia1234Author Commented:
Code for .menubarSelected is:
.menubarSelected {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: normal;
      color: #FFCC66;
      text-decoration: none;
      vertical-align: middle;
      font-style: normal;
      background: #990000;
}
I don't know if it has to be a table or not! I'm open to suggestions. I don't really know what the <div> tag does.
;-(
0
 
Jason C. LevineNo oneCommented:
Well, I don't want to get into a big, long, confusing tangent.  Apparently IE doesn't like form tags inside of a td tag and adds the whitespace.  To fix it, move the form tags outside of the table or tr tag:

<table width="800" height="20" border="0" cellpadding="0" cellspacing="0" bgcolor="#990000">
  <form id="frmLogin" name="frmLogin" method="POST" action="<cfoutput>#MM_loginAction#</cfoutput>"><tr>
    <td width="607"  class="menubarSelected">
     
      MEMBERS LOGIN HERE: <img src="images/gifs/1x1inv.gif" width="5" height="1" />
        Email
        <input name="username" type="text" class="smalltext" id="username" />          
        <img src="images/gifs/1x1inv.gif" width="3" height="1" />
          Password
          <input name="password" type="text" class="smalltext" id="password" />
          <img src="images/gifs/1x1inv.gif" width="3" height="1" />
          <input name="Submit" type="submit" class="darktextbutton" value="Login" />
     
     
     </td>
  </tr></form>
</table>

------------------------

As far as tables vs. divs, you should read up on using CSS and the div tag to layout sites instead of tables.  You get a much better measure of control over elements and divs allow you to degrade gracefully to printers and handhelds.  Browse the CSS and HTML TA's here for an overview and if you wish, I'll provide some tutorial links.  This is the new direction for web design and you ought to at least be familiar with it if you design sites.
0
 
alicia1234Author Commented:
I thought it might have something to do with the form inside a <td> tag.
I'll try it out ...
and I'll check into the div thing when I have a chance. I'm building a commercial site for myself only ... this isn't going to be a long-time thing.
0
 
alicia1234Author Commented:
Ok, so moving the form outside the <td> tag did help and it does look better. BUT ... now I need to get the height of my text field boxes down ... I tried assigning them my "tinytext" style, but they don't change.
0
 
alicia1234Author Commented:

.tinytext { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:normal;
color:#000000;
padding:5px;
line-height:normal;
}
0
 
Jason C. LevineNo oneCommented:
Post the whole CSS and HTML again, please.  
0
 
Jason C. LevineNo oneCommented:
Whoops, never mind.
0
 
alicia1234Author Commented:
<table width="800" height="20" border="0" cellpadding="0" cellspacing="0" bgcolor="#990000">
<form id="frmLogin" name="frmLogin" method="POST" action="<cfoutput>#MM_loginAction#</cfoutput>">
  <tr>
    <td width="607"  class="menubarSelected">
      
      MEMBERS LOGIN HERE: <img src="images/gifs/1x1inv.gif" width="5" height="1" />
        Email
        <input name="username" type="text" class="tinytext" id="username" />            
        <img src="images/gifs/1x1inv.gif" width="3" height="1" />
            Password
        <input name="password" type="password" class="tinytext" id="password" />            
        <img src="images/gifs/1x1inv.gif" width="3" height="1" />
            <input name="Submit" type="submit" class="darktextbutton" value="Login" />
            </td>
  </tr>
  </form>
</table>
0
 
Jason C. LevineNo oneCommented:
Alicia,

Add the following to any class inside of the table to restrict the height of the element to 20 pixels:

      height: 20px;

So it should be added to menubarSelected, tinytext, and darktextbutton.

Changing the font for input elements doesn't normally affect the box height.
0
 
alicia1234Author Commented:
I did add the height:20px; to the three styles and it made the text field boxes even bigger.
So I set the height on tinytext to be 5px ... go figure: that worked.
I don't understand it, but I have a solution.
Thanks.
0
 
Jason C. LevineNo oneCommented:
Actually, it increased in size due to other reasons.  INPUT tags are treated very differently by IE and FireFox and you have to set a lot of CSS options get the control you want.  

At a minimum, the CSS would look like this:

.tinytext {
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      color:#000000;
      height: 20px;
      margin: 0px;
      padding: 0px;
      line-height: 20px;
}

That may not get it down to 20 pixels in both IE and FF...you would have to reduce it even further as you discovered.
0
 
siva350Commented:
try adding this style in your head or copy the class into your stylesheet

<style type="text/css">
<!--
form {
      margin: 0px;
      padding: 0px;
}
-->
</style>
0
 
alicia1234Author Commented:
jason: it turns out that the margin setting makes a difference; I didn't have it before. So with margin:0px; I can set the line-height to 20px and it all looks ok.
NOW the problem is that my "login" button looks like it has a vertical alignment of "bottom" instead of "middle". Any suggestions for that one?
0
 
Jason C. LevineNo oneCommented:
Yes, change its style so that it has a vertical-align: middle in it.
0
 
siva350Commented:
Add this line to your td tag
valign="middle"
0
 
alicia1234Author Commented:
OK ... here are my three styles:

.darktextbutton {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight:normal;
      color: #FFCC66;
      text-decoration:underline;
      background-color: #990000;
      padding:0px;
      line-height:normal;
      border:none;
      height:10px;
      vertical-align:middle;
}
.menubarSelected {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      font-weight: normal;
      color: #FFCC66;
      text-decoration: none;
      vertical-align: middle;
      font-style: normal;
      background: #990000;
      height:20px;
}
.tinytext { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight:normal;
color:#000000;
padding:5px;
line-height:normal;
height:10px;
margin:0px;
vertical-align:middle;
}

It looks "pretty good" ... BUT ... the text boxes are still a bit taller than I would like, and the "Login" text has the bottom of the "g" cut off! Yikes this should be easier!!!
0
 
alicia1234Author Commented:
Oops ... .darktextbutton had height = 10px; changed it to 20px and now login is no longer cut off.
I do have to keep .tinytext at height = 10px though ... with 20 though ... I found out that this is because I hve padding set to 5px ... to 2*5x for padding is 10px; plus the height of 10 gives a total of 20px. (I'm using IE 6).
0
 
alicia1234Author Commented:
Thanks jason.
0
 
Jason C. LevineNo oneCommented:
You're welcome.  Somewhat of a rude introduction to CSS style interaction, wasn't it?
0
 
alicia1234Author Commented:
I'll say! I definitely need to read up on it ... amazing that there are so many nuances. Thanks again.
0
 
Jason C. LevineNo oneCommented:
I felt the same way the first few times, but once you get the hang of it, you'll love what it can do.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 12
  • 10
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now