Menu
I have an odd visual bug in IE11 as you can see in image here >
(source: jonwallacedesign.biz)
See the odd effect on corners of the white "WHY USE US" li button....
The combination of border-radius, background-image and border: 1px solid #colour seems to be creating this odd horrid effect.
Anyone know of a solution to fix?
CSS of the LI is:
background-image: url("../images/core/primnavItemBG_sprite.png");
background-position: 0 0;
border: 1px solid #FFFFFF;
border-radius: 6px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
color: #2062AF;
font-family: 'Montserrat',Helvetica,Arial,sans-serif;
font-size: 14px;
margin-right: 5px;
outline: medium none;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
500
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
The only difference between them is the right button has a radius of 5px applied. As with borders, radius allows you to set different properties for each side of the element using the toggle controls.
Definition and Usage The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements! This property can have from one to four values.
The border-radius property in WebKit accepts one or two values and uses them to style all four corners making a nice symmetric shape. The new Firefox syntax allows you to define four different round or elliptical corners. A slash has been introduced to separate the horizontal and vertical length settings.
This worked for me. I am not sure if you have the same problem as me. I was getting slight white borer just around the corners.
background-clip: padding-box;
167
Solution:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
