Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5518
  • Last Modified:

How do I center-justify form elements using CSS?

Hello,

I'm building a form off of a design that requires the text input and textarea elements all be center justified. I've posted a sample here:

http://www.outshinehosting.com/form/form.html

I'm on a PC. Everything looks great in Firefox and IE. In Safari/PC, the "Last Name" text input extends a couple of pixels too far, and the "Message" textarea doesn't extend far enough. I'm assuming this means the form is probably not perfectly justified on Mac/Safari or Mac/Firefox, either.

My question: Is it possible to have all the form elements be perfectly justified on all browsers? Will I have to do browser detection and create several different stylesheets to accomplish this?

Thanks for your time!
0
Spiderstave
Asked:
Spiderstave
  • 3
  • 3
1 Solution
 
myderrickCommented:
I have tried and tried and I can't find anything wrong.

Can you attach a screen shot?

MD
0
 
myderrickCommented:
Probably you can specify a width for the table which holds the Name

MD
0
 
SpiderstaveAuthor Commented:
Hello myderrick,

Thank you for your reply.

I'm attaching an image that illustrates the problem. As you can see in the image, in Firefox and Internet Explorer all form elements align perfectly on the right side, but in Safari the "Last Name" text input goes 1 pixel too far, and the "Message" textarea input does not go far enough (by about 4 pixels.)

I'm not too concerned about it looking perfect in Safari/PC, but the client will be testing on Safari/Mac and Firefox/Mac, and I'm assuming that if it's not looking right in Safari/PC, it won't look right in Safari/Mac, either.

It looks like if I want all form elements to align perfectly I'm going to need to do browser detection and write out different CSS for each browser, but I wanted to post a question to see if any CSS experts out there knew of a way to achieve the same effect without the trouble of browser detection.

Because this appears to be a difficult question, I've increased the point value to 500. I'm also including my markup below.

Thanks for any tips!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Test</title>
 
<style>
 
html,body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
 
input, select, table, textarea
{
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
}
 
input.text
{
	position: relative;
	top: -0.2em;
	width: 20em;
}
 
input.name
{
	position: relative;
	top: -0.2em;
	width: 9.7em;
}
 
textarea
{
	position: relative;
	top: -0.2em;
	width: 20em;
	height: 10em;
}
 
 
label
{
width: 10em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
padding-top: 3px;
}
 
.submit input
{
	margin-left: 24.5em;
}
 
#nav{
	height: 26px;	
	background: #7ccbf3 url(navigation-bg.png) repeat-y center;
}
 
#nav .navitems{
	text-align: center;
}
 
#nav .item{
	color: #ffffff;
	text-align: center;
	width: 100px;
	height: 26px;
}
 
#nav .item:hover{
	color: #cccccc;
	background-color: #0099FF;
}
 
 
 
</style>
 
</head>
 
<body>
 
<form action="#">
<p><label for="businessname">Business Name</label> <input type="text" class="text" id="businessname" /></p>
<p><label for="firstname">Your Name</label></p>
<p><table cellpadding="0" cellspacing="0" border="0">
	<tr>
    	<td>
			 <input type="text" class="name" id="firstname" />&nbsp;
        </td>
        <td>
        	<input type="text" class="name" id="lastname" />
        </td>
    </tr>
    <tr>
    	<td>
        	First Name
        </td>
        <td>
        	Last Name
        </td>
    </tr>
</table>
<p><label for="email">Email Address:</label> <input type="text" class="text" id="email" /></p>
<p><label for="message">Your Message</label> <textarea id="message"></textarea>
<p class="submit"><input type="submit" value="Submit" /></p>
</form> 
 
</body>
</html>

Open in new window

form-screenshot.gif
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
SpiderstaveAuthor Commented:
I ended up doing browser detection and writing out different CSS for each browser. Wonder if it's possible any other way?
0
 
David S.Commented:
You could try setting their widths in pixels.
0
 
myderrickCommented:
Or try adding Padding:0 and margin:0 to the text area div.

MD
0
 
SpiderstaveAuthor Commented:
Thanks for both of the tips.

I tried both of those, and they do affect the size of the textarea, but it always comes out slightly different in various browsers. I haven't been able to find a way to get the exact same size in all browsers with a single style, so using browser detection still seems to be the best solution.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now