Home/ Questions/Q 6572395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:59:59+00:00

I have this simplified code: <div class=container> <input type=submit name=submit class=submit value=Sign Up> </div>

  • 0

I have this simplified code:

<div class="container">
    <input type="submit" name="submit" class="submit" value="Sign Up">
</div>

And the CSS for it:

input.submit{
    padding-left: 40px;
    padding-right: 40px;
    float:right;
}
.container{
    background-color: #AAA;
    float:right;
    padding: 50px;
}

I expect the div to wrap around the input button, float to the right, and its size is equal to the button’s size + the padding (50px). In other browsers it works perfectly, but there are 2 strange things happen in IE7:

  1. The width of the div stretches to the whole webpage. If I remove float:right from CSS of input.submit, then the size of the div is correct.
  2. The input button’s width is also much larger than when the button is displayed in other browsers.

This is the doc type I use: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Anyone know why these problems happen and how to solve them?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t see why you need float: right on input.submit, so just remove it. If there is a reason you need it, you’ll have to show me why – there might be a workaround.

    To fix the second problem, add overflow: visible to input.submit.

    After those two changes, it looks virtually the same in IE7 and IE9: http://jsfiddle.net/33vmm/

    • 0