IE disrespects margins?

Because of the way HTML processes submit buttons (first one in the list is the default) and the fact that I want to have my Back and Continue buttons in the bottom left and bottom right of my screen respectively, I've been trying to 'swap' these two submit buttons between the lower corners of my page.

Why? Because when the user hits 'Enter' while typing in a field, I want them to trigger the Continue button, not the Back button.

All browsers EXCEPT IE do this as I intend, but IE apparently has both buttons on top of each other so the Back button cannot be seen.

This page is generated by php, so I can easily 'double code' for IE vs the rest of the world (if necessary) but my obvious preference would be to find a way to accomplish this left/right swap in one set of code if at all possible.

Anyone have any thoughts? References where I can do research? Thanks for whatever you can offer!

Jeff


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta content="P3P" CP="CAO PSA OUR">
<meta http-equiv="Expires" content="Sat, 02 Jan 1988 20:00:00 GMT">
<meta http-equiv="Last-Modified" content="Fri, 02 Jul 2010 18:14:38 GMT">
<meta http-equiv="Cache-Control" content="private, no-store, no-cache, must-revalidate">
<meta http-equiv="Cache-Control" content="post-check=0, pre-check=0">
<meta http-equiv="Pragma" content="no-cache">

<style type="text/css">
table
{
 border-width: 1px 1px 1px 1px;
 border-style: solid;
 border-spacing: 0;
 border-collapse: collapse;
 text-align: left; 
 margin-left: auto; 
 margin-right: auto;
}

td
{
 margin: 0;
 padding: 4px;
 border-width: 1px 1px 1px 1px;
}

body
{
 font-family:"Arial";
}

p
{
 margin-left: 10px;
}

#backbutt
{
 margin-left: -95%;
}

#contbutt
{
 margin-right: 7%;
}
</style>

</head>
<body class="c2r">
<table width="100%">
<tbody>
<tr>
<td>
<h3>Owner</h3>
</td>
<td style="text-align: center; width: 30px; height: 30px;">
<a href="view.php?action=jump&target=0">
<img style="border: 0px solid;" alt="Welcome!" title="Jump to the Welcome screen" src="images/info.png">
</a>
</td>
<td style="text-align: center; width: 30px; height: 30px;">
<a href="includes/premium.php">
<img style="border: 0px solid;" alt="Premium" title="Click here for the Premium" src="images/premium.png">
</a>
</td>
<td style="text-align: center; width: 30px; height: 30px;">
<a href="includes/help.php">
<img style="border: 0px solid;" alt="Help" title="Click here for Help!" src="images/help.png">
</a>
</td>
</tr>
</tbody>
</table>
<hr />
<form name="name" method="POST" action="?action=proc">
<input name="formname" type="hidden" value="name">
<p>Please fill in the blank:</p>
<table>
<tbody>
<tr>
<td><b>Your name: </b></td>
<td><input name="owner" title="Enter your name here." value=""></td>
</tr>
</tbody>
</table>
<p>All information is REQUIRED. Thank you!</p>
<table style="width: 80%; text-align: center; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center;">
<input type="submit" id="contbutt" name="submit" value="Continue >>>" tabindex="98">
<input type="submit" id="backbutt" name="submit" value=" <<< Back " tabindex="99">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

IE disrespects margins?

margin IE

jeffrydell

SevenCubed

rainborick

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week