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:<br /><br />
<strong>Phone</strong> 604 582 7440<br />
<strong>Cell</strong> 778 321 7441<br /><br />
Download a print version of my resume below:<br /><br />
<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><br />
<input id="name" type="text" value="" name="name" size="30" /><br /><br /></p>
<p class="contact_ptags"><label for="email">Email</label><br />
<input id="email" type="text" value="" name="email" size="30"/><br /><br /><br /></p>
<p class="contact_ptags"><label for="message">Comments</label><br />
<textarea id="comments" rows="6" cols="40" name="comments"></textarea><br /><br /></p>
<p class="contact_ptags"><input id="submit_button" type="submit" name="submit" value="" /></p>
</form><br /><br />
<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!