CODEWITHSUNDEEP
htmlinternet-explorer-9internet-explorer-10rounded-cornerscss
popvoid
popvoid

Reputation: 11

Gradient and rounded corners work in IE9, but not IE10

Could someone explain to me why this looks just fine in IE9 (as well as Firefox, Chrome, Safari, and Opera), but in IE10 the rounded corners disappear?

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
padding: 0px 20px;
background: #698ac6;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2YjNlYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzY5OGFjNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YzhlY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #96b3eb 0%, #698ac6 40%, #6c8ecc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96b3eb), color-stop(40%,#698ac6), color-stop(100%,#6c8ecc));
background: -webkit-linear-gradient(top,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
background: -o-linear-gradient(top,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
background: -ms-linear-gradient(top,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
background: linear-gradient(to bottom,  #96b3eb 0%,#698ac6 40%,#6c8ecc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96b3eb', endColorstr='#6c8ecc',GradientType=0 );
width: auto;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
font-family: Calibri, Verdana, Geneva, sans-serif;
color: #FFFFFF;
height: 44px;
font-size: 16px;
line-height: 36px;
}
</style>
</head>
<body>

<div>
<p>DASHBOARD</p>
</div>

</body>
</html>

I've tried deleting, moving, or nesting various elements, but without effect. It seems like if it works in IE9, it shouldn't have a problem with 10. What am I missing?

Upvotes: 1

Views: 2866

Answers (1)

David Storey
David Storey

Reputation: 30394

The syntax used in your code is correct for both border-radius and gradients for IE10. IE includes a compatibility mode that can emulate standards support in older versions of the browser. In this case, it looks like this has been enabled in your copy of IE10. You can check the compatibility and document mode that IE is using by opening the developer tools (F12) and checking both in the top toolbar. Switching to IE10 and standards mode should solve the issue.

Upvotes: 1

Related Questions