Box around text?

Works in Firefox, not in IE

[mayest]

Hi all, I've got some CSS that puts a box around text. It is supposed to make it look somewhat like a calculator button:

.CalcButton {
font-family:Arial, Helvetica, sans-serif;
font-weight: bolder;
font-size: .80em;
outline: #000000 ridge thin;
padding-left: 0.3em;
padding-right: 0.3em;
}

This works great in Firefox, but not at all in IE (don't know about other browsers). IE seems to give me everything except for the outline part. Does anybody have any ideas about what I need to fix to get the same effect in IE?

Thanks,

Tim

[londrum]

'outline' is one of those things that sounds great in theory, but doesn't have support across all browsers. best thing to do is just use 'border' instead

[fireguy]

You can try this instead of outline:

border-width:1px 1px 1px 1px;
border-style: solid;
border-color:#ddd #777 #777 #ddd;

[mayest]

Thank you both. Changing from outline to border did the trick.