CODEWITHSUNDEEP
htmlcssbuttonborder
Richard Ev
Richard Ev

Reputation: 54087

Button border colors in non-IE6 browsers

I am updating an IE6-era website so that cosmetic differences in modern (IE8, Firefox 4 in this scenario) browsers are eliminated, or at least reduced.

We've ran into an issue with buttons, which are styled using background-color: #EFEFEF; and border: 1px. In IE6 this border setting neatly reduces the border on buttons. IE6 button with default border

IE6 button with 1px border

However, in IE8 and Firefox 4 setting a CSS style of border: 1px completely removes the border.

enter image description here

I've tried using border_SIDE_color to set the color of the relevant sides of the button appropriately but this has no impact.

What approach should I use instead? This is a large legacy website, containing many buttons so I am looking for a CSS-only solution, if one exists. Forcing IE8 into compatibility mode is also not an option.

Upvotes: 2

Views: 195

Answers (1)

Spudley
Spudley

Reputation: 168655

Try setting border-style: outset;. Or use the shorthand version with the other styles you're already using:

.mybutton {
    border: outset #EFEFEF 1px;
}

Upvotes: 1

Related Questions