border css for buttons

[acarur01]

I am having some problems with compatibility between browsers. Take the sample below. I have css that makes the corners of my menu button a bit rounded. It works fine in Firefox 12 but it does not in IE9- in IE it shows as a rectangle with sharp edges.. I tried it as a standalong without SmartClient it seems to work fine. Is this not supported?

I know there is a stretch image button that I can use to achieve this as well, but I would like to only control via css so that I do not have to modify existing forms.

I used this link to try the css:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-radius

isc.MenuButton.create({
    ID: "cssButton",
    baseStyle: "cssButton",
    left: 200,width:300,
    showRollOver: true,
    showDisabled: true,
    showDown: true,
    title: "CSS Button",
    icon: "icons/16/icon_add_files.png", showDownIcon: false
});


.cssButton {
  font-family:Arial, Helvetica, sans-serif;
    font-size:0.9em;
    text-align:center;
    position:relative;
    
    /*display:inline-block;*/
    vertical-align:middle;
    color:#333333;
    background-color:#ffffff;
    border:none;
    min-width:60px;
    -webkit-box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    -ms-box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.2);-webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    border-radius:3px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:5px 10px;
    text-decoration:none;
    cursor:pointer;
}

[Isomorphic]

There are known bugs in IE9 with border-radius and background bleed.

If you are using Enterprise, EnterpriseBlue or Graphite in CSS3 mode, we work around this problem, and the MenuButton is already imageless. You could just modify the CSS there.

If you are starting from some other skin, first, reconsider that (you're about to reinvent the wheel about 50 times over if you are trying to eliminate images), but second, we'll need to know what skin you're starting from.

[acarur01]

I'm using Enterprise skin with modified css already. Is css3 enabled by default in 8.3?

[Isomorphic]

No, that's 9.0 and above only.

[acarur01]

So if I were to test using SC9, do I just reapply my css snippit to be used under menuButton in skin_styles.css?

[Isomorphic]

If you take our CSS and just modify the colors, that's going to work. You've got a bunch of browser-specific CSS in there; we wouldn't make a claim that that's going to render consistently cross-browser.

[acarur01]

That's not exactly what I wanted...the menuButton style you have in SC9 does not have the rounded borders that I want..What's more, your menuButtons look different in IE and Firefox when I compare Firefox12 and IE9. I've attached a simple html testcase.

[Isomorphic]

The problem with your testcase is that you forgot the DOCTYPE.

If you want to change the radius, you can do that too by modifying our CSS, we're just suggesting that you start from our CSS rather than doing your own from scratch.

If you do your own from scratch, you may well run into platform differences that we can't shield you from, and you'll need to troubleshoot those.

[acarur01]

Ah! ok yes that works Thanks