Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Extra space and white outline within button elements #18

lojjic opened this Issue Jul 3, 2010 · 1 comment


None yet
1 participant

lojjic commented Jul 3, 2010

This problem is exemplified in tests/buttons.html

The problem is that for and elements, IE does some funky rendering of the element's contents. If the button is given a non-zero-width transparent border and a transparent background (as PIE gives it) then it will add some mysterious space in between the border area and the background area. This area is always drawn as solid white. The end result is that when PIE is applied to a button, that button will have an extra square solid white outline just within the PIE-rendered border, and the button will be larger than expected due to the extra space.

As one of the primary targets for CSS3 styles on many websites is styling buttons, this is a pretty big issue.

A possible solution would be to adopt the approach taken by e.g. dd_roundies which sets the target element to border-width:0 and increases the element's padding by the same amount as the original border widths. I've tried to avoid this approach because it has side-effects for things such as descendant positioning. It could also be tricky avoiding infinite loops due to triggering onresize events. It would definitely be selectively applied to only elements like button/input which need it.


lojjic commented Jul 25, 2010

This has been fixed on the head. I inserted some special-case logic for buttons where, when hiding the border, it increases the button padding by the border width and then sets the border width to zero. This eliminates the extra opaque border-like thing.

@gucong3000 gucong3000 pushed a commit to gucong3000/PIE that referenced this issue Apr 22, 2016

Jason Johnston Add special case for <button> and <input> buttons: if the border is n…
…on-zero width, even if transparent, then IE adds an extra opaque white 1px border-like thing inside the real border. To get rid of this we have to increase the padding by the border width and then remove the border altogether. Closes #18.

This issue was closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment