Looking for help with this code:
<div class="container">
<input type="submit" name="submit" class="submit" value="Sign Up">
</div>
Check out the CSS styling:
input.submit{
padding-left: 40px;
padding-right: 40px;
float:right;
}
.container{
background-color: #AAA;
float:right;
padding: 50px;
}
The goal is to have the div wrap around the input button, float to the right, and be sized to match the button's size plus padding (50px). Everything works fine in other browsers but there are a couple of issues in IE7:
- The div width stretches to cover the entire page. Removing float:right from input.submit fixes this issue.
- The input button width is larger than expected compared to other browsers.
This is the doctype being used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you know why these problems are occurring and how to solve them, please share your insights!