CSS alignment issue problem in Opera

For some reason the alignment of this form looks decent in Firefox and the with conditionals for IE, but in Opera it will not align itself correctly with the header. Is there some Opera hack that I am supposed to apply in order to get the text of the form to align with the header?

The html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <title>Sample Form Using Tectite Formmail and Jquery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="Description" content="description">
        <meta name="Keywords" content="tags">
        <meta name="Copyright" content="2009">
        <meta name="Robots" content="index,follow">
        <link href="form.css" rel="stylesheet" type="text/css">
       	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
				<script src="jquery.form.js" type="text/javascript"></script>
				<script src="form.js" type="text/javascript"></script>
    		<h1 id="contacthd">Request Info</h1>
        <div id="contact_form"> <!--begin container -->
         <div class="message"><div id="alert"></div></div>
				 <form method="post" action="http://capnhud.host22.com/formmail.php" name="SampleForm" id="myForm">
        		<input name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" type="hidden">
						<input name="recipients" value="prtaddress" type="hidden">
						<input name="conditions" value="something" type="hidden">
						<input name="derive_fields" value="realname=FirstName + LastName, email=EmailAddr1" type="hidden">
						<input name="subject" value="more demands" type="hidden"/>
						<input name="good_template" value="samplegoodtemplate.php" type="hidden">
						<input name="bad_template" value="sampleerrortemplate.php" type="hidden">
        		<input name="bad_url" value="fmbadhandler.php" type="hidden">
						<input name="this_form" value="http://capnhud.host22.com/sampleform3.html" type="hidden">
										<li><label for="firstname">First Name:</label>
												<input name="FirstName" type="text"></li>
										<li><label for="lastname">Last Name:</label>
												<input name="LastName" type="text"></li>
										<li><label for="Email">Email:</label>
												<input name="EmailAddr1" type="text"></li>
										<li><label for="verifyemail">Verify Email:</label>
												<input name="EmailAddr2" type="text"></li>
										<li><label for="message">Message:</label>
												<textarea id="mesg" name="Message" rows="10" cols="55"></textarea></li>
										<li id="verify"><img src="verifyimg.php" alt="Image verification" name="vimg" id="vimg">
												<input type="text" size="12" name="imgverify"></li>
										<li><p>If you cannot read the above image, click for a new one&nbsp;<br>
            						<button onclick="NewVerifyImage(); return false;">New image</button></p></li>
									  <li id="sub"><input value="Submit" type="submit"></li>
				</div> <!--end container-->


The CSS:

/*contact_form layout  */
#contact_form {
background: transparent url() repeat scroll 0 0;
margin-left: 135px;
position: relative; /*was inherit  */
width: 600px;
/* left: 275px; */ /* is not original property */
#contacthd {
border-bottom: 1px solid #ddd;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
margin: 0 auto 30px;
position: relative;
width: 880px;
#contact_form label, #contact_form input {
font: normal 12px / 1.2em Verdana, Geneva, Corbel, sans-serif;
float: left;
width: 400px;
margin: 0 0 1em;
#mesg textarea {
width: 150px;
height: 100px;
float: left;
margin: 0 0 1em;
overflow: auto;
#contact_form li {
list-style: none;
padding: 10px;
font: normal 12px / 1.2em Verdana, Geneva, Corbel, sans-serif;
#contact_form label {
text-align: left;
width: 105px;
padding: 0 20px 0 0;
.message {
background: #f5f5f5;
font: normal 12px / 1.2em Verdana, Geneva, Corbel, sans-serif;
left: 50px; /* was 135 */
padding: 10px 0 0 5px;
position: relative;
width: 525px;
height: auto;
.message li {
color: #ff0000;
margin:-15px; /* add to decrease spacing btwn li items in message */
.message ul {
line-height: 0;
margin: 0;
#verify li {
width: 100px;
#verify input{
margin-left:125px; }
#sub input{
#myForm li p{
#verify img {
position: relative;
left: -15px;

Hi, ignoring that your entire CSS file is basically commented out…I used the CSS posted.

What exactly do you mean “aligned” because so far no browsers I have checked have had the text aligned with the header. Can you post a screenshot of how it’s supposed to look like?

Don’t put it as an attachment, but rather upload the image to tinypic or something and give a direct link here :slight_smile:

What exactly do you mean “aligned” because so far no browsers I have checked have had the text aligned with the header. Can you post a screenshot of how it’s supposed to look like?

I am glad you said that it appears that with the update to Firebug when you turn it on in Firefox a scrollbar appears which pushes the alignment of the form correctly underneath the header but in opera there was no scrollbar so the alignment was off. I just increased the margin-left and turned off Firebug and the alignment was correct.

It is supposed to look like this but if a scrollbar is introduced the alignment changes.

Hi, you use auto margins on the header but the content just has a left margin set, either wrap the entire thing in a <div> with a width/auto margins or set the left margin on “#contacthd” to 185px

didn’t consider putting the header in the form div.