Using IE11 server - Rounded borders not showing? - html

Question

I am creating a webpage that sits inside another webpage (like an intranet) the document sits and runs from our server which runs Internet Explorer 11. Can anyone tell me why some of the design elements do not appear? (especially curves)
JS Fiddle:
https://jsfiddle.net/kt4hs1pk/
I have put this at the beginning which has given me the closest resemblance of what I want:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=11; IE=6" />
html
<div id="content">
<section id="mainContent">
<h2> Header </h2>
<div class="boxed">
<h3>time and date</h3>
<h4> <img src=" alt=""; style="float:left; padding-right:1%; padding-left:1%"/>main content.</h4>
<br>
<footer>
<article>
<h5><div style="color:black; background-color:#B9D4F4">Links</div></h5>
<p>footer text <br>
<br>
footer text </p>
</article>
</footer>
</div>
<div id="footerbar"><!-- Small footerbar at the bottom --></div>
</div>
</section>
css
#charset "utf-8";
#content #mainContent h2 {
/* Blog Header */
background-color:#fff;
width:auto;
text-indent:3%;
text-decoration:none;
font:antic;
font-weight:100;
}
#content #mainContent h3 {
/*Date and Name */
margin-left:10px;
font:antic;
width:auto;
font-size:14px;
font-weight:100;
color: #D6D6D6;
}
#content #mainContent h4 {
/* All paragraphs under maincontent */
margin-left:10px;
font:antic;
font-weight:100;
color:#195DAD
}
footer article {
/* Footer articles */
width: 100%;
float: left;
padding-left: 2%;
padding-top: 1%;
padding-right: 2%;
text-align: center;
font-family: antic;
font-style: normal;
font-weight: 200;
color: rgba(146,146,146,1.00);
font-size:14px
}
footer article h5 {
/* Footer article titles */
text-align: center;
font-family: antic;
font-style: normal;
font-weight: 400;
font-size:16px;
width:10%;
margin-left:auto;
margin-right:auto;
border-radius:20px 20px 20px 20px;
border-style:dotted;
}
#mainContent {
/* Container for the blog post in individal blog view */
padding-left: 2%;
width: auto;
float: left;
padding-right: 2%;
padding-top: 41px;
margin-left:150px;
max-width:60%;
border-style: groove;
border-top-style:none;
border-color: #C6D9EF;
border-width:1px;
border-radius: 8px;
}
#mainwrapper {
/* Container of all content */
width: 70%;
overflow: auto;
margin-left: 5%;
}
#footerbar {
/* Footer bar at the bottom of the page */
height: 18px;
clear: both;
background-color: rgba(185,212,244,1.00);
width: 100%;
}
footer {
/* Container for footer artices */
width: 100%;
padding-left: 2%;
padding-right: 2%;
}
#mainContent {
/* Container for the blog post */
padding-top: 0px;
float: none;
width: 96%;
}
footer {
/* Footer region */
width: 96%;
padding-left: 2%;
padding-right: 2%;
}
#content footer article {
/*Each footer article */
width: 100%;
}
#mainwrapper header {
/* Header */
width: 100%;
}
#mainwrapper header nav {
/*navigation links in header */
text-align: center;
background-color: #195DAD;
width: 98%;
}
#mainwrapper #content #sidebar {
/* sidebar */
padding-bottom: 0px;
}
#content footer article {
/* Each foter article */
width: 96%;
}
Can anyone help ?

Answer 1

Turns out the website this is going into plays in an iframe. I have come up with alternatives.