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
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
Code:
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;
}