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!
SpiderstaveAsked:
Who is Participating?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.