China pictures processed

2007.08.28 @12:26 

Internet Explorer CSS button display problem

Internet Explorer CSS button display problem

Problem of the day :

under IE if you want to have buttons without too much space on left and right ( which cannot be removed by neither margin:0 nor padding: 0 ), you can use this trick : { overflow: visible; } which works on all version of IE.

But you may just trigger another bug in IE7 : when you scroll the page the buttons display start to be corrupted ( they disappear / vanish pieces by pieces) and fixed only if you move the mouse pointer above them ! Cool...

This is because you used the directive { height: ...; } which seems to make IE try to "stretch" the box and therefore triggers these problems.

To fix this you just have to use { line-height: ...; } instead of height and this will work better in FF as well.

Example of a nice button : (without the complete rules as on the trick above)


PS: yes I really need to implement some styles for the code !

[EDIT] : done!

  1. William Coppock said:

    Monday, May 12, 2008 at 15:19

    Fantastic, I've been looking for a remedy to this IE bug for months. Thanks!

  2. Jen said:

    Tuesday, May 5, 2009 at 15:47

    Thanks William!

  3. Jen said:

    Tuesday, May 5, 2009 at 15:47

    Sorry, I mean thanks to Mi Ange!

  4. Archange said:

    Wednesday, May 6, 2009 at 08:46

    You're welcome ! ;)

  5. al said:

    Tuesday, July 28, 2009 at 02:32

    I'm not using a height and I still see the bug?

  6. Archange said:

    Tuesday, July 28, 2009 at 14:06

    hmm usually it's because of the "height" but maybe there is another reason in your case. Is it visible online somewhere ?

  7. Tony Ortega said:

    Wednesday, September 23, 2009 at 16:16

    I still had the bug after changing height to line-height. But the text didn't completely disappear with line-height. It seemed liked every other line disappeared. So I changed my button to the one above and started changing things one at a time to make it into the style I wanted. I discovered that the border:none property will also trigger the button to disappear. But if you change change the border to have the same color as your background then that solves that issue. my working button: .button { background-color:#333333; padding: 0px 5px 0px 5px; width: auto; margin: 0; font-family:Arial, Helvetica, sans-serif; font-size:8pt; font-weight:600; color: white; border-color:#333333; border-style: solid; /* height: 21px; # triggers bug in IE7 with overflow */ /* add border:none to that list*/ line-height: 16px; overflow: visible; }

  8. Archange said:

    Thursday, September 24, 2009 at 11:14

    Indeed, I can understand having no border triggers the problem too ! Thanx for the tip, never had to implement rounded buttons with real text but that could be useful indeed.

Post a Comment
Comments have been deactivated thanx to screwers.