Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How can I get these fields to line up correctly?

Posted on 2013-06-25
2
Medium Priority
?
235 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 …
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…
Suggested Courses

730 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