CODEWITHSUNDEEP
javascriptcssinternet-explorer
brad
brad

Reputation: 75474

Jagged Button edges in Internet Explorer

How do you remove the jagged edges from a wide button in internet explorer? For example:

alt text

Upvotes: 5

Views: 1320

Answers (5)

Ron Savage
Ron Savage

Reputation: 11079

You can change the border style of the button with CSS, like this:

/**************************************************************************
 Nav Button format settings
**************************************************************************/
.navButtons
{
    font-size: 9px;
    font-family: Verdana, sans-serif;
    width: 80;
    height: 20; 
    position: relative; 
    border-style: solid; 
    border-width: 1;
}

Upvotes: 2

brad
brad

Reputation: 75474

As a workaround, you can remove the blank spaces on each end of the button, which has the effect of decreasing the jagged edges. This is accomplished with the following css and a bit of jQuery:

input.button {
   padding: 0 .25em;
   width: 0; /* for IE only */
   overflow: visible;
}

input.button[class] { /* IE ignores [class] */
    width: auto;
}

$(function(){
    $('input[type=button]').addClass('button');
});

The jQuery is for adding the button class. A more in depth write up can be found here.

Upvotes: 4

Paul D. Waite
Paul D. Waite

Reputation: 98846

Setting overflow: visible; on the button will cure the issue in IE 6 and 7.

(See http://jehiah.cz/archive/button-width-in-ie)

Exceptions

  • In IE 6, if display:block; is also applied to the button, the above fix won't work.

    Setting the button to display:inline; in IE 6 will make the fix work.

  • If you have a button like this within a table cell, then the table cell won't contract to the new, smaller width of the button.

    You can fix this in IE 6 by setting width: 0; on the button. However, in IE 7 this will make everything but the text of the button disappear.

    (See http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie)

More info on styling buttons:

http://natbat.net/2009/Jun/10/styling-buttons-as-links/

Upvotes: 2

scunliffe
scunliffe

Reputation: 63606

Not too much you can do about it, but the good news is that it is fixed in IE8

http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html

Upvotes: 1

cllpse
cllpse

Reputation: 21727

You can also eliminate Windows XP's styling of buttons (and every other version of Windows) by setting the background-color and/or border-color on your buttons.

Try the following styles:

background-color: black;
color: white;
border-color: red green blue yellow;

You can of course make this much more pleasing to the eyes. But you get my point :)

Stack Overflow uses this approach.

Upvotes: 5

Related Questions