Solved

How can I get these fields to line up correctly?

Posted on 2013-06-25
2
228 Views
Last Modified: 2013-06-25
Head out to http://countryshowdown.com/. At the very top, you'll see two fields where a user can login. In Safari it looks fine, but in IE, the Password field is a little bit above the username field.

It's a small thing, but it's bugging me and I've tried several things to get them to line up to no avail.

What am I missing? What can I do to get these to line up correctly?

Here's my html:

<table cellspacing="1" cellpadding="1" border="0">
		<tr>
		<td align="left">&nbsp;<form action="contestants_validate.php" method="Post"><input type="text" name="email" class="login_box" value="username"></td>
		<td><input type="password" name="password" class="login_box" value="username"></td><td><input type="image" src="images/new_login_button.jpg" border="0" 
		name="submit"></td>
		</tr></table></form>

Open in new window


...and here's my stylesheet as far as the "login_box:"

input.login_box{
   border:0px;
  width:109px;
  height:21px;
  font-size: 10px;
  color: #cccccc;
  display: inline;
}

Open in new window

0
Comment
Question by:brucegust
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39276517
Fix your HTML.
You cannot open a form in a td then close it after the table closing tag - move the opening form before the opening table tag.
0
 

Author Comment

by:brucegust
ID: 39276692
That did it, Gary!

Thanks!
0

Featured Post

ScreenConnect 6.0 Free Trial

Want empowering updates? You're in the right place! Discover new features in ScreenConnect 6.0, based on partner feedback, to keep you business operating smoothly and optimally (the way it should be). Explore all of the extras and enhancements for yourself!

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

831 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