CODEWITHSUNDEEP
htmlcssinternet-explorer-9
Jacob Windsor
Jacob Windsor

Reputation: 6980

Border radius behaving strangely in ie

I have just noticed that the border radius for my toolbar is not working in ie9. The strange thing is that there is a box shadow that does curve so I have no idea what it going on. In IE the actual toolbar div is not curved but it's box shadow does. Everything is fine in all other browsers and I know ie9 supports border radius.

Anyway the css is below. I have stripped out all the prefixes and unneeded styles so only the box shadow and border radius is there. Here is a jsfiddle with all the styles in.

UPDATE

Figured out what was going wrong. The gradient had stopped the border radius form working in IE so I shall disable it in IE for now. If anyone has a way to keep them and the border radius that would be great. I have added the gradient styles.

.membersbar {
             width:98%; background-color:#313131; 
             height:30px; padding-top:5px;
             border-bottom-right-radius:2em;
             position:fixed;
             top:0;  
             box-shadow:0 0 5px 5px #999; 

             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#313131', endColorstr='#202020');
             background: -webkit-gradient(linear, left top, left bottom, from(#313131), to(#202020));
             background: -moz-linear-gradient(top,  #313131,  #202020);
            }

This is the relevant information in the head;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

      <!--[if IE]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

</head>

Upvotes: 4

Views: 330

Answers (3)

Jacob Windsor
Jacob Windsor

Reputation: 6980

I have figured out what was going on. The gradient that I had (now edited in) was stoppping the border radius from working in IE. I have added the gradient to the css. If anyone has any way to keep the gradient and the border radius that would be great, otherwise i shall have to disable gradient in IE.

Upvotes: 0

Bruno Basseto
Bruno Basseto

Reputation: 36

Please verify if your main HTML document begins with 

<!DOCTYPE HTML>

IE supposes any page without a DOCTYPE tag to be an "old" non-HTML5 document and uses some strange "compatibility" mode, ignoring a lot of CSS3 features.

Upvotes: 1

suff trek
suff trek

Reputation: 39777

Make your IE use latest IE capabilities. Add following metatag (it has to be 1st) to your HEAD element:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

Upvotes: 1

Related Questions