My site here uses CSS buttons, but they’re not working in IE and I can’t figure out why as they’re supposed to.
Here’s the CSS:
/* Buttons: Common Style */
.big, .medium, .small{display: block;
text-align: center;
cursor:pointer;
font-family: sansus webissimo;
font-weight:normal !important;
text-shadow: 0 1px 0 rgba(34, 34, 34, 0.8);
color: #ffffff;
border-radius: 15px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(26, 26, 26, 0.8) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
/* Buttons: Sizes */
.big {width: 130px;padding:1px;font-size:25px;}
.medium {width: 80px;padding:3px;font-size:21px;}
.small {width: 68px;padding:3px;font-size:17px;}
.big:active, .medium:active, .small:active{box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1);outline: 0 none;}
Also in IE, I’m using a css stitching effect for the title headers and box titles, but when the border radius isn’t uniform ie. ‘border-radius:6px’ then the stitch effect doesn’t work in IE only.
Here’s the CSS:
/* TITLE BORDERS */
h1, h2, #left-nav .quickjump h2, .right-nav .banners h3, #left-nav .banners h3, h3.twitter, #datepicker .ui-widget-header, #datepicker .ui-datepicker .ui-datepicker-header {margin-bottom:5px;font-family:'league gothic';font-size:26px;text-transform:uppercase;padding:0px 12px;
background: #7B6E80;
-moz-box-shadow: 0 0 0 2px #7B6E80, 1px 1px 3px 2px rgba(85, 85, 85, .5);
-webkit-box-shadow: 0 0 0 2px #7B6E80, 1px 1px 3px 2px rgba(85, 85, 85, .5);
box-shadow: 0 0 0 2px #7B6E80, 1px 1px 3px 2px rgba(85, 85, 85, .5);
color: white;
border: 1px dashed #ddd;
text-shadow: 0 1px 1px #222222;
border-radius: 6px 6px 0 0;
line-height: 1.3;
}
Any help much appreciated.
I’ve done lots of research and concluded they’re just IE bugs, so the answer is there’s no answer.
Also for the CSS Buttons, the filter needed adjusting for IE.