January 24th, 2013, 12:36 AM
|
|
Contributing User
|
|
Join Date: Dec 2012
Posts: 64
Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1
|
|
|
IE: Border Radius and Box Shadow
I'm not sure why Microsoft finds it necessary to consistently make our lives as designers difficult by reinventing the wheel, and not simply follow suite with other popular web browsers; but here we are.
I'm having trouble getting the combination of border radius and box shadow to work properly with certain elements. For some reason fragments of the far corners remain visible in IE9, so it looks like there's small floating triangles around the corners of my box.
CSS:
Code:
behavior:url('css/border-radius.htc');
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
box-shadow: 3px 3px 0 #333333 inset;
This same exact code is used for a regular text input and everything is displayed correctly in IE9, but when I tried using it with the submit input fragments of the corners are still visible.
Any help would be greatly appreciated, it's very important that I get this working and I don't want to resort to using background images.
Note: The dimensions of the button are 49x49 and everything looks beautiful in Firefox and Chrome.
UPDATE: I wasn't getting the desired effect in safari either, so I ended up just creating an image to use for this button.
Last edited by nbasso713 : January 24th, 2013 at 01:59 AM.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
