IE8 CSS - problem with margins in form

Hello,

I'm hoping someone can assist me with a layout problem I'm having in IE8. The HTML for this is:

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="slider.css" />
<![endif]-->
<link rel="stylesheet" href="home/home.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="contact/js/validation/validation.js"></script>
</head>
<body id="contact">
	<?php require_once('header_graphics.php'); ?>
		<div id="container">
				<?php require_once('logo_link.php'); ?>
    			<?php require_once('nav.php'); ?>
                <hr />
            <div id="contact_heading_container">
            <div id="contact_heading">
            <h2>Contact Me</h2>
            </div>
            </div>
            <hr />
                 <div class="contact_blurb_container">
            <p>If you would like to discuss some ideas for your new project, find out more information about me or if you would just like to say hi, I would love to hear from you! Please contact me using the form to the right or via one of the following methods listed below:
            <strong>Phone</strong> 604 582 7440
            <strong>Cell</strong> 778 321 7441
            Download a print version of my resume below:
            <span class="underline"><a href="contact/images/CV_April_2010.pdf">Download Resume</a></span><span class="pdf_padding"><img src="contact/images/pdficon_small.gif" border="0" alt="pdf icon" title="pdf icon" /></span></p>
            
            </p>
            
            
            </div>

                  <div id="contact_form_container">
                        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contact_form" name="contact_form" method="post">
    					<p class="contact_ptags"><label for="name">Name</label>
                        <input id="name" type="text" value="" name="name" size="30" /></p>
    					<p class="contact_ptags"><label for="email">Email</label>
                        <input id="email" type="text" value="" name="email" size="30"/></p>
    					<p class="contact_ptags"><label for="message">Comments</label>
                        <textarea id="comments" rows="6" cols="40"  name="comments"></textarea></p>
    					<p class="contact_ptags"><input id="submit_button" type="submit" name="submit" value="" /></p>
						</form>
                        <div id="thanks_container">
                        <?php if(isset($hasError)) { //If errors are found ?>
							<p class="error">Please check if you've filled all the fields with valid information. Thank you.</p>
						<?php } ?>

						<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
						<p><strong>Email Successfully Sent!</strong></p>
						<p>Thank you <strong><?php echo $name;?></strong> for using my contact form! Your email was successfully sent and I will be in touch with you soon.</p>
						<?php } ?>
                        </div>
						</div>
						
		</div>
        <?php include('footer.php'); ?>
</body>
</html>

and the css I'm having a problem with is:

.contact_ptags {
	width:362px;
	margin:0;
	clear:both;
}
#submit_button {
	background:url(../contact/images/submit_button_static.png) no-repeat;
	border-style:none;
	float:right;
	margin-right:-10px;
	width:108px;
	height:28px;
	overflow:hidden;
}
#submit_button:hover {
	background:url(../contact/images/submit_button_hover.png) no-repeat;
	border-style:none;
	float:right;
	width:108px;
	height:28px;
}

My problem is that setting margin-right:-10px causes a gap on the right side of the page in IE8 instead of moving my submit button over to position it the way I want. Does anyone know how I would effectively move my submit button to the right without creating a gap on the right side of the page in IE8?

Thank-you for any help!

art_wired

Newbie Poster

14 posts since Jun 2010

Reputation Points: 10

Solved Threads: 0

IE8 CSS - problem with margins in form

This article has been dead for over three months